Dark mode favicons with SVG

Most websites have a favicon that looks great on a light browser tab but disappears on a dark one (or vice versa). SVG favicons solve this by adapting to the user's colour scheme automatically.

How it works

SVG files support embedded CSS, including the prefers-color-scheme media query:

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

Inside favicon.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1a1a2e; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #f0f0f0; }
    }
  </style>
  <rect width="32" height="32" rx="6" />
</svg>

When the user's OS or browser is in dark mode, the favicon automatically switches colours. No JavaScript, no multiple files, no build step.

Browser support

SVG favicons are supported in:

• Chrome 80+
• Firefox 41+
• Edge 80+
• Safari 15.4+

The .ico fallback handles older browsers that don't support SVG favicons.

Design approach

The simplest approach is to invert your favicon's foreground and background:

• Light mode: dark icon on transparent/light background
• Dark mode: light icon on transparent/dark background

For more complex logos with multiple colours, you might only need to change one or two fills:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #ffffff; }
    .icon { fill: #4f46e5; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #1e1e2e; }
      .icon { fill: #818cf8; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6" />
  <circle class="icon" cx="16" cy="16" r="8" />
</svg>

Complete favicon setup with dark mode

<!-- SVG with dark mode support (modern browsers) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

<!-- ICO fallback (legacy browsers) -->
<link rel="icon" href="/favicon.ico" sizes="32x32" />

<!-- Apple Touch (no dark mode, but iOS handles it) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

This three-line setup covers every browser and gives you automatic dark mode adaptation where supported.

Testing

1. Open your site in Chrome
2. Open DevTools → Rendering panel
3. Toggle "Emulate CSS media feature prefers-color-scheme" between light and dark
4. Watch the favicon in the browser tab change

In Firefox, you can toggle ui.systemUsesDarkTheme in about:config for testing.

Common pitfalls

1. Using fill on the <svg> element: Some browsers ignore styles on the root SVG element. Use a <rect> for the background instead.

2. Forgetting the .ico fallback: Safari before 15.4 and all older browsers need the .ico file.

3. Complex paths that don't scale: Favicons display at 16×16 to 32×32 pixels. Simplify your logo — fine details are invisible at that size.

You can generate a complete favicon set (including SVG) with our favicon generator — drop a source image and download everything you need.