Creating Favicons for Light and Dark Mode UIs

Dark mode UIs are becoming increasingly popular. Often the legibility of a favicon is not great in light or dark mode, so a dynamic solution is needed to display correctly in both modes.

Luckily, SVG favicons provide the functionality we need. If you are not using SVG favicons on your site yet, then go and change them now. You can drop those 20+ PNG icons in favour of a single SVG.

So here's the thing, we can use CSS in SVGs, meaning you can also use the prefers-color-scheme media query to adjust the SVG.

Here's an example icon with some CSS to set the default path fill colour to black. The media query then changes the fill colour to white if the user has dark mode enabled.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 429.056 429.056">
  <style>
    path { fill: #000; }

    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M413.696 182.272h-21.504v-68.096c-.512-8.192-7.168-14.848-15.36-15.36H229.888V4.608h-30.72v94.208H52.224c-8.192.512-14.848 7.168-15.36 15.36v68.096H15.36c-8.704 0-15.36 6.656-15.36 15.36v101.376c0 8.704 6.656 15.36 15.36 15.36h21.504v94.72c.512 8.192 7.168 14.848 15.36 15.36h324.608c8.192-.512 14.848-7.168 15.36-15.36v-94.72h21.504c8.704 0 15.36-6.656 15.36-15.36V197.632c0-8.704-6.656-15.36-15.36-15.36zm-313.344 36.352c0-24.576 19.968-44.544 44.544-44.544s44.544 19.968 44.544 44.544-19.968 44.544-44.544 44.544-44.544-19.968-44.544-44.544zm181.76 133.632H146.944v-30.72h135.168v30.72zm46.592-133.632c0 24.576-19.968 44.544-44.544 44.544-25.088 0-45.056-19.968-45.568-44.544 0-25.088 19.968-45.056 44.544-45.568 24.576-.512 45.056 19.968 45.568 44.544v1.024z" />
</svg>

You just need to link your new icon.svg file in the document head:

<link rel="icon" href="/assets/icon.svg" />

Here's the outcome. You might need to reload the page when switching between light/dark mode UI.

Comments

[Peter Franken]

And then your users end up with this in their bookmarks:

[Callum]

Are you sure? I just tested the favicon in bookarks on Chrome and it displays correctly for me. I assume browser support is probably not 100% yet, but it's a good start.

[Peter Franken]

Yeah, I'm on Chrome also. What happens is that the icon is static / not evaluated when its origin site isn't loaded. To reproduce you switch your system theme after making sure the site isn't open in any tab, and you should see that your bookmark's favicon did not update.

I should have included that in my previous comment, hadn't had any coffee yet when I wrote it 😉

Ideally your favicon works with any background colour though. Browser themes are a thing, Apple could randomly push an update tomorrow that makes Safari's frame colour a few shades darker, etc.

It's a very cool concept nonetheless! It would be nice if they would figure out a way to have the icons update their styles in a secure way. It would also open the door to live notification dots without the need to have the site open.

[Callum]

Yea I found that you need to reload the page in order to update the favicon after switching colour mode. The same also happens in the browser tab.