Dark Mode Favicon — Adapting Icons for Light and Dark Themes

Dark Mode Favicon

Modern browsers support dark mode, and your favicon should adapt accordingly. A favicon designed for a light browser theme may become invisible or look poor against a dark background, and vice versa.

The Problem

Consider a favicon with a dark logo on a transparent background:

• Light mode: The dark logo is clearly visible against the light tab bar
• Dark mode: The dark logo virtually disappears against the dark tab bar

SVG Favicons with Media Queries

The most elegant solution is an SVG favicon that uses CSS media queries:

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

Inside the SVG file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1a1a1a; }
    path { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #ffffff; }
      path { fill: #1a1a1a; }
    }
  </style>
  <rect width="32" height="32" rx="4" />
  <path d="M8 8h16v16H8z" />
</svg>

Browser Support

SVG favicons with media queries are supported in:

• Chrome 80+
• Firefox 63+
• Safari 16+
• Edge 80+

Fallback Strategy

For browsers that do not support SVG favicons, provide a PNG fallback:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">

Alternative Approaches

If SVG is not an option:

1. Use a background: Add a solid or contrasting background to your favicon so it works on both light and dark surfaces
2. Add a border: A subtle border or outline ensures visibility regardless of the background
3. Choose a neutral color: Icons in mid-tone colors (like blue) tend to work on both light and dark backgrounds