Your perfect Dark Mode Favicon ✨

Google Chrome, the most popular browser to date, introduced dark mode almost 3 years ago. Firefox and all other major browsers now support it as well. On the contrary, even large companies (such as Asics, Sentry, and Under Armour) still use a favicon that is almost invisible on a dark background.

This is especially painful to see for a front-end person with a small tab-hoarding problem (and I think I'm not alone here). Here's what you can do to solve it:

Option 1: Quick Fix - Favicon with Background

If you only have 5 minutes to optimize for dark and light mode, you can simply update your current favicon with a white or black background.

This way your favicon will always look professional regardless of light or dark mode. Google also chose this option and added a white circle around the “G” to create more contrast. However, if you want to have a website with dedicated favicons for dark and light mode, go for the next option.

Option 2 (recommended): SVG-Icon for Light and Dark Mode

For a while now it's been possible to use SVG graphics as favicons. This is convenient: They can be scaled without quality loss, plus you can apply CSS to change the color. The latter we are going to use for our dark mode and light mode favicons.

First open up your SVG file in your preferred editor, in my case that's VS-Code. All you have to do is add internal CSS to your SVG through style tags. Within the tags, you select the fragment(s) of your icon and choose the color for the light theme.

Finally, use the media query to detect dark mode and set your favicon color accordingly @media (prefers-color-scheme: dark) { ... }

The final SVG for your favicon will look like this:

<?xml version="1.0" encoding="UTF-8"?>  
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <style>
    path {
      fill: #093651;
    }
    @media (prefers-color-scheme: dark) {
      path {
        fill: #fff;
      }
    }
  </style>
  <path class="cls-1" d="m361.01,34.94c-44.12,43.97-71.53,104.71-71.53,
  171.54v587.04c0,66.83,27.4,127.57,71.52,171.54,120.15-121.84,349.51-
  367.26,349.51-465.07S481.16,156.79,361.01,34.94Zm34.55,580.97v-231.
  82c0-26.39,10.82-50.38,28.25-67.74,47.45,48.12,138.02,145.03,138.02,
  183.65s-90.57,135.54-138.02,183.66c-17.42-17.37-28.24-41.35-28.24-67
  .74Z"/>
</svg>

Favicon Fallback for SVG Icons

The “Can I use” website states 75% support for SVG icons. We can start from here. Nevertheless, for a crucial branding element like the favicon we need 100% browser support.

Therefore you can upload your SVG file to realfavicongenerator.net to create all possible favicon variants and then place the files in the root directory of your website. The generator also creates a code snippet to link all favicon variants in your header.

Note: The link to your previously created SVG favicon should come first, and then the fallback favicons from the generator. The favicon.ico shouldn't be referenced.

How Safari Handles Favicons

Safari takes a different way in handling favicons in dark and light mode. SVG-Icons are unfortunately not supported, therefore it's not possible to change the color through the CSS media query when visitors use dark mode. Safari solves the dark mode difficulty by automatically adding a white or black background if there is a low-contrast favicon.

Example WordPress: How to Add Dark Mode / Light Mode Favicon

Use a WordPress Plugin: SVG-Favicon

It is possible to add the SVG-Favicon through a plugin called SVG-Favicon if you don't know how to edit your child theme. You still have to update your SVG graphic as described previously and then upload it to your WordPress website through the plugin.

Add SVG-Favicon to Your Child Theme Manually

1. Add all favicon variants to your root directory via FTP: In my case those are the favicons from the generator
2. Update your functions.php to link all your favicon variants open your functions.php of your child theme and add the following function

function add_favicon()
{
  // dynamic light mode/dark mode svg favicon
  echo '<link rel="icon" href="/favicon.svg" type="image/svg+xml">';
  // as icon on the iPhone homescreen
  echo '<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">';
  // link icons for Android devices
  echo '<link rel="manifest" href="/site.webmanifest">';
  // fallback png icon
  echo '<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">';
  echo '<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">';
  // style of windows tiles
  echo '<meta name="msapplication-TileColor" content="#da532c">';
  // set color of url bar
  echo '<meta name="theme-color" content="#ffffff">';
  // second fallback favicon.ico located in root directory, but not linked here
}
add_action('wp_head', 'add_favicon');

3. Final Step: Remove your current favicon from WordPress: If you have already linked your favicon in WordPress you have to delete it so it does not overwrite the ones we just added. To do so go to Appearance → Customize → Site Identity (left column) → Site Icon, and click “Remove”

Different Favicon for Admin Dashboard and Login Screen

In WordPress, the html header for the admin dashboard and login is different from the html header which will be sent to your website visitors. This means the fallback favicon in your root directory will be displayed when you login to your website or are in the admin dashboard.

For me, that's more of a feature than a bug. My fallback favicon is one with an additional white background. Whenever I have two tabs up, one for the admin dashboard and one for the actual website visitors see, I can automatically distinguish those two.

You can add the following two lines to your functions.php to display a different (or the same) favicon on your login and admin dashboard:

add_action('login_head', 'add_favicon');
add_action('admin_head', 'add_favicon');

Happy coding in dark mode! 🌙