Detect if the browser is using dark mode and use a different favicon

Question

Google Chrome 73 has been released, and it adds \"dark mode\" support to the browser. I notice that a lot of favicons look bad now.

Is there a way to d

Answer 1

CSS has a theme mode detection using prefers-color-scheme media feature:

@media (prefers-color-scheme: dark) {
  ...
}

With that in mind, nowadays you can use an SVG as a favicon for your website:

Then you can update the SVG favicon design using the CSS prefers-color-scheme media feature. Below is an SVG rectangle with rounded corners, which has a different color, depending on the active theme:

Now, considering the current browser support for the SVG favicon, a fallback is required for the older browsers:

---

From https://catalin.red/svg-favicon-light-dark-theme/

Here's a demo too: https://codepen.io/catalinred/pen/vYOERwL