Dark Mode Favicons: How to Make Your Icon Adapt Automatically

Over 80% of smartphone users have dark mode enabled, and desktop adoption keeps climbing. When someone switches to dark mode, their browser chrome turns dark, and your favicon needs to survive that transition.

A dark-colored favicon that looked great on a white tab bar becomes invisible on a dark one. A light-colored icon that pops in dark mode looks washed out in light mode. Try it: open your browser with 15 tabs and toggle between themes. You will be surprised how many favicons just vanish.

The SVG Solution

SVG is the only favicon format that can adapt to dark mode on its own. The trick is CSS media queries embedded directly in the SVG file. When the browser detects prefers-color-scheme: dark, the SVG swaps its colors automatically. No JavaScript needed, and no extra files to manage.

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

    @media (prefers-color-scheme: dark) {
      .icon { fill: #F0B08A; }
      .bg { fill: transparent; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <path class="icon" d="M8 24 L16 6 L24 24 H8Z"/>
</svg>

Browser Support

Safari on iOS is the notable holdout. It does not support SVG favicons at all, relying instead on the Apple Touch Icon (a static 180x180 PNG). For iOS users, you need a separate approach if dark mode adaptation matters.

Alternative Approaches

The contrast border method

If SVG support coverage is not sufficient for your audience, a simpler approach works everywhere: add a visible border or background shape to your favicon that provides contrast in both modes. A dark icon inside a light rounded square works on dark backgrounds. A light icon inside a dark rounded square works on light backgrounds. A mid-tone background works acceptably on both.

The dual-PNG method

Some developers serve different PNGs based on theme detection. This requires JavaScript to check matchMedia('(prefers-color-scheme: dark)') and swap the favicon link dynamically. It works but adds complexity and can flash the wrong icon during page load before the script runs.

// Swap favicon based on color scheme
const setFavicon = (isDark) => {
  const link = document.querySelector("link[rel='icon']")
  if (link) {
    link.href = isDark ? '/favicon-dark.png' : '/favicon-light.png'
  }
}

// Initial set
setFavicon(matchMedia('(prefers-color-scheme: dark)').matches)

// Listen for changes
matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', (e) => setFavicon(e.matches))

Practical Recommendations

For most sites in 2026, the best approach is to use an SVG favicon as the primary icon (covers all desktop browsers with automatic dark mode adaptation) alongside a static PNG Apple Touch Icon for iOS. The iOS icon does not need dark mode adaptation because iOS renders it against its own themed background on the home screen.

If you are generating favicons with AI Favicon, the download package includes an SVG that you can modify to add dark mode CSS. Start with the generated SVG, open it in a text editor, add the media query block shown above, and adjust the dark mode colors to complement your brand.