Dark mode support for your favicon

If your brand's favicon looks best on a dark or light background, but not both, there is a quick and painless way to swap your icon colour in most browsers, without doing anything too complex

Most brand icons can be represented with an SVG, and support for SVG favicons is very good. Best of all, the SVG you make for a favicon will work like any other, so you can use the prefers-color-scheme media query to adapt to the scheme in use by the browser.

The icon for this website is a predictably simple circle on a transparent background. If the OS and browser prefers a dark colour scheme I can change the fill of the circle:

<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
  <style> circle { fill: #050505; } @media (prefers-color-scheme: dark) { circle { fill: #e0e0e0; } }</style>
  <circle cx="16" cy="16" r="7" />
</svg>
  • Select the circle SVG element
  • Set the fill to a lighter colour option
  • If the media query matches a 'dark' colour scheme, change the fill color

What about Safari?

Ah, Safari. We were so close to a perfect solution.

Safari doesn't support SVG favicons, so create a fallback png favicon and pick one variation you prefer. Apple seem to be aware of the light/dark icon scenario as a white background is placed behind a dark icon when the OS is in dark mode.

<link rel="icon" type="image/png" href="/icons/favicon.png" />
<link rel="icon" type="image/svg+xml" href="/icons/favicon.svg" />

I can only assume that the lack of support for SVG icons comes from Safari being much more closely tied to the operating system than other browsers, but it kind of fails successfully.

There is the sledgehammer option of using JavaScript to read prefers-color-scheme and updating the path to your icon to adapt. While it works in all browsers that support colour schemes, it's too much complication for an issue that is solved everywhere already, one way or another.

What about overriding the colour scheme?

Websites with support for a dark mode sometimes have a toggle to change between schemes independent of the OS setting. There is one in the footer of this site. I don't believe contradicting the OS setting is applicable to this icon though; the appearance of the browser is beyond the scope of your website and will not change if someone picks your light mode when the OS is dark, and vice versa. Best leave it alone.

More posts

Previous

Building a prefetch custom element