How to Design a Logo That Works at 16 Pixels

Most logos are designed at a comfortable size on a large screen, approved at a comfortable size in a presentation, and then spend the rest of their lives at sizes where none of the decisions that were argued about are even visible.

The favicon is 16 by 16 pixels. A social avatar is often displayed around 40. A notification icon, a browser tab, a watermark on a video, a mention in a comment thread, all tiny, all square, frequently monochrome, and collectively far more frequent than any large-format use.

If your mark does not survive there, it does not work, regardless of how it looks on the presentation slide.

Where your logo actually gets seen

Run the audit for your own business and the numbers are usually startling.

The overwhelming majority of impressions your mark will ever receive happen below 50 pixels. Design accordingly.

What breaks first

In roughly the order it fails:

Fine detail. Anything smaller than a few percent of the total width disappears entirely. Not blurs. Disappears.

Thin strokes. A hairline that looks elegant at 400 px is a broken, flickering line at 24 px, and on a non-retina display it may vanish on alternate rows.

Tight counters. The enclosed spaces in letters like a, e, and g fill in and turn into blobs. This is the single most common failure I see in a logotype reduced to icon size.

Gradients. Compress to a flat, muddy average that resembles neither end.

Low contrast. A two-tone mark where the tones are close in value becomes one shape.

More than two colors. Each additional color needs area to be perceived, and at 16 px there is no area.

Text inside the mark. Taglines, established dates, and full company names inside a circular badge. These become texture. If your mark contains words that are not the primary name, they will not be read below about 80 px.

Complex outlines. Anything with many small concavities turns to noise.

Anything that relies on white space between elements. Sub-pixel gaps close up and separate shapes merge into one.

Design the smallest version first

This is the working method and it changes the outcome more than any other single habit.

Start in black and white, at 16 by 16, on a screen at 100 percent. Not zoomed. Actual size. Build up from what survives rather than reducing down from what looked good large.

It is a genuinely uncomfortable way to work because it feels like designing with almost nothing. That is the point. Sixteen pixels is roughly 256 squares, and any idea that needs more resolution than that to be legible is an idea that will fail in most of the places it is used.

Once the small version works, scaling up is easy and you can add refinement. Going the other way almost never works, because you end up trying to preserve details that cannot exist.

The four tests

Run these before anything is approved. All four take under ten minutes together.

1. The actual size test. Export at 16, 24, 32, and 48 px, and view them at 100 percent on a normal screen. Not a preview at 400 percent. Do this on a phone as well.

2. The grayscale test. Convert to grayscale. If two elements merge, your contrast is coming from hue rather than value, and it will fail in print, in fax, in embroidery, in engraving, and in dark mode.

3. The squint test. Squint at it, or blur it heavily. What remains is what a person actually perceives at a glance. If nothing recognizable survives, the mark has no silhouette, and silhouette is what recognition runs on.

4. The one centimeter test. Print it at one centimeter wide on a normal office printer. Physical reproduction fails differently than screens and reveals problems nothing else does.

There is a fifth informal one I use constantly: put it on a phone screen among twenty other app icons and see whether you can find it in under two seconds.

Build a responsive suite, not a logo

A single logo file is not a deliverable anymore. What a business actually needs is a set of versions, each designed for a size band, with clear rules about which to use when. This is exactly the kind of thing that belongs in the first five pages of your brand guidelines.

Primary lockup. Full mark plus wordmark, horizontal. For website headers, documents, anywhere with width.

Secondary lockup. Stacked or compact arrangement. For narrow spaces and square-ish contexts.

Icon mark. The symbol alone, no words. For app icons, avatars, and anywhere square.

Favicon version. A further simplified icon. Often the icon mark with detail removed and strokes thickened. Yes, it is a different drawing, and that is correct rather than a compromise.

Monochrome. One color, solid. For embroidery, engraving, single-color print, and stamps.

Inverted. For dark backgrounds and dark mode, which is not simply the same file with the colors flipped. Optical weight changes on dark backgrounds and light-on-dark type usually needs to be slightly lighter in weight to look the same.

Six files. Each one designed rather than exported.

A worked example of the reduction

Say the identity is a wordmark with a detailed geometric symbol, in two brand colors, with a hairline circular border.

At 200 px: everything present. Full lockup, both colors, border, fine internal detail. This is the version everyone approves.

At 48 px: the wordmark comes off entirely. Symbol only. Internal detail reduced to the two or three largest shapes. The hairline border thickens noticeably or it will not render.

At 32 px: the border comes off. Two colors reduced to one plus the background. Remaining shapes simplified until each is at least three pixels across.

At 16 px: essentially a silhouette. One color. Whatever single gesture makes the mark recognizable, at maximum contrast, on a solid background.

The critical judgment is deciding what the single recognizable gesture is. That decision should be made at the start of the design process, not at the end during export, because it determines what the mark is fundamentally built around.

Why this is not a limitation

The constraint that produced this situation is also responsible for making a lot of contemporary identity work look the same, which I have written about in Why Do All Brands Look the Same Now. It is worth holding both ideas at once.

Small-format legibility is a real requirement and ignoring it produces a logo that fails in most of the places it appears. But it applies to the mark, not to the entire identity, and treating it as a license to make everything minimal is how a real technical constraint becomes an excuse for a brand with nothing to say.

Design the mark to survive at 16 pixels. Put the personality in the color, the type, the photography, and the layout, where there is room for it.