Favicon avec thème clair/sombre

Tout le monde n’utilise pas son OS ou son navigateur en thème sombre, tout le monde n’a pas son côté gothique twighlight.

Cependant, des fois, le favicon de notre site Web se marie mal avec un thème light ou un thème dark (voire les 2, mais là, je ne peux rien faire).

L’idée est de d’avoir un favicon dédié mode sombre et un dédié mode clair et d’utiliser celui qui est en phase avec le thème utilisé par notre internaute.

Ce se fait avec l’attribut média de la balise link :

  <link rel="icon" type="image/png" href="/favicon-light.png" media="(prefers-color-scheme:light)">
  <link rel="icon" type="image/png" href="/favicon-dark.png" media="(prefers-color-scheme:dark)">
  <link rel="icon" type="image/png" href="/favicon-light.png" media="(prefers-color-scheme:no-preference)">

C’est aussi simple que ça.

Pour générer des favicons, vous avez l'embarras du choix :

• https://realfavicongenerator.net/
• https://favicon.io/
• https://www.favicon-generator.org/
• https://www.favicon.cc/