Favicon Link for Dark and Light Mode

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

Using the media attribute in your <link> tag, you can now specify a specific favicon to be displayed when a user is in dark mode or in light mode.

If the browser is in dark mode, you can specify that icon with the following tag:

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">

When you want to serve a different favicon for light mode you can use this tag:

<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

Oh yeah! Favicon color schemes ?

BETA Snippet explanation automatically generated by OpenAI:

No explanation generated yet.

Snippet By Tony Lea

·

Created June 13th, 2021

·

Report Snippet