Favicon Best Practices That Designers Keep Getting Wrong

Most favicons fail. Not because the technology is hard, but because the design does not survive being shrunk to 16 pixels. The ones that work follow a handful of rules. The broken ones ignore those same rules.

The Number One Mistake

Complexity. Designers take a beautiful, detailed logo and shrink it into a favicon without simplifying it first. The result looks like a colored smudge in a browser tab. Nobody can tell what it is, and it might as well be a generic globe icon.

Rule 1: One Shape, Maximum

The best favicons are a single recognizable form. Think of the Twitter bird, the Spotify circles, or the Airbnb "A" symbol. One shape, instantly recognizable, even at thumbnail size.

If your brand logo has multiple elements (an icon plus text, or an icon with a decorative frame), extract just the icon part. That extracted symbol is your favicon. The full logo belongs on your homepage header, not in a 16-pixel square.

Rule 2: Two Colors, Tops

Color detail disappears at small sizes. A gradient that looks great at 512 pixels becomes muddy noise at 16. Stick to two solid colors: one for the shape, one for the background. If your brand has a five-color palette, pick the two most distinctive and use those.

The squint test

Shrink your favicon candidate to actual size on screen, then squint at it. If you cannot immediately identify the shape, it needs to be simpler. This dumb test catches most design problems faster than any review process.

Rule 3: No Text. Period.

Letters become unreadable below roughly 32 pixels. Even a single character gets fuzzy at 16 pixels unless it is extremely bold and geometric. If you must use a letter (many brands do, like Facebook's "f" or Medium's "M"), make it a thick, solid letterform with no thin strokes.

Full words? Forget it. "ACME Corp" at 16 pixels is illegible noise. Use your initials at most, rendered in the thickest weight your brand font offers.

Rule 4: Contrast Survives Everything

Your favicon will appear on white tab bars, dark tab bars, colored bookmark toolbars, and transparent mobile overlays. If your icon relies on a specific background color to be visible, it will fail in at least half of those contexts.

Test your favicon on white, on dark gray, and on your brand's primary color. If it disappears or looks wrong on any of them, add a subtle border or adjust the colors until it reads clearly everywhere.

Rule 5: Design at the Target Size

Try this: instead of designing at high resolution and scaling down, start at 32x32 pixels. You literally cannot draw complex details at that resolution. That constraint is the point.

Once the 32-pixel version looks good, scale it up and refine the high-resolution version. This ensures the core shape works at its most demanding size.

Progressive simplification

Professional icon designers use a technique called "progressive simplification." They create three versions of the same icon: one detailed (512px), one medium (64px), and one minimal (16px). Each smaller version drops a level of detail while keeping the core recognizable. This is why Apple and Google icons look great at every size. They are actually different drawings, not the same image resized.

Rule 6: Transparent Backgrounds Have Trade-offs

Transparent favicons look clean when they work. The icon floats on whatever background the browser provides. But that is also the problem. On a dark theme, a dark icon disappears. On a light theme, a light icon vanishes.

There are two solutions. First, use an SVG favicon with a prefers-color-scheme media query that swaps colors for dark mode. Second, add a subtle shape behind your icon (a circle or rounded square) in a contrasting color, so it is always visible regardless of context.

The Bottom Line

Favicon design is reduction. You are not showing everything your brand represents in a 16-pixel square. You are making a visual anchor that people can recognize instantly in a row of tabs, on any background. Keep it simple, test it small, and stop adding details.