Favicon dark and light mode

The short answer

A favicon can adapt to dark and light mode when it is delivered as an SVG file with a prefers-color-scheme media query inside its own styles. The browser reads the user's color preference and applies the matching colors to the same vector shapes. Formats such as ICO and PNG cannot do this, because they are fixed raster images. In practice, a working setup usually has two parts: an adaptive SVG favicon for browsers that support it, and a static fallback icon designed to stay legible on both light and dark backgrounds.

How an adaptive SVG favicon works

SVG is a text-based vector format, so it can carry CSS. A media query for prefers-color-scheme inside the file can change fills and strokes when the system or browser is set to dark mode. You only maintain one file and one set of paths. Only the color rules differ between the two themes.

<!-- favicon.svg -->
<!-- Standalone SVG files also need the standard SVG xmlns attribute on the root element -->
<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>

Reference the file from the page head and list a raster fallback alongside it:

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

Two behaviors depend on the browser and should be tested rather than assumed. The first is whether SVG favicons are supported at all. The second is whether the icon updates as soon as the user switches themes or only after a reload. Support for SVG favicons and for media queries inside them has differed between browser engines.

Alternative: separate files selected by the link tag

Another approach is to supply two complete icon files and add a media attribute to each link element, so the page chooses the icon instead of the SVG choosing its colors. This works with PNG files too. Browser handling of the media attribute on icon links is less consistent than the SVG-internal method, though. Treat it as a supplement, and confirm it in each browser you need to support.

<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

Icons that will not switch

• favicon.ico: a raster container used as the broad fallback, with a single fixed appearance.
• PNG favicons without a media attribute: also fixed.
• Apple touch icon: a static PNG shown on home screens and in some browser interfaces, and it does not follow the color scheme.
• Web app manifest icons: raster images chosen by the platform, which do not respond to an SVG's internal media query.

Because these assets are fixed, design them as a neutral version that reads on both light and dark surfaces. A common solution is to place the mark on a solid filled shape, such as a rounded square or circle, so that its contrast does not depend on the background behind the tab.

Designing a mark that holds up in both themes

• Check contrast against both a light and a dark tab bar, not only against white.
• Avoid very thin strokes and fine detail, because favicons are shown at very small sizes.
• If the logo is a single dark color, the dark-mode variant is often the same shape in a light color. Multicolor logos may need adjusted tones rather than a simple inversion.
• Consider a simplified symbol or monogram instead of the full logo with wordmark.
• Keep the two variants identical in shape so the icon stays recognizable when the theme changes.

Preparing the vector artwork

The adaptive method relies on real vector paths whose fills can be targeted by CSS. A file with an .svg extension does not guarantee this. An SVG can simply wrap an embedded raster image, and in that case color rules cannot recolor it. Open the file in a vector editor, or inspect its markup, and confirm that the artwork consists of path or shape elements rather than an embedded image. Convert text to outlines so the favicon does not depend on fonts. Remove hidden layers, editor metadata and unnecessary groups. Assign classes or consistent fills to the shapes that should change color.

If the logo belongs to someone else, being able to download the file does not grant permission to recolor it, alter it, or use it as a site icon. Trademark rights, artwork rights and font licenses each need to be considered separately.

Gaps in the available evidence

No verified browser support tables, version numbers or test results were available for this article. Statements about which browsers honor SVG favicons, internal media queries or the media attribute on icon links are therefore general, not confirmed specifics. Before release, check current compatibility information and test the favicon in the browsers and operating systems your audience uses, in both color schemes.