Dynamic Favicons

John Letey — Sat, 26 Sep 2020 17:04:15 +0000

Nowadays, most operating systems have both light and dark modes.
Most modern browsers respect this system theme and thus use different colours depending on which you are using.

In traditional websites, you normally have one favicon. However, this isn't always good. Take GitHub for example:

This has since been resolved!

Let's see how we can fix this ...

Design two different favicons for your site.
One for light mode, another for dark mode.

However, the question is, how do you set them 🤔

Let's start out with a basic HTML site:

<head>
  <title>Example</title>
</head>
<body>
  <h1>This is an example.</h1>
</body>

To add a favicon, you would normally just add the following line:

<head>
+ <link rel="icon" type="image/svg" href="/favicon.svg" />
  <title>Example</title>
</head>

For dynamic favicons, we will use favicon-switcher.
You'll only need to add the following lines of code to your site:

<head>
+ <link rel="icon" type="image/svg" media="(prefers-color-scheme:light)" href="/favicon_light.svg" />
+ <link rel="icon" type="image/svg" media="(prefers-color-scheme:dark)" href="/favicon_dark.svg" />
+ <script src="https://unpkg.com/favicon-switcher@latest/dist/index.js" crossorigin="anonymous" type="application/javascript"></script>
  <title>Example</title>
</head>

All done! Your site will now automatically switch between the favicons depending on the system theme.

Forem: John Letey

Dynamic Favicons