Favicons en mode sombre (prefers-color-scheme)
Un favicon en mode sombre change selon le réglage clair ou sombre du système d'exploitation afin de rester lisible sur une interface de navigateur sombre ou claire. Deux approches fonctionnent : un favicon SVG contenant une media query prefers-color-scheme qui se recolore, ou deux fichiers PNG déclarés avec media="(prefers-color-scheme: dark)" sur leurs balises link. Une seule icône en demi-teinte qui se lit sur les deux est l'alternative la plus simple.
Deux façons de le faire réagir
L'approche la plus propre est un favicon SVG avec une media query prefers-color-scheme dans ses propres styles, pour que le fichier unique se recolore quand le système passe en sombre. Les navigateurs qui affichent les favicons SVG et respectent la media query (dont Safari et Firefox) prennent le changement en compte sans balise supplémentaire.
L'alternative est deux fichiers matriciels : une icône normale et une optimisée pour le sombre, chacune sur une balise link portant un attribut media. La prise en charge de la permutation des favicons PNG par media est moins cohérente que la voie SVG, alors gardez toujours une icône par défaut qui tient seule.
L'approche à deux fichiers
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)" />
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)" />
<link rel="icon" href="/favicon.ico" sizes="any" />Le simple favicon.ico est le repli pour tout ce qui ignore l'attribut media.
FAQ sur le favicon en mode sombre
Comment créer un favicon en mode sombre ?
Soit vous placez une media query prefers-color-scheme à l'intérieur d'un favicon SVG pour qu'il se recolore, soit vous déclarez deux PNG avec media="(prefers-color-scheme: dark)" et light sur leurs balises link. Gardez un simple favicon.ico comme repli.
L'attribut media sur les favicons fonctionne-t-il partout ?
Non. La prise en charge de la permutation des favicons par prefers-color-scheme est inégale d'un navigateur à l'autre, c'est pourquoi vous gardez toujours une icône par défaut qui fonctionne quel que soit le thème.
Media query SVG ou deux PNG ?
La voie SVG, c'est un seul fichier et une prise en charge généralement meilleure pour le changement de thème. Deux PNG donnent un contrôle au pixel près par thème mais reposent sur une gestion moins cohérente de l'attribut media.