Blog

How to make a favicon adapt to light and dark mode

To make a favicon adapt to light and dark mode you have two real options: ship one SVG favicon with an internal style block that recolors paths via @media (prefers-color-scheme: dark), or declare two link tags differentiated by a media attribute. The SVG approach works in more places, the media-query link approach has limited support, and a high-contrast mark often beats both.

By Nico Jaroszewski · 9 June 2026 · 7 min read

To make a favicon adapt to light and dark mode you have two genuine options: ship a single SVG favicon with an internal <style> block that recolors its paths using @media (prefers-color-scheme: dark), or declare two separate icon link tags distinguished by a media attribute. The SVG approach is supported in the most places, the media-query link approach is still patchy across browsers, and in many cases a single high-contrast mark beats theme switching altogether.

The problem: tab strips are not all the same color

Browser tab strips and bookmark bars follow the operating system theme. A near-black wordmark looks crisp on a light tab strip but nearly vanishes against a dark one, and a white knockout logo disappears on a light strip. Because your favicon sits on a surface you do not control, a single fixed color can read perfectly on one theme and become an invisible smudge on the other.

Technique 1: one SVG favicon that recolors itself

An SVG favicon can carry its own CSS. Put a <style> block inside the SVG and switch the fill with a prefers-color-scheme media query, so the same file renders dark artwork on light themes and light artwork on dark themes:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>path { fill: #1d1d1f; } @media (prefers-color-scheme: dark) { path { fill: #e7e9ec; } }</style>
<path d="...your logo path..." /></svg>

You then declare it once with <link rel="icon" href="/icon.svg" type="image/svg+xml">. Browsers that support SVG favicons - the current versions of Chrome, Edge, Firefox, and Safari - will honor the media query and repaint the icon when the system theme changes. For the full markup and fallback wiring, see our SVG favicon guide.

Technique 2: two link tags with a media attribute

The <link> element accepts a media attribute, so in theory you can serve two different icon files and let the browser pick by theme:

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

This lets you swap entire raster files rather than recoloring vectors. The honest caveat: browser support for media on favicon link tags is limited and inconsistent. Some browsers ignore it and load whichever icon they encounter first, and behavior differs from the well-supported media handling on <source> in <picture>. Treat this as a progressive enhancement, never as your only icon, and always keep a plain rel="icon" and a root /favicon.ico as the fallback.

Why a safe high-contrast mark often wins

Theme-switching favicons add files, markup, and edge cases for a 16x16 to 32x32 graphic most people barely notice. A simpler and very robust answer is a mark that reads on both light and dark surfaces: give the icon a solid brand-colored or rounded background so the logo never sits directly on the tab strip, or use a shape with enough internal contrast that it survives either theme. This single icon works in every browser, every feed reader, and every OS surface with zero conditional logic.

Testing your dark-mode favicon

Toggle your OS between light and dark appearance and watch the tab update - SVG media queries should repaint live without a reload.
Use DevTools to emulate prefers-color-scheme (in Chrome, the Rendering panel) so you can flip themes without changing system settings.
Check both a light and a dark browser tab strip, plus a bookmark added in each theme, since some surfaces cache the icon.
Confirm your /favicon.ico fallback still looks acceptable on its own, because that is what older clients will show.

Generate a theme-ready set

You can build a clean SVG favicon and a matching raster fallback set without writing the markup by hand. Convert your vector with SVG to favicon, then drop a square logo into the Logo2Favicon generator to produce the ICO, PNGs, Apple touch, and PWA icons plus the head snippet. Layer the dark-mode techniques above on top, and you get an icon that stays legible whatever theme your visitor uses.

Free forever, no sign-up

Generate your full icon set free

Drop one logo into the generator and download favicon.ico, every PNG size, the Apple touch icon, Android, PWA, and maskable icons, plus the manifest and HTML snippet - all in your browser, nothing uploaded.

Open the generator