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 ?
No explanation generated yet.