Updating your website favicon dynamically with dark mode
UPDATE: Whilst the method below still works absolutely fine, SVG favicon support is much more prevalent in browsers nowadays. The same functionality as below can be accomplished with a single SVG favicon and a prefers-color-scheme
media query within it. See this post by Thomas Steiner for more info.
If you do still need to use separate ico
files, you can accomplish the same thing as below, but without any JavaScript, by using the following snippet:
<link rel="icon" href="/favicon.ico" media="(prefers-color-scheme:no-preference)">
<link rel="icon" href="/favicon-dark.ico" media="(prefers-color-scheme:dark)">
<link rel="icon" href="/favicon.ico" media="(prefers-color-scheme:light)">
For an older method using JavaScript, continue reading below.
Dark mode is everywhere now (and I love it). It's in Windows 10, Mac OS Mojave, iOS 13, and Android 10, the vast majority of which support the prefers-color-scheme
media query.
Many websites have already implemented dark themes by using this media query, but with browsers like Chrome, website favicons often get forgotten about, resulting in illegible favicons on some sites with dark mode.
For example, take a look at how my website's favicon looked when in dark mode in Chrome 78, on Windows 10. You can see the J
from my favicon is pretty much illegible due to the dark tab background, compared to a lighter tab background in light mode.
Dynamically switching favicon
My blog injects the following favicons into my page. These are the two favicons we want to update to dark mode, when enabled.
<link rel="icon" type="image/png" href="/assets/images/favicon-192.png" sizes="192x192">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
For this example, I've added a favicon-dark.ico
and /assets/images/favicon-dark-192.png
to my blog for use when in dark mode.
To update these dynamically, we'll need to use a little JavaScript, and the window.matchMedia
API. This works pretty much identically to a media query within CSS.
var darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
handleDarkmode(darkModeMediaQuery);
function handleDarkmode(e){
var darkModeOn = e.matches; // true if dark mode is enabled
var favicon = document.querySelector('link[rel="shortcut icon"]'); // get favicon-192.png element
var largeFavicon = document.querySelector('link[rel="icon"]'); // get favicon.ico element
if(!favicon || !largeFavicon){
return; // where are our favicon elements???
}
// replace icons with dark/light themes as appropriate
if(darkModeOn){
favicon.href = '/favicon-dark.ico';
largeFavicon.href = '/assets/images/favicon-dark-192.png';
}else{
favicon.href = '/favicon.ico';
largeFavicon.href = '/assets/images/favicon-192.png';
}
}
darkModeMediaQuery.addListener(handleDarkmode);
As you can see from the above code, I first check if dark mode is enabled via window.matchMedia('(prefers-color-scheme: dark)')
. I then define a function, handleDarkmode
which will automatically update our favicons to dark variants, when dark mode is enabled.
I run this function immediately on page load with the original result of the dark mode query, and then setup a listener via darkModeMediaQuery.addListener(handleDarkmode)
, which will ensure the favicon is continually updated every time the result of this media query changes. Watch the favicon in the gif below to see it update dynamically as the system colour scheme changes.
You could extend this to also update things like theme-color
and your apple-touch-icon
etc. but this was "good enough" for my use-case.