How to Specify Different Favicons for Light and Dark Modes

Published on: 2024-08-15 | Author: Favicon.im

In the age of dark mode preferences, adapting your website's favicon to match the user's chosen color scheme can significantly enhance the user experience. While many solutions rely on JavaScript, there's a simpler, purely HTML-based approach to provide different favicons for light and dark modes. This method leverages the media attribute of the <link> tag, allowing you to specify different resources based on the user's color scheme preference.

The HTML-Only Solution

Here's how you can implement mode-specific favicons using only HTML:

<head>
  <!-- Default favicon (for browsers that don't support media queries in link tags) -->
  <link rel="icon" href="favicon-light.ico" type="image/x-icon">
  
  <!-- Light mode favicon -->
  <link rel="icon" href="favicon-light.ico" type="image/x-icon" media="(prefers-color-scheme: light)">
  
  <!-- Dark mode favicon -->
  <link rel="icon" href="favicon-dark.ico" type="image/x-icon" media="(prefers-color-scheme: dark)">
</head>

Let's break down what's happening here:

We start with a default favicon. This ensures that browsers which don't support media queries in <link> tags still display a favicon.
We then specify a light mode favicon using the media attribute with (prefers-color-scheme: light). This favicon will be used when the user's system is set to light mode.
Finally, we specify a dark mode favicon using (prefers-color-scheme: dark). This favicon will be used when the user's system is set to dark mode.

Advantages of this Approach

Simplicity: This method requires no JavaScript, making it easier to implement and maintain.
Performance: As it's purely HTML-based, there's no need to wait for JavaScript to load and execute.
Instant updates: The favicon will update immediately when the user switches their system's color scheme, without requiring a page reload.
Fallback support: Browsers that don't support this feature will simply use the default favicon.

Considerations

While this method is simple and effective, it does have a few limitations:

No manual toggle support: Unlike JavaScript methods, this approach doesn't allow for manual toggling of the favicon if you have a custom dark mode switch on your site.
Limited browser support: While most modern browsers support this feature, some older browsers may not recognize the media attribute for favicons.
No dynamic generation: If you need to generate favicons dynamically based on other factors, you'll still need to use JavaScript.

Preparing Your Favicons

Before implementing this solution, ensure you have prepared two versions of your favicon:

A light mode version (e.g., favicon-light.ico)
A dark mode version (e.g., favicon-dark.ico)

These favicons should be placed in your website's root directory or wherever you typically store your favicon files.

Testing Your Implementation

After adding the HTML code to your site's <head> section, test your implementation by:

Viewing your site in a browser that supports dark mode (like Chrome, Firefox, or Safari).
Switching your system's color scheme between light and dark modes.
Checking if the favicon changes accordingly.

Remember to test on different devices and browsers to ensure broad compatibility.

Conclusion

Using HTML's media attribute to specify different favicons for light and dark modes is a simple, efficient solution that works well for many websites. It provides a seamless experience for users without the need for JavaScript, making it an excellent choice for static sites or those aiming to minimize script usage.

By implementing this technique, you're adding a small but significant enhancement to your site's user experience, showing attention to detail and consideration for user preferences. Happy coding!