Favicons en mode sombre : en créer un qui s'adapte
Une marque bleu marine disparaît sur une barre d'onglets sombre. Vous pouvez régler ça avec un seul SVG, ou avec deux PNG, mais vous gardez toujours une icône par défaut en dessous.
Ce que le mode sombre change réellement
La barre d'onglets du navigateur est claire en mode clair et sombre en mode sombre. Votre favicon ne change pas avec elle à moins que vous ne le fassiez changer. Une marque nette sur du blanc peut disparaître sur un onglet quasi noir, et l'inverse vaut pour une marque claire sur un chrome clair.
Vous avez deux façons de réagir. Publier un seul SVG qui se recolore, ou publier deux PNG et laisser le navigateur choisir selon le réglage du système. La voie du SVG, c'est un fichier et une requête. La voie du PNG fonctionne sur plus de clients, mais la prise en charge des favicons permutés par media est inégale, donc elle s'appuie plus souvent sur le fallback.
Méthode A : un SVG qui se retourne tout seul
Un favicon SVG peut embarquer son propre CSS. Placez une media query prefers-color-scheme: dark à l'intérieur du SVG et changez-y le fill. Le navigateur lit le réglage du système et repeint l'icône sans second fichier ni balise link supplémentaire.
C'est la méthode à privilégier en premier. C'est un seul fichier, ça reste net à toutes les tailles, et c'est la seule approche où une unique ressource couvre les deux thèmes.
Le SVG, avec les fallbacks
<!-- In your <head>: SVG first, then the raster fallback -->
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- icon.svg, with the theme rule baked in -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
path { fill: #f5f5f5; }
}
</style>
<path d="M6 6h20v20H6z" />
</svg>Un navigateur qui lit le SVG utilise la première ligne et respecte la media query. Tout le reste se rabat sur favicon.ico.
Méthode B : deux PNG sur des balises link à portée media
Si vous ne pouvez pas utiliser le SVG, exportez deux PNG (disons une version sombre-sur-clair et une version claire-sur-sombre) et indiquez chacun avec un attribut media sur sa balise link. Le navigateur charge celui qui correspond au thème actuel.
La prise en charge est irrégulière. Certains navigateurs ignorent l'attribut media sur les liens d'icône et prennent simplement le premier qu'ils comprennent. C'est pourquoi la dernière ligne compte : un favicon.ico simple sans condition media est la valeur par défaut sur laquelle tout client peut se rabattre.
La configuration à deux PNG
<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: light)">
<link rel="icon" href="/favicon.ico" sizes="any">Gardez le favicon.ico inconditionnel en dernier, pour qu'un navigateur qui ignore les indications media ait quand même une icône.
La voie paresseuse qui marche à tous les coups
Si rien de tout cela ne vaut l'effort, utilisez une seule marque de teinte moyenne. Une couleur au contraste suffisant pour rester lisible aussi bien sur un chrome clair que sombre (une couleur de marque saturée, ni quasi noire ni quasi blanche) est lisible dans les deux thèmes à partir d'un seul fichier.
C'est le choix par défaut pragmatique. Vous perdez la correspondance parfaite avec chaque thème, mais vous gagnez une ressource qui ne disparaît jamais et aucune condition media à se tromper.
Questions fréquentes
Comment faire qu'un favicon change en mode sombre ?
Utilisez un favicon SVG avec une media query prefers-color-scheme: dark dans ses styles qui change la couleur du fill, ou publiez deux PNG sur des balises link à portée media. Gardez un favicon.ico simple comme valeur par défaut dans les deux cas.
Les favicons en mode sombre fonctionnent-ils dans tous les navigateurs ?
Les favicons SVG avec une media query interne sont bien pris en charge sur les navigateurs modernes. Les favicons PNG permutés par media sont moins fiables, alors incluez toujours une icône de fallback inconditionnelle.
Puis-je ignorer le mode sombre et utiliser un seul favicon ?
Oui. Choisissez une marque de teinte moyenne au contraste suffisant pour rester lisible aussi bien sur des onglets clairs que sombres. C'est un seul fichier et il ne disparaît jamais sur aucun des deux thèmes.
Le favicon.ico doit-il changer en mode sombre ?
Non. Le favicon.ico est votre fallback par défaut pour les clients et crawlers plus anciens. Laissez-le comme une seule version lisible et gérez la permutation de thème avec les liens SVG ou PNG placés au-dessus.