Logo variations: the versions every brand needs

The short list

Three color versions cover almost everything. Each one exists because the others fail somewhere specific.

Full color, transparent background

The real logo, for light backgrounds. Transparent rather than on white, so it can sit on a page of any color without a box around it.

White, transparent background

Also called the knockout or reversed version. For dark headers, dark slides, photos, and merchandise in a dark color. This is the one people most often do not have, and the one they need most often.

Black, transparent background

For light and printed backgrounds, one-ink printing, faxes, stamps, and anywhere color is not available or not wanted.

If you have those three as large transparent PNGs, you can handle almost any request without going back to a designer.

The white one is the one you are missing

Nearly every logo is designed on white, so the color version works on a light page and quietly fails everywhere else. Two things go wrong on a dark background, and they look like different problems.

• A white box appears around it. The file has a solid white background rather than a transparent one, which is invisible on a white page and obvious on a dark one.
• Part of the logo vanishes. The background is transparent, but the dark parts of the mark have nothing to contrast with, so the shape breaks up.

A white version with a transparent background solves both at once. It is a solid white silhouette of the mark, so the shape reads at any size against anything dark.

The black one, and what one-color really means

A one-color version is not a grayscale version. It is the mark in a single solid color, usually pure black, with no shades in between, because the places that ask for it can only print one ink: embroidery, screen printing, stamps, engraving, newspaper classifieds, some contracts and forms.

If your logo has gradients or a drop shadow, those have to flatten into the silhouette rather than survive as grays. Keeping the shading gives a halftone that clogs up in embroidery and prints muddy.

Making them from the logo you have

1. Start with a transparent version. If your logo is on a white background, Remove White Background clears it in one step, which is what makes every version afterward usable.
2. Make the white and black versions. Change Logo Color turns the logo white or black while keeping the transparency and the soft edges, and lets you see it against black, white or your own brand color before you download it.
3. Check the small sizes. Shrink each one to about 32 pixels and look at it. If it turns to mush, you need a simplified mark for small use, which is a redraw rather than a recolor. The favicon generator is the quickest way to see it at that size.
4. Try them in place. Overlay Images will drop each version onto a real photo or a colored background so you can see which one actually works there.

The versions you cannot make by recoloring

Color versions are a change to the same artwork. Layout versions are different artwork, and no tool can produce them from a single file because the information is not in there.

Stacked and horizontal

The same mark arranged tall or wide, so it fits a narrow sidebar and a wide header without being squashed.

Icon only

The symbol without the words, for app icons, favicons, profile pictures and anywhere too small to read a name.

Simplified

A version with the fine detail removed, for embroidery, tiny sizes and engraving.

These are worth asking a designer for once, at the start. What file types to ask for is covered in which logo file types you need.

Naming them so they stay usable

A folder of files called logo.png, logo2.png and logo-final-v3.png is how a brand ends up using the wrong one on a website for a year. Name each file after what it is, so somebody can pick the right one without opening it.

• acme-logo-color.png
• acme-logo-white.png
• acme-logo-black.png
• acme-icon-color.png

Keep the largest size you have of each, rather than a version already shrunk for one use. Making a small file from a big one takes seconds; the other direction is impossible, and is why logos end up blurry.

Frequently asked questions

What logo variations do I need?

Three, at minimum: the full color logo, a white version for dark backgrounds, and a black version for light or printed ones. Everything else is a nice to have. Most brand problems people run into are caused by not having the white one.

What is a knockout or reversed logo?

Two names for the same thing: the version where the logo is knocked out in white so it can sit on a dark or busy background. It is usually a silhouette of the mark in solid white with a transparent background, not the color logo on a dark square.

Why does my logo look wrong on a dark background?

Usually because it is the color version sitting on a white box, which shows as a bright rectangle, or because dark parts of the logo disappear into the background. A white version fixes both: the shape stays readable and there is no box, because the background is transparent.

Can I just use the color logo everywhere?

You can until you cannot. It fails on a dark header, on a photo, in a one-color print job like embroidery or a stamp, in a fax or a scanned form, and at very small sizes where fine color detail turns to mush. Each of those is the moment somebody asks for a version you do not have.

Should a monochrome logo be gray or pure black?

Pure black. A one-color version exists for places that can print exactly one ink or need maximum contrast, and gray defeats both. If the artwork has shading, flatten it to a solid silhouette rather than keeping the grays, or it will print as a muddy halftone.

Do I need an SVG of each version?

It is the ideal, because a vector scales to a billboard without going soft. But a large transparent PNG of each version covers almost every everyday use, and it is what you can make yourself from a PNG you already have. Which file types to ask a designer for is a separate question.