Change Favicon for Light and Dark Mode

In the past, most Operating Systems had only light mode. But causes eyestrain when we use the mobile/desktop for a long time.

To overcome the issue, modern Operating Systems offer a feature to switch between dark or light modes.

Problem

Today almost all browsers support dark mode, so if your favicon is only designed for light mode, it will not be properly visible in dark mode.

Solution

There are multiple ways to change the favicon for light and dark mode, but before discussing the solution, I would like to provide some brief about the prefers-color-scheme media query as we will use it in each solution.

Prefers Color Scheme

The Prefers Color Scheme media query can detect if the user has specified a preference for a light or dark color scheme. Based on this preference, the website can decide whether to show the favicon in color or grayscale.

@media (prefers-color-scheme: dark) {
  /* style your dark favicon here */
}

@media (prefers-color-scheme: light) {
  /* style your light favicon here */
}

✅ According to the caniuse the prefers-color-scheme media query is supported by 95% of browsers.

1. Using Media Attribute

Use a media attribute in your favicon’s tag to change the favicon dynamically based on the user’s color scheme preference.

The media attribute will allow specifying conditions under which the favicon will be used.

<!-- ☀️ Light Mode -->
<link 
  rel="icon" 
  type="image/png" 
  href="favicon-light.png"  
  media="(prefers-color-scheme: light)" 
/>

<!-- 🌜 Dark Mode -->
<link 
  rel="icon" 
  type="image/png" 
  href="favicon-dark.png"  
  media="(prefers-color-scheme: dark)" 
/>

We used two media queries: one for light mode and one for dark mode.

The first <link> tag tells the browser to use the favicon-light.png file when the user has their color scheme preference set to light.

In the second <link> tag, we’re telling the browser to use the favicon-dark.png file when their color scheme preference is dark.

ℹ️ The media attribute is supported across 97% of browsers.

Another alternative is to use SVG as a favicon.

2. Using SVG as favicon

If you’re looking for an easy way to change your Favicon for Light and Dark Mode, SVG is the best option because of the following reasons:

1. SVG is a self-contained Document Object Model that can be easily styled to fit your specific needs. 
2. With SVG, you can easily set up a Favicon that changes between light and dark mode, giving your website a modern and professional look. 
3. SVG is highly scalable and optimized for various resolutions, making it an ideal choice for any website.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134 134">
  <style>
    path {
      fill: black;
    }
    @media (prefers-color-scheme: dark) {
      path {
        fill: white;
      }
    }
  </style>
  <path
    d="M44.193 81.846c-10.615.683-20.248 4.726-25.714 19.13-.622 1.643-2.117 2.64-3.86 2.64-2.94 0-12.029-7.32-14.619-9.088.003 21.788 10.038 40.939 33.87 40.939 20.07 0 33.866-11.581 33.866-31.8 0-.823-.172-1.61-.257-2.416zM121.153 0c-4.011 0-7.771 1.775-10.64 4.352-54.083 48.313-59.71 49.448-59.71 63.67 0 3.625.86 7.08 2.31 10.24l16.885 14.07c1.908.476 3.874.801 5.924.801 16.433 0 25.958-12.03 55.87-67.855 1.952-3.796 3.677-7.898 3.677-12.168C135.47 5.461 128.59 0 121.153 0z"
  />
</svg>

We added a style tag to the SVG to change color of it according to theme preference.

<link rel="icon" href="favicon.svg" type="image/svg+xml">

⚠️ However, SVG favicon are supported on only 76% of the browsers.

In order to show favicon on safari and Internet Explorer we have to provide a fallback version.

<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="icon" href="favicon.png" type="image/png">

3. Using JavaScript

The process is not simple as SVG and Media Attribute.

To change favicon using JavaScript, create two favicons for light mode and one for dark mode. Next, you must add code to your website to detect the user’s preferred color scheme and change the favicon accordingly.

// select the favicon 👉
const faviconEl = document.querySelector('link[rel="icon"]');

// detect theme 🔎
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)');

if (isDarkMode.matches) {
  faviconEl.setAttribute('href', 'favicon-dark.png')
} else {
  faviconEl.setAttribute('href', 'favicon-light.png')
}

Let’s understand the code step by step.

1. Create two favicons – one for light mode and one for dark mode.

2. Select the favicon

// select the favicon 👉
const faviconEl = document.querySelector('link[rel="icon"]');

3. Detect the theme

// detect theme 🔎
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)');

We used matchMedia API to detect the current color scheme, and it returns a boolean value, true of false. In addition, it is supported by almost every browser.

4. Update the favicon

if (isDarkMode.matches) {
  faviconEl.setAttribute('href', 'favicon-dark.png')
} else {
  faviconEl.setAttribute('href', 'favicon-light.png')
}

We used the if statement to check to change the favicon according to the color scheme.

Alternatively, you can use the media attribute.

Conclusion

Following this guide, you can change your favicon dynamically according to light and dark modes.

⚠️ The only disadvantage of this method is the browser theme set by the user because they might be using the light theme for operating system and a dark theme for browser.

Learn More:

• Disabling Text Selection Highlighting Using CSS