Dark Mode Favicons (prefers-color-scheme)
A dark mode favicon changes with the operating system's light or dark setting so it stays legible against a dark or light browser chrome. Two approaches work: an SVG favicon containing a prefers-color-scheme media query that recolours itself, or two PNG files declared with media="(prefers-color-scheme: dark)" on their link tags. A single mid-tone icon that reads on both is the simplest alternative.
Two ways to make it respond
The cleaner approach is an SVG favicon with a prefers-color-scheme media query in its own styles, so the single file recolours itself when the OS switches to dark. Browsers that render SVG favicons and honour the media query (including Safari and Firefox) pick up the change with no extra tags.
The alternative is two raster files: a normal icon and a dark-optimised one, each on a link tag carrying a media attribute. Support for switching PNG favicons by media is less consistent than the SVG route, so always keep a default icon that stands on its own.
The two-file approach
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)" />
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)" />
<link rel="icon" href="/favicon.ico" sizes="any" />The plain favicon.ico is the fallback for anything that ignores the media attribute.
Dark mode favicon FAQ
How do I make a dark mode favicon?
Either put a prefers-color-scheme media query inside an SVG favicon so it recolours itself, or declare two PNGs with media="(prefers-color-scheme: dark)" and light on their link tags. Keep a plain favicon.ico as the fallback.
Does the media attribute on favicons work everywhere?
No. Support for swapping favicons by prefers-color-scheme is uneven across browsers, which is why you always keep a default icon that works regardless of theme.
SVG media query or two PNGs?
The SVG route is one file and generally better supported for theme switching. Two PNGs give pixel-level control per theme but rely on less consistent media-attribute handling.