Change favicon based on dark/light color mode

Last Updated: May 19, 2022

IntroductionLink to this heading

In the past, most of the Operating Systems had only light color mode. But, it was hurting our eyes when we use our mobile/desktop screens for longer period of time.

To resolve that issue, nowadays many Operating Systems have support to change color mode to dark.

ProblemLink to this heading

When we use dark color mode, all the native application windows also changes its color to dark. This cause issue that favicon designed for light color mode no longer getting visible properly on dark color mode as shown in below image.

SolutionsLink to this heading

There are two solutions for this problem.

For this solution, we need to create two favicon image files. One for light color mode and another for dark color mode.

Once we have two favicon image files, we can serve different favicon by setting prefers-color-scheme media query in media attribute of <link> element as shown below:

      media="(prefers-color-scheme: dark)"
      media="(prefers-color-scheme: light)"
    My awesome website ✨

After implementing above code, we can see that favicon gets changed on change of light/dark color mode in our Operating System.

Demo of changing favicon based on dark/light color mode

This solution works in all the modern browsers and devices.

2. Using SVG faviconLink to this heading

For this solution we need only one favicon image but in SVG file format.

In that SVG file, We need to add prefers-color-scheme media query to change fill/stroke colors of the SVG image based on dark/light color mode.

<svg xmlns="" width="100" height="100">
    // set fill/stroke colors of favicon for light color mode here

    @media (prefers-color-scheme: dark) { 
      // change fill/stroke colors of favicon for dark color mode here
  <!-- SVG image code here -->

Unfortunately as of writing this tip, SVG favicon is not supported in all modern browsers. So, it is safer to go with 1st solution for now and in future when it is supported by all modern browsers, go with this solution to have only one favicon image file.

Do you have any question related to this post? Just Ask Me on Twitter

Explore More:

Subscription Image
Subscribe & Learn

As a full-time content creator, my goal is to create a lot of quality content, which can be helpful to you in advancing in your web development career ✨

Subscribe to my newsletter to get notified about:

  • 🗒 Thorough articles, tutorials and quick tips
  • 🗞 Latest web development news
  • 📙 My upcoming front-end courses
  • 💵 Subscriber exclusive discounts

No spam guaranteed, unsubscribe at any time.

Loading Subscription Form...