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:
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.
Top comments (7)
Why is the JS necessary? Does the media query in the media attribute not respond to a changed user preference?
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-schemequerygithub.com/rumkin/favicon-switcher
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.
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 😅
I like that (media query embedded in the SVG CSS)
@johnletey, when you say this - does it mean the favicon updates without the user having to reload the page? If yes, then that would mean that it needs JavaScript to listen to theme change events. Genuinely curious.
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.