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. If you need help with this process, our guide on making a favicon from your existing logo walks through the extraction workflow step by step.

Real-World Examples

The best way to understand what works is to study favicons you see every day in your browser tabs. Here are five that consistently succeed at 16 pixels, and the specific design choices behind each.

GitHub's Octocat silhouette

GitHub does not use the full Octocat mascot as its favicon. Instead, it uses a simplified silhouette of the Octocat's head — just the circular shape with the two pointed ears. At 16 pixels, the ears are the distinguishing feature. They create a unique outline that no other favicon has. The icon is a single color (white or dark, depending on theme) on a contrasting background. No tentacles, no body, no details that would blur together.

Stripe's slanted S

Stripe uses a bold, geometric "S" rotated about 15 degrees. The slant is the key decision: it makes the letterform feel distinctive rather than generic. At 16 pixels, the letter is just three thick strokes, and the rotation gives it a unique silhouette. Stripe also uses its signature purple (#635BFF) which has high contrast on both light and dark tab bars. The strokes are thick enough that they remain crisp at every size — no thin lines to disappear.

Notion's outlined N

Notion's favicon is a bold sans-serif "N" with a slight stylization — the right vertical stroke extends slightly beyond the top, creating a subtle calligraphic feel. It works because the letter is extremely heavyweight with no thin strokes, and it uses pure black on white (or inverted for dark mode). The simplicity is radical: no background shape, no color, just a black letter. At 16 pixels it is unmistakably an "N" because the strokes are at maximum width.

Linear's abstract L

Linear takes a different approach: its favicon is an abstract mark that suggests an "L" without being a literal letter. Two connected line segments form a right angle, with rounded endpoints and a slight gradient. The mark reads as both an "L" and a cursor arrow, reinforcing the product's identity as a project management tool. At 16 pixels, it is two lines meeting at a corner — simple enough to render cleanly. The gradient is subtle enough that it still works at the smallest sizes where it collapses into a solid color.

Vercel's triangle

Vercel uses a filled equilateral triangle pointing up. That is it. No letter, no logomark, just a geometric primitive. This is the most extreme example of simplification succeeding: a triangle is recognizable at literally any size, down to 4 pixels if needed. The shape is unique enough in context (no other major tech company uses a plain triangle) that it works as a brand identifier. The solid black fill means it has maximum contrast on light backgrounds, and Vercel provides a white version for dark backgrounds.

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 Color Contrast Matrix

Your favicon will appear on backgrounds you cannot control. Here is how common icon colors perform across the three backgrounds that matter most.

Purple and orange are the safest choices — they maintain visibility across all common backgrounds. Pure black and pure white are the worst because each is invisible on one common background. If your brand color is dark blue or black, consider adding a contrasting background shape (a white or light circle behind the icon) to ensure visibility in dark mode. For a deeper dive into this, see our guide on making favicons adapt to dark mode automatically.

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. For a complete breakdown of what works at every size, see our guide to favicon design at every size.

Progressive Simplification in Practice

Professional icon designers do not use a single image resized to every needed dimension. They create distinct versions of the icon optimized for specific size ranges. This technique is called progressive simplification, and it is the difference between icons that look "fine" and icons that look sharp everywhere.

At 512 pixels: the full expression

This is your richest version. You can include subtle gradients, thin strokes, inner shadows, and fine details. If your brand has a logomark with a decorative element — a small star, a line accent, a subtle texture — this is where it lives. The 512px version is used for app store listings, PWA install screens, and high-resolution Android home screens. Viewers see it at near-full size, so it needs to look polished.

At 64 pixels: strip the subtlety

Drop all thin strokes (anything under 2px equivalent). Remove inner shadows and subtle gradients — replace them with solid fills. If your icon has a small decorative element, remove it. Keep the primary shape and its background. This version is used for bookmarks, Windows taskbar pins, and large tab views. At 64 pixels, you have enough room for the core shape but not enough for finesse.

At 32 pixels: the essential

This is the workhorse size — what most people see in their browser tab on high-DPI screens. Reduce to two colors maximum. Make sure every stroke is at least 2-3 pixels wide. If the icon has rounded corners, make them chunkier (higher radius relative to the size). The shape should be unmistakable at a glance.

At 16 pixels: the extreme

You have 256 total pixels to work with. Every pixel matters. At this size, consider pixel-hinting: manually adjusting the icon so that edges align with the pixel grid. Anti-aliased curves look blurry at 16px, but pixel-aligned edges look crisp. Some designers create the 16px version entirely by hand in a pixel art editor rather than scaling down from a vector. If your icon has an outline, it should be exactly 1 pixel wide. If it has a fill, the fill color should be saturated enough to read as a solid shape, not a smudge.

SVG Favicon Dark Mode

SVG favicons can automatically adapt to the user's color scheme using embedded CSS media queries. This is the most elegant way to handle dark mode without JavaScript or multiple files.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon { fill: #1A1A2E; }
    .bg { fill: #FFFFFF; }

    @media (prefers-color-scheme: dark) {
      .icon { fill: #E0E0FF; }
      .bg { fill: #1A1A2E; }
    }
  </style>

  <!-- Background shape — gives contrast on any tab bar -->
  <rect class="bg" width="32" height="32" rx="6" />

  <!-- Your icon mark -->
  <path class="icon" d="M8 24 L16 6 L24 24 Z" />
</svg>

The key points: use class attributes on your SVG elements and define color changes in a <style> block with @media (prefers-color-scheme: dark). The browser applies these styles automatically when the OS theme changes. Include a background rectangle (.bg) so the icon has its own contrast regardless of the browser's tab bar color.

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. Once you have a design you are happy with, run it through a systematic testing checklist to catch cross-browser issues before your users do.