Favicon in Dark Mode
Published on by The Quiet Mind
You’re all finished building your new website, and you’ve tested every page. You launch the new site and you’re busy admiring your achievement when you hear a notification chime.
It’s an email from the client. The favicon doesn’t work in light mode. Oh, right, light mode. Many developers spend most of our time in dark mode, but like anything else we need to constantly be thinking about how users will actually use the sites we build.
Unfortunately, browser support is not there yet for specifying separate icon images for light mode and dark mode. You do have some options, but like so many things on the Web, you’ll need to weigh the tradeoffs.
In general, specifying a favicon for your site has greatly improved over the years. You can get solid cross-browser support with something as simple as:
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />Compared to the dozen or so HTML tags we used to require for various size app icons this is a vast improvement. However, showing different favicons for light mode vs. dark mode is a little more nuanced.
As a reminder, when we talk about light mode and dark mode in relation to the favicon, we aren’t talking about the color mode of the contents of the website, since the favicon lives outside of the viewport in the browser tab. Instead, the favicon needs to look good based on the user’s operating system color mode.
You can switch the favicon based on the user’s OS color mode, with some caveats. You could use JavaScript to replace the <link> element’s href attribute whenever the user changes their operating system’s color mode.
To do this, you would add an event listener with addEventListener() to listen for changes to window.matchMedia('(prefers-color-scheme: dark)').
One thing you will notice if you take this approach is that the favicon won’t change until the user refreshes the page. It’s important to remember that some users may have their operating system’s settings set to change between light mode and dark mode on a schedule, for example showing dark mode at night and light mode during the day. This could lead to a situation where the user visits your site at night, leaves the tab open, and comes back in the morning to find a broken/invisible favicon.
Another approach, which is probably the recommended approach until browsers add official support for favicons based on the user’s operating system color mode, is to simply take care to choose a color that will look good in both dark mode and light mode. This requires us to think about it in terms of color theory, too bright of a color and it gets lost in the light mode tabs, too dark of a color and it gets lost in the dark mode tabs.
Regardless of the approach you take, testing will be key here. Make sure to toggle your operating system’s color mode between light mode and dark mode, and test the favicon in both active and inactive tabs. If you’re trying to pick a color that works across all four scenarios (light mode active tabs, light mode inactive tabs, dark mode active tabs, and dark mode inactive tabs), use a color picker to pull each of those colors into your designs and test the icon against all four background colors until you get something that looks good.