How to change the favicon in dark mode ?

How to display a different favicon in dark or light mode ?

I have my Macbook set up to automatically switch between dark and light mode.

I built a new website and I realized that I used a white image as favicon, and in light mode it was almost invisible!

So I started searching for possible ways to add a favicon in dark mode and a different one in light mode.

Turns out there isn’t (yet) a way to do so for PNG/JPG bitmap images, but we can use an SVG vector images trick for this.

We can embed CSS in an SVG image. This is a powerful feature of SVGs.

If the image is simple enough that we can identify a color and change it in dark mode, we can have a different color for the 2 modes.

Here’s the SVG I used as favicon with the CSS trick:

<svg
  width="37"
  height="45"
  viewBox="0 0 37 45"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <style>
    path {
      fill: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      path {
        fill: #fff;
      }
    }
  </style>
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M31.8831 2.04389C25.2462 2.72205 20 11.1737 20 21.5C20 32.2696 25.7062 41 32.7451 41C33.9877 41 35.2047 40.7279 36.3664 40.2206C32.5452 43.2149 27.7311 45 22.5 45C10.0736 45 0 34.9264 0 22.5C0 10.0736 10.0736 0 22.5 0C25.849 0 29.0271 0.731675 31.8831 2.04389Z"
  />
</svg>

The SVG image is very simple, it’s a half moon (crescent 🌙) I designed in Figma and exported as SVG.

Then I filled the path color with the #ccc color in light mode, and #fff in dark mode. I saved it as a .svg file and then used it as the favicon.

This is a good practice for UI (User Interface) and UX (User Experience) of your website. That helps you with the branding of the website.