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

prefers-color-scheme
favicon in dark mode
svg favicon
chrome dark mode
dark mode icon css
react detect dark mode
prefers-color-scheme chrome
svg favicon fallback

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 detect if the user is using dark mode and change the favicon?

How to Create a Favicon for Dark Mode?, Google Chrome 73 has been released and it adds Dark Mode support to the browser. I noticed a lot of favicons look bad now. Is there a way to detect if the userĀ  How to use an SVG as a favicon for your website, considering the light and dark theme detection in the browser using the CSS prefers-color-scheme media feature, with PNG and ICO fallbacks.

To make it a little more generic than Josh's answer, try this whilst the browsers still get around to implementing media natively. (Notice no hardcoded number of themes, ids, or media-queries in the JS; it's all kept in the HTML.)

<link rel="icon" href="/favicon.ico?light" media="(prefers-color-scheme:no-preference)">
<link rel="icon" href="/favicon.ico?dark"  media="(prefers-color-scheme:dark)">
<link rel="icon" href="/favicon.ico?light" media="(prefers-color-scheme:light)">
$(document).ready(function() {
    if (!window.matchMedia)
        return;

    var current = $('head > link[rel="icon"][media]');
    $.each(current, function(i, icon) {
        var match = window.matchMedia(icon.media);
        function swap() {
            if (match.matches) {
                current.remove();
                current = $(icon).appendTo('head');
            }
        }
        match.addListener(swap);
        swap();
    });
});

The upshot is that once that attribute is supported, you just need to remove the Javascript and it'll still work.

I deliberately split /favicon.ico?light into two tags instead of a single one with media="(prefers-color-scheme: no-preference), (prefers-color-scheme:light)" because some browsers that don't support media permanently pick the first rel="icon" they see… and others pick the last!

Smart web design. Part I: light/dark mode favicon. - DEV, Dark mode is getting wildly popular these days ever since Apple The support percentage is bound to climb up once both these browsers start supporting it. with the favicon, which can look very weird on dark-mode if your icon uses API that you can use to check if a media query condition is satisfied. Detect if the browser is using dark mode and use a different favicon 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.

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:

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

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:

<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      fill: green;
    }
    @media (prefers-color-scheme: dark) {
      rect {
        fill: red;
      }
    }
  </style>
  <rect width="50" height="50" rx="5"/>
</svg>

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

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.png" type="image/png">
<!-- favicon.ico in the root -->

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

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

Updating your website favicon dynamically with dark mode, Tagged with javascript, web, html, css. Today we have new super cool ability to detect OS UI theme and change the site view according to it. It makes us to use new techniques to write themeable and easy to customize css and html. If you take a look at favicons of Dev.to or Github in dark mode, you'llĀ  4 Detect if the browser is using dark mode and use a different favicon Feb 10 3 Simulating color stops in gradients for IE Jan 31 '11 2 Is it possible to define constants in css?

Light and dark themed SVG favicon using the CSS prefers-color , Learn how to dynamically update your website favicon with dark and light mode variants. but with browsers like Chrome, website favicons often get forgotten about, resulting in to my blog for use when in dark mode. As you can see from the above code, I first check if dark mode is enabled via window. I have noticed that while in private Browsing mode, Safari will not request favicons, so in theory a site could block caching of the favicon and make a pretty good guess that Private Browsing is on. In contrast, on iOS, Safari doesn't request favicons at all.

Changing the favicon in dark mode, How to use an SVG as a favicon for your website, considering the light and dark theme detection in the browser using the CSS How to switch the SVG favicon when in Dark Mode; Browser support and fallbacks This is how phishing in the browser usually succeeds but that's a completely different story. If you take a look at favicons of Dev.to or Github in dark mode, you'll see they became almost invisible. We need to change it and make favicon to react on theme switch. The most logical way to do so is media attribute of the link element which allows favicon to react on CSS media query passed into attribute value.

Dark mode javascript, How to display a different favicon in dark or light mode. bitmap images, but we can use an SVG vector images trick for this. We can embed CSS in an SVG image. If the image is simple enough that we can identify a color and change it the path color with the #ccc color in light mode, and #fff in dark mode. Event delegation in the browser using vanilla JavaScript. Jun 24, 2020 How to display a different favicon in dark or light mode. May 14, 2020 How to detect

Comments
  • Related: stackoverflow.com/q/49939272/241211
  • stackoverflow.com/questions/260857/… for more general information about changing the favicon.
  • Also see the Firefox progress on prefers-color-scheme.
  • Update for Chrome: dynamically updating favicon
  • So that example suggests setting the href property of favicons.
  • I wish there was a better way (e.g. the browser probes the tab color and supports a attribute on the link element) because this does not only break down when using a dark theme without system wide dark-mode (like me) but it also fails in incognito tabs which are by default dark in Chrome.
  • Since addListener() is deprecated, use match.addEventListener('change', swap)
  • This is a great answer and I think this will quickly become the standard way favicons are done. However this still isn't perfect yet. The problem is that favicons can be displayed over dark backgrounds in other situations other than dark mode. For example if an app has a dark theme even in light mode. Hopefully there will be a media query for if the background is dark rather than just the user preferring dark backgrounds.
  • I agree there are inconsistencies, and that's why I added these issues months ago, on both Firefox and Chrome: - bugzilla.mozilla.org/show_bug.cgi?id=1614963 - bugs.chromium.org/p/chromium/issues/detail?id=1052408