Make an SVG favicon adapt to dark mode

The short answer

An SVG favicon can adapt to dark mode on its own. SVG is text-based vector markup, so the file can carry an internal style block with a prefers-color-scheme media query. When the browser reports a dark color scheme, that CSS changes the fills or strokes of the icon's shapes. This only works for the SVG version of your favicon. ICO and PNG favicons are fixed grids of pixels, so their colors cannot change with the color scheme.

What the technique looks like

Below is a simplified favicon file. The mark is a single shape that uses a class. The default rule sets a dark fill for light interfaces, and the media query swaps it to a light fill when dark mode is active.

<svg viewBox="0 0 32 32">
  <style>
    .mark { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f5f5; }
    }
  </style>
  <path class="mark" d="M4 4h24v24H4z"/>
</svg>

The colors and the path are placeholders. Replace them with your logo's geometry and brand values. A standalone SVG file also needs the standard SVG namespace declaration (the xmlns attribute) on its root element. It is left out of the snippet for brevity, and vector editors normally add it when they export.

Keep the CSS inside the file. A favicon is loaded as an image, so it cannot pull in external stylesheets and does not run scripts. Rules in the internal style block take priority over fill and stroke presentation attributes, so an exported file that still has hard-coded fill attributes will still respond to the media query. Classes keep the file easier to read and maintain.

Linking the icon in the page

Reference the SVG with an icon link that declares its type, and keep a raster fallback for browsers that do not use SVG favicons:

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

The ICO or PNG fallback does not adapt to dark mode. Choose colors for it that stay readable on both light and dark tab bars, or add a solid background shape behind the mark.

What changes, and what doesn't

• The media query follows the color scheme the browser reports. That is usually the operating system or browser preference, and it does not always match the actual color of the tab strip or bookmark bar.
• Some browsers cache favicons or only re-read the color scheme on reload. The icon may not switch the moment the user toggles dark mode.
• Browser support for SVG favicons, and for the media query inside them, has varied over time. The supplied evidence includes no current support data. Check up-to-date browser documentation and test in the browsers your audience uses.
• The adaptation applies only where the SVG favicon is used. Other icon slots, such as home-screen or app icons declared separately, need their own handling.

Prepare the artwork as true vectors

Recoloring only works on vector shapes such as paths, circles, rectangles and polygons. Some SVG files are just a wrapper around an embedded PNG or JPEG. CSS cannot recolor those pixels, so the icon will look the same in both modes. A .svg extension does not prove the file contains editable vector paths. Open the file in a text editor or vector application and check whether the mark is drawn with shapes or loaded through an image element. If it is raster, it has to be redrawn or properly vectorized first.

Favicons display very small, so a full logo with fine details or a wordmark often turns into a blur. A simplified symbol or monogram usually works better. Check both color states at actual tab size. A dark-mode color that looks fine large can lose contrast against a dark tab bar when it is tiny.

Recoloring is not the only approach. You can instead place the mark on a background shape, such as a rounded square in a brand color. That keeps contrast steady in both modes, with or without media query support. The trade-off is a heavier, boxed look, and you lose a transparent icon that sits directly on the tab.

Brand and permission considerations

Changing a logo's colors for dark mode modifies the artwork. For your own brand, use the reversed or light-on-dark version in your brand guidelines if one exists, rather than inventing new colors. For a client's or third party's logo, having a downloadable file does not grant permission to alter it. Rights to modify the artwork, use any fonts in it and use the trademark are separate questions, so confirm them with the owner.

Gaps in this overview

This article explains the general mechanism. It is not based on testing. No browser version numbers, support tables or measurements were available, so current support for SVG favicons and live dark-mode switching should be checked against up-to-date browser documentation before you rely on it.