How to use different favicon assets for Light and Dark Modes - A Quick Dev Guide.

How to use different favicon assets for Light and Dark Modes - A Quick Dev Guide.

Tobi Emmanuel Tobi Emmanuel

Tobi Emmanuel

Building Exciting Web Experiences | Frontend Technical Manager @ Eastside Co | Web Accessibility Advocate | MDes. | Beta Gamma Sigma

发布日期: 2025年3月21日
+ 关注
Still using dark coloured favicon images in 2025? ?? (Yes I'm judging you)

Let's start with definitions.

Favicon: an icon associated with a particular website, typically displayed in the address bar of a browser accessing the site or next to the site name in a user's list of bookmarks. (Oxford dictionary)

Light mode: Light mode, also known as "Light Theme" or "Day Mode," refers to a user interface design scheme characterised by bright backgrounds and dark text. (Solute Labs)

Dark mode: Dark mode is a feature that changes the colour scheme of an application or website from light to dark. It's a popular option for those who prefer a less bright and more subdued interface. (Interaction Design Foundation)


Why is this guide important?

Since the introduction of mode switch on user devices, The use of dark mode has increasingly become popular, and so has the need to ensure your websites and apps work for users based on their colour mode preference to enhance user experience.

  • In December 2021, Chrome Platform Status reported that users with the "prefer dark" setting accounted for 22% of web traffic (Web.dev).
  • According to a 2021 survey conducted by the Android Authority of 2,500 Android users, 81.9% use dark mode on their phones, in apps,?and wherever possible. 9.9% said they switch between dark and light modes.


The guide (Purely HTML)

<head>
  <!-- Default favicon (for browsers that don't support media queries in link tags) -->
  <link 
      rel="icon" 
      href="[DEFAULT-FAVICON-URL]" 
      type="image/x-icon"
  >
  
  <!-- Light mode  favicon -->
  <link 
      rel="icon" 
      href="[DARK-MODE-FAVICON-URL]" 
      type="image/x-icon" 
      media="(prefers-color-scheme: light)"
  >
  
  <!-- Dark mode favicon -->
  <link 
      rel="icon" 
      href="[LIGHT-MODE-FAVICON-URL]" 
      type="image/x-icon" 
      media="(prefers-color-scheme: dark)"
  >
</head>

NOTE: I put each LINK attribute on its own line for readability. You don't have to do it this way.


So lets break it down

  1. Default Favicon Asset: this is usually where we stop when it comes to favicon assets. It will be a fallback for devices that don't support `prefers-color-scheme` media feature
  2. Light Mode Favicon: This should be a dark coloured image as this will pull trough to users with light mode colour scheme set. (white/light backgrounds).
  3. Dark Mode Favicon: This should be a light coloured image as this will pull trough to users with dark mode colour scheme set. (black/dark backgrounds).


Limitations to consider

In the past dark/light mode favicon changes were usually done via Javascript so as to programmatically control the switch by a toggle or button. With many devices now having inbuilt dark/light mode global settings, I find the need for this toggle is not as popular as it used to be, and most applications can now rely on pure HTML to resolve this UX issue.

If however your build requires a toggle switch, this solution might not be for you.

Another limitation would be poor support on older devices/browsers.


Conclusion

I hope this guide is quick and easy enough to implement in your projects. Happy building! and please drop a comment if you found this useful in any way. x


要查看或添加评论，请登录

Tobi Emmanuel的更多文章

  • Still building in Pixels (px)?
    2023年9月16日

    Still building in Pixels (px)?

    The tale is as old as time (well not really, only about a decade), when designers started to gradually ditch REMs for…

  • CSS3!
    2017年6月29日

    CSS3!

    If you know me, you would know I am very excitable. Just got really excited about a few CSS properties lately, and…

  • Solving the Energy Problem in Africa
    2016年4月22日

    Solving the Energy Problem in Africa

    Since the day I discovered Solar energy several years ago, it has always bewildered me why many African countries are…