Dark Mode Favicons 2026 — SVG Media Query Trick + Examples

In 2026, dark-mode browser tabs are the default for ~60% of users. A black-on-white favicon disappears completely on a dark Chrome tab. Here's how to design favicons that look correct in both modes.

The problem, visualized

Your beautiful black-on-white favicon was designed for the era of light browser chrome. On a dark tab background, the white square stands out as a glaring rectangle while the black logo inside is a barely-visible smudge.

Approach 1: SVG with prefers-color-scheme (modern, recommended)

Modern browsers support SVG favicons with embedded CSS. Use @media (prefers-color-scheme: dark) inside the SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #ffffff; }
    .fg { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #1a1a1a; }
      .fg { fill: #ffffff; }
    }
  </style>
  <rect class="bg" width="32" height="32" />
  <text class="fg" x="16" y="22">Y</text>
</svg>

Then in your HTML:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Browser support: Chrome 80+, Firefox 110+, Safari 16+. For older browsers, fall back to PNG.

Approach 2: Two PNGs with media query (legacy)

Provide two favicon PNGs and let the browser pick:

<link rel="icon" type="image/png"
      href="/favicon-light.png"
      media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png"
      href="/favicon-dark.png"
      media="(prefers-color-scheme: dark)">

Caveat: only Safari fully respects this. Chrome and Firefox often ignore the media attribute on link tags. The SVG approach is more reliable.

Approach 3: Auto-adaptive with neutral colors

The simplest approach: design your favicon with colors that work on both backgrounds.

• Use medium-contrast colors (vibrant blue, green, orange) instead of pure black or white
• Add a colored background (your brand color) so the icon never relies on tab background
• Use gradients — they read on both light and dark

Design rules for theme-aware favicons

1. Use brand colors as the background. Don't rely on tab chrome — own your colored square.
2. Keep contrast within the icon. The internal contrast (background vs foreground inside the favicon) matters more than contrast against the tab.
3. Test in both modes. Toggle Chrome/Firefox dark mode and inspect.
4. Avoid pure white. Pure white favicons look like an empty rectangle on dark tabs.
5. Avoid pure black. Same problem in light mode.

Examples that get it right

• GitHub: Black silhouette on white background. Adaptive — uses SVG with prefers-color-scheme.
• Stripe: Purple background, white wordmark. Reads on both modes.
• Linear: Single-color geometric icon, no white space.
• Vercel: Triangle silhouette, adaptive SVG.

Examples that get it wrong

• Sites that use a white-background PNG with a black logo — invisible in dark mode
• Sites with too-fine line art at 16x16 — pixelates and disappears
• Sites with a transparent PNG and dark foreground — invisible on dark tabs

Generating an adaptive favicon

og.hjlabs.in's favicon generator outputs both a light-mode PNG and a dark-mode SVG with embedded prefers-color-scheme. Use the gradient and emoji modes for naturally theme-adaptive icons.

Testing checklist

1. Open your site in Chrome with system dark mode enabled — favicon visible?
2. Open in Firefox dark theme — visible?
3. Open in Safari with dark mode — visible?
4. Pin tab in Chrome — does the pinned tab icon look right?
5. Add to iOS home screen on dark wallpaper — apple-touch-icon visible?

Bottom line

The best 2026 strategy: ship one SVG with embedded prefers-color-scheme, plus PNG fallbacks for older browsers. Use brand colors as the background — never rely on tab chrome to provide contrast. Generate yours in 30 seconds.