Switching The Favicon Depending On The Visitors Browser Color

Shopify Discussion
1

Hey so I have a website and I noticed the favicon looks best either fully black or white. The problem with picking one of these is that if I use the black one and the visitor is using a dark mode on their browser, they won’t be able to see the favicon. The same goes with the white. So I’m looking for a code to detect the browser color and change the favicon accordingly.

2

Hey @Jarch ,

To detect the browser color scheme and change the favicon accordingly, you can use JavaScript. Here’s an example of code that accomplishes this and can be pasted just above the </head> tag within the theme.liquid file:

{% if template contains 'index' %}
  <script>
    // Detect the browser color scheme
    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
  
    // Function to change the favicon based on the color scheme
    function setFavicon() {
      const link = document.querySelector("link[rel*='icon']");
      
      // Check if the browser is in dark mode
      if (isDarkMode) {
        link.href = "path/to/dark-favicon.ico";
      } else {
        link.href = "path/to/light-favicon.ico";
      }
    }
  
    // Call the function when the page loads
    setFavicon();
  </script>
{% endif %}

Make sure to replace "path/to/dark-favicon.ico" and "path/to/light-favicon.ico" with the actual file paths of your dark and light favicon images, respectively.

By running this code on your Shopify website, the favicon will be dynamically changed based on the visitor’s browser color scheme, ensuring it is visible regardless of the mode they are using.

3

Hello,

Where could I find the actual file path of images in shopify?

Thank you!

4

By default, Shopify stores assets in the /assets/ folder. So, the file path for the images will be relative to this folder. For example, if your dark favicon image is named dark-favicon.ico and it is located in the assets folder, the file path would be /assets/dark-favicon.ico.

Is this what you are referring to? Otherwise, you can upload, manage, and delete files from the Files page in your Shopify admin.

5

I tried this on my site, added the code to theme.liquid but it’s not working!

The only change I noticed is that the path to my files is not “/assets/dark-favicon.ico” but it is "https://cdn.shopify.com/s/files/1/0820/8003/9219/files/dark-favicon.ico?v=1694407776" when I uploaded to the Files page in your Shopify admin.

The domain is www.konnekus.com

Please help!