DEV Community

Cover image for Dynamic Favicons
John Letey
John Letey

Posted on

Dynamic Favicons

Nowadays, most operating systems have both light and dark modes.
Most modern browsers respect this system theme and thus use different colours depending on which you are using.

In traditional websites, you normally have one favicon. However, this isn't always good. Take GitHub for example:

GitHub Favicon Issue

This has since been resolved!

Let's see how we can fix this ...

Design two different favicons for your site.
One for light mode, another for dark mode.

However, the question is, how do you set them 🤔

Let's start out with a basic HTML site:

<head>
  <title>Example</title>
</head>
<body>
  <h1>This is an example.</h1>
</body>

To add a favicon, you would normally just add the following line:

<head>
+ <link rel="icon" type="image/svg" href="/favicon.svg" />
  <title>Example</title>
</head>

For dynamic favicons, we will use favicon-switcher.
You'll only need to add the following lines of code to your site:

<head>
+ <link rel="icon" type="image/svg" media="(prefers-color-scheme:light)" href="/favicon_light.svg" />
+ <link rel="icon" type="image/svg" media="(prefers-color-scheme:dark)" href="/favicon_dark.svg" />
+ <script src="https://unpkg.com/favicon-switcher@latest/dist/index.js" crossorigin="anonymous" type="application/javascript"></script>
  <title>Example</title>
</head>

All done! Your site will now automatically switch between the favicons depending on the system theme.

Discussion (6)

Collapse
mike_hasarms profile image
Mike Healy

Why is the JS necessary? Does the media query in the media attribute not respond to a changed user preference?

Collapse
geoff profile image
Geoff Davis

Good question! I looked at the library that was recommended, and it seems it's mostly in case a user's browser doesn't support the prefers-color-scheme query

github.com/rumkin/favicon-switcher

Collapse
adamgreenough profile image
Adam Greenough • Edited

Are there operating systems that have a dark mode with common browsers that don't have support for prefers-color-scheme? 🤔 Seems like it would be such a minority that it's not worth loading the JS for such a small enhancement. Only IE11 on Windows 10 it seems like.

Thread Thread
johnletey profile image
John Letey Author

As I've mentioned in my comment above - you don't have to go down the JS route.

However, the reason why I've chosen this way - is because the favicon automatically updates when you switch themes, which makes for a very good user interface.

It's your choice, but I'd prefer the three lines of code over messing with the SVG code 😅

Thread Thread
mike_hasarms profile image
Mike Healy

I like that (media query embedded in the SVG CSS)

Collapse
johnletey profile image
John Letey Author

I'm gonna prefix this with I don't think my way is the only way to do this.

This way works for me - and it's very simple.

As you've mentioned, you can just put the media tag inside the SVG code of your favicon.

But of what I've seen with this - it doesn't automatically switch, and you have to reload

The reason why I love this solution is because it's automatic as soon as you toggle themes.

If you are interested in going down the SVG route - I'd suggest you look here.