Dark mode favicon

Why favicons disappear in dark mode

Most logos are drawn as a dark mark on a transparent background, designed for a white page. In a dark browser tab that mark sits on near-black, and a black glyph on a dark gray tab is close to invisible. The same happens in reverse to white marks in light themes.

How one SVG adapts

An SVG favicon can carry its own stylesheet, and a prefers-color-scheme media query inside it follows the browser or system theme. favicon.zip embeds two styled copies of your icon and shows one at a time:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<style>#fzd{display:none}@media(prefers-color-scheme:dark){#fzl{display:none}#fzd{display:inline}}</style>
<g id="fzl"><!-- light background and glyph --></g>
<g id="fzd"><!-- dark background and glyph --></g>
</svg>

For text and icon marks, which are a single color, the glyph is recolored for the dark copy. For logos, emoji and pixel art the artwork stays as it is and only the background changes.

What cannot adapt

• favicon.ico and every PNG are bitmaps with one appearance. They use the light version.
• Browsers that do not support SVG favicons fall back to favicon.ico, so the ICO still needs to read on both backgrounds.
• The safest single design is a mark on a solid background of its own, which reads on any tab color.

Checking it

The previews show the icon in light and dark tab chrome side by side. After installing, switch your system theme and reload. Browsers cache favicons hard, so add ?v=2 to the SVG link if the old icon persists.

Questions