How to Design a Favicon That Works at 16 Pixels

Quick answer: a favicon that works at 16 pixels has one bold shape or letterform, high contrast against its background, and a little breathing room at the edges — detail, thin strokes, and multi-element logos disappear at that size, so the only reliable test is viewing it at actual size in a real browser tab.

Sixteen pixels is not a lot of room. It's smaller than the smallest text your operating system will render legibly, smaller than a fingertip on a touchscreen, smaller than almost anything else you design for on the web. And yet it's the size your favicon is judged at most of the time, because that's the size of a browser tab.

Most favicon disasters happen for the same reason: something was designed to look good large, then shrunk, and nobody checked what survived the trip.

Detail doesn't survive. Shapes do.

A logo with three colors, a drop shadow, and a tagline-sized wordmark might look sharp on a business card or a 512px app icon. Shrink it to 16px and all of that detail collapses into a handful of muddy pixels. Thin strokes vanish. Small text turns into noise. Fine gradients flatten into a gray blur.

What survives is silhouette. A single bold shape, a simple geometric mark, or one clear letterform reads correctly even at 16px, because there's nothing in it that depends on fine detail to make sense. This is why so many well-known favicons are just a letter, a glyph, or a simple icon on a solid background — not because designers lacked imagination, but because that's what actually holds up.

If your brand mark has multiple elements, pick the one element that's most recognizable on its own and use that for the favicon. Trying to cram the whole logo in usually produces something worse than a simplified version of it.

Contrast matters more than color nuance

At normal sizes, subtle color relationships — a slightly darker shade for depth, a soft gradient for polish — read as sophistication. At 16px, subtlety reads as nothing at all. The eye needs a clear boundary between your shape and its background to register it as a shape in the first place, and that boundary comes from contrast, not color accuracy.

A high-contrast pairing (dark shape on a light field, or the reverse) will almost always beat a low-contrast pairing of technically "on-brand" colors that are too close in value to separate at a glance. This is closely related to how a favicon should be designed with color in mind generally — see our guide to favicon color theory for more on choosing a background that holds up against both light and dark tab bars.

Design large, but design for small

The right workflow isn't designing directly at 16px — that's nearly impossible to do well, since you can't judge shape and contrast accurately when you're zoomed in edit-pixel-by-pixel. Instead:

1. Design your source art at 512×512px or larger, where you have room to work.
2. Keep the composition simple from the start — resist the urge to add detail just because there's space for it.
3. Check the result at every intermediate size on the way down: 512, 192, 48, 32, and finally 16px.
4. If it stops reading clearly at any size, simplify further, rather than accepting the smaller sizes as a lost cause.

This "design large, verify small" approach avoids the trap of a favicon that looks great in your design tool at 100% zoom but was never actually tested at the size a visitor will see it.

Zooming in lies to you

Here's the part people skip: a preview panel at 400% zoom is not a preview of what a 16px icon looks like. It's a preview of what a 16px icon looks like blown up, which is a completely different image — your eye fills in detail that won't exist at true size. The only honest test is viewing the icon at its actual pixel dimensions, ideally in an actual browser tab next to other tabs, since that's the real environment it competes in.

This is exactly the gap the favicon generator's true-pixel-size preview is built to close — it shows your icon rendered at its real 16px and 32px sizes, in a mockup tab, so you're judging the actual output rather than a zoomed-in approximation of it.

Leave the edges alone

It's tempting to bleed artwork all the way to the edge of the canvas to maximize how much of the 16px square your icon fills. Don't. A small margin around the subject does two things: it keeps the icon from feeling cramped or clipped, and it protects you on platforms that apply their own masking or rounding to icons (Android's adaptive icon shapes, for instance, will crop content that sits too close to the edge). A little padding costs you almost nothing in visual weight and saves you from clipping you won't notice until it's already shipped.

A simple checklist

• One shape or letterform, not a full logo lockup.
• High contrast between subject and background.
• Solid color or simple two-tone treatment — no gradients, no fine texture.
• Small margin around the edges, nothing bleeding off-canvas.
• Verified at real 16px and 32px size, not just zoomed in.

If your source art is a photo, a screenshot, or a detailed illustration rather than a mark designed for this purpose, it's usually worth converting it into a simpler shape first — either by hand or by picking out one strong element — before running it through a favicon generator or converter. Comparing your options across PNG, SVG, and ICO is also worth doing once your design holds up at small size, since the right export format still depends on what you're shipping it for.