Does adding a border crop or scale my logo?

No. The canvas expands by the border thickness on every side, so the original logo pixels are preserved at full size and simply surrounded by the new border.

Can I make a transparent or semi-transparent border?

Yes. Set the alpha channel input below 255 (0 is fully transparent, 255 is fully opaque) to get a semi-transparent or invisible border.

What units is the border thickness in?

Pixels. A thickness of 10 adds a 10-pixel-wide border on the left, right, top, and bottom, so the output canvas grows by 20 pixels in both width and height.

Can I use a border thicker than the logo itself?

Yes, there's no upper relationship between border thickness and logo size, only the final output must stay within the 4096-pixel maximum canvas dimension.

Logo Border Adder - Add a Solid Border to a PNG Logo

Overview

Introduction

This tool adds a solid-color border around a PNG logo entirely in your browser, expanding the canvas so the original artwork is never cropped or scaled down to make room.

It's a focused, logo-labeled wrapper around the site's general-purpose PNG border tool.

What Is Logo Border Adder?

A client-side logo border generator that decodes an uploaded logo's pixel data, builds a new larger canvas filled with your chosen border color, and pastes the original logo centered inside it.

You control the border thickness in pixels and the border color's red, green, blue, and alpha channels independently.

How Logo Border Adder Works

The tool first fills an output canvas — sized to the logo's dimensions plus twice the border thickness — entirely with the chosen border color, then copies every pixel of the original logo into the middle of that canvas, offset by the border thickness on each axis.

Because the border is painted first and the logo copied on top, semi-transparent logo pixels correctly show the border color showing through at their edges.

When To Use Logo Border Adder

Use it to give a flat logo a visible frame before placing it on a busy background, to create a simple badge-style treatment, or to add consistent padding-plus-color around a batch of brand marks.

It's also useful for quickly mocking up how a logo would look with a colored outline in a design system.

Often used alongside Logo Border Remover, Icon Border Adder and Logo Outline Adder.

Features

Advantages

Runs entirely client-side; your logo is never uploaded to a server.
Never crops the original logo, since the canvas grows to fit the border.
Full control over border color including transparency, not just a fixed color.

Limitations

The border is always a uniform rectangle around the logo; it doesn't trace an irregular or rounded logo shape.
Very thick borders on an already-large logo can push the output past the 4096-pixel maximum canvas dimension, which the tool will reject with an error.

Examples

Add a thin black border to a 200x200 logo

Input

200x200 PNG logo, thickness 4, color black (0,0,0,255)

Output

A 208x208 PNG with a solid 4px black border on every edge

The canvas grows by 4 pixels on each of the 4 edges (8 total per axis).

Add a semi-transparent white border

Input

128x128 PNG logo, thickness 6, color white with alpha 128

Output

A 140x140 PNG with a soft, half-opaque white frame

Setting alpha below 255 produces a translucent border rather than a solid one.

Best Practices & Notes

Best Practices

Pick a border color that contrasts with both the logo and its eventual background so the frame stays visible.
Keep border thickness proportional to logo size — a thin border tends to disappear on large logos, while a thick border can overwhelm a small mark.

Developer Notes

This lib file is a thin wrapper: it re-exports the pure addBorderToPng function from png-border-adder.ts (the shipped 'PNG Border Adder' tool) under the logo-specific name addLogoBorder, since a logo is just a PNG once uploaded and the border-compositing math doesn't need to be re-derived for a different subject noun.

Logo Border Adder Use Cases

Adding a visible frame to a transparent-background brand logo
Creating consistent padding-plus-border around a set of partner logos
Mocking up a badge or sticker style around a logo mark

Common Mistakes

Forgetting that the output canvas is larger than the input — downstream code expecting the original dimensions needs updating.
Setting alpha to 0 and being confused that no visible border appears; that's fully transparent by design.

Tips

Use the Logo Border Remover tool afterward if you need to undo a border you added here.
Combine with Logo Outline Adder if you want a shape-hugging outline instead of a rectangular frame.

Logo Border Adder