Written by David Kim — Frontend + WordPress Developer. I build sites for small businesses and test favicons on every browser I own. More about me →
I launched a client site in January with a dark navy logo on a white background as the favicon. Looked perfect in Chrome's light theme. Three weeks later the client emailed: "David, our tab icon is invisible." They'd switched their Mac to dark mode, and Chrome's tab bar turned dark gray — making a dark navy icon effectively invisible against it. I hadn't tested favicon visibility in dark mode because I'd never thought about it. Now I test every favicon against both backgrounds before deploying.
The fix is an SVG favicon with a prefers-color-scheme media query embedded directly in the SVG. One file, two color schemes, zero JavaScript. Here's the exact setup I use now.
Instead of a static PNG that looks bad in one mode or the other, I generate an SVG favicon that contains both color variants:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
.bg { fill: #ffffff; }
.fg { fill: #1a1a2e; }
@media (prefers-color-scheme: dark) {
.bg { fill: #1a1a2e; }
.fg { fill: #ffffff; }
}
</style>
<rect class="bg" width="100" height="100" rx="20"/>
<path class="fg" d="M30 70V30l40 20z"/>
</svg>
Chrome 80+, Firefox 83+, and Edge 86+ all support SVG favicons with embedded media queries. Safari doesn't support SVG favicons at all — it still wants a PNG — so I always include a 32×32 PNG fallback using a favicon generator that outputs a light-background version. Safari users see the light-mode icon regardless of their OS theme, which is the safer choice since Safari's tab bar defaults to a lighter shade.
I tried using a multi-size favicon generator to produce a separate dark-mode PNG and a light-mode PNG, then referencing both in the HTML with a media attribute on the link tag. That works too, but it means maintaining two files. The SVG approach keeps everything in one file under 1KB.
Three files: favicon.svg (with dark mode support), favicon-32x32.png (light-background fallback for Safari), and apple-touch-icon.png at 180×180. The link tags in the head reference all three. The SVG loads in Chrome and Firefox, the PNG handles Safari and legacy browsers, and the Apple Touch Icon covers iOS home screen bookmarks.
Since I started including the dark mode SVG favicon, I've had zero client complaints about disappearing tab icons. The one-file SVG approach costs an extra 30 seconds per project and saves the "invisible favicon" support email.
Written by David Kim — Frontend + WordPress Developer. I build sites for small businesses and test favicons on every browser I own. More about me →