Change Favicon Based on Dark Mode

The short answer

The most direct way to make a favicon respond to dark mode is to serve it as an SVG file and put a prefers-color-scheme media query inside the SVG's own stylesheet. When the user's system or browser is set to a dark color scheme, the rules inside that query recolor the icon's paths. Browsers that do not support SVG favicons, or that ignore the media query inside them, need a raster fallback such as an ICO or PNG file. In those browsers the icon stays fixed unless you swap it with JavaScript.

The asset under discussion is the favicon itself. This is the small mark shown in browser tabs, bookmarks and history lists, usually derived from a logo or logomark. Dark-mode adaptation only works cleanly when that favicon is true vector artwork, meaning shapes and paths that CSS can restyle. A raster image wrapped in an SVG file cannot be restyled this way.

Why a favicon may need a dark variant

Many logomarks are designed in a dark color for use on white backgrounds. When a browser's tab strip turns dark, a near-black favicon can lose most of its contrast and become hard to spot. The reverse problem affects light or white marks shown in a light interface. A dark-mode variant usually changes fill colors to keep the mark legible. It does not change the shape of the mark.

Method 1: SVG favicon with an internal media query

In this approach, a single SVG file contains both color states. The default fill applies in light mode, and a media query overrides it in dark mode. The browser evaluates the query against the user's preferred color scheme, so there is nothing to switch from page scripts.

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

The page then references the SVG as an icon. A raster file is listed alongside it for browsers that cannot use SVG favicons:

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

The path in the example is a placeholder square. In practice it would be the outlined geometry of your logomark. Note that the media query responds to the color-scheme preference reported to the browser. That preference does not always match the actual color of the tab strip, for example when a browser uses its own theme. Test the result in the browsers your audience uses.

Method 2: Separate files swapped by media attribute or script

Another option is to keep two finished files, one for light mode and one for dark mode, and choose between them.

• Media attribute on the link element: list two icon links, each with a media attribute set to the light or dark color-scheme query. Browser support for media queries on icon links is inconsistent, so treat this as an enhancement rather than a guarantee.
• JavaScript swap: listen for changes to the dark color-scheme media query with matchMedia and update the icon link's href. This works with PNG or ICO files and with browsers that ignore media queries inside SVGs. It requires scripts to run, and the icon reflects the scheme only while the page is open.

const query = window.matchMedia('(prefers-color-scheme: dark)');
const icon = document.querySelector('link[rel="icon"][type="image/png"]');

function updateIcon() {
  icon.href = query.matches ? '/favicon-dark.png' : '/favicon-light.png';
}

updateIcon();
query.addEventListener('change', updateIcon);

Some icon contexts do not react to color scheme at all. Home-screen and touch icons are common examples. Those should use a version that reads acceptably in either mode.

Comparing the approaches

Approach | What it needs | Main limitation

SVG with internal media query | One true-vector SVG file plus a raster fallback | Only works where SVG favicons and the internal query are supported

Media attribute on icon links | Two icon files and two link elements | Support for the attribute on icon links is inconsistent

JavaScript swap | Two icon files and a small script | Requires scripts and only updates while the page is loaded

Single neutral design | One icon built to read on both backgrounds | Does not adapt, so it may need compromises in color or a background plate

Vector artwork versus embedded raster images

An SVG extension does not prove that a file contains editable vector paths. Some SVG favicons are simply a PNG embedded inside an image element. CSS fill rules have no effect on such a file, so the dark-mode media query will do nothing. Before relying on Method 1, open the file in a vector editor or text editor. Confirm that the mark is built from path or shape elements whose fill can be targeted. If the only source available is a raster logo, it has to be redrawn or traced as vector artwork first. A traced result should be checked for accuracy against the original.

Pixel-grid refinement for both color states

Favicons are often rendered at very small sizes, where thin strokes and fine detail blur into soft edges. Recoloring for dark mode does not fix that, and light-on-dark rendering can make thin details look thinner or fuzzier. The following practices apply to both variants:

• Simplify the logomark to its most recognizable shape, dropping taglines, small text and fine ornament.
• Build the artwork on a small, whole-unit viewBox so that straight edges land on pixel boundaries rather than between them.
• Keep stroke and gap widths at whole units of that grid so they render crisply at the smallest target size.
• Check each color state at actual size against both a light and a dark background, not only in a zoomed-in editor view.
• If a single design must serve both modes, consider a solid background shape behind the mark, which gives consistent contrast regardless of the tab color.

Permission to alter the logo

Creating a dark-mode variant changes a logo's colors. If the logo belongs to a client or a third party, being able to download or extract the file does not grant permission to modify it. Brand guidelines may already specify an approved reversed or light-on-dark version, and that version should be used where it exists. Any fonts outlined into the mark and the trademark itself remain subject to their own license and usage terms.

Gaps in the available evidence

No subject-specific evidence was supplied for this article. That includes browser version numbers, support tables and test results. The support caveats above describe general behavior rather than verified current figures. Check up-to-date browser compatibility data, and test in your target browsers, before deciding which method and fallbacks to ship.