Favicons SVG : quand en utiliser un, et l'ICO dont vous avez encore besoin
Un seul SVG peut être votre favicon le plus net sur les navigateurs modernes, et il peut basculer en mode sombre depuis un unique fichier. Il ne peut simplement pas être votre seule icône, alors voici où il s'intègre et ce qu'il laisse au .ico et aux PNG.
Ce qu'un favicon SVG fait bien
Un favicon est dessiné à des tailles très différentes selon les surfaces, et un seul SVG les couvre toutes depuis un unique fichier. Il reste net sur n'importe quel écran car il est vectoriel, pas une grille fixe de pixels, donc pas d'agrandissement flou ni d'exports 16, 32 et 48 pixels distincts à garder synchronisés.
Il a un tour de plus qu'une icône raster ne peut égaler : une media query prefers-color-scheme à l'intérieur du SVG permet au même fichier de se recoloriser quand le système d'exploitation passe en mode sombre, si bien que la marque reste lisible contre une barre d'onglets sombre sans livrer une seconde image.
Le référencer, avec les fallbacks
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Un navigateur qui comprend le SVG préfère la première ligne. Tout le reste est là pour les surfaces qui ne le comprennent pas.
Où le SVG fonctionne, et où il ne fonctionne pas
| Surface | Utilise le SVG ? |
|---|---|
| Onglets des navigateurs modernes | Oui, et c'est là qu'il rend le mieux |
| Navigateurs plus anciens | Non, ils se rabattent sur le .ico ou un PNG |
| Le chemin /favicon.ico | Non, cette requête a besoin d'un vrai .ico |
| Écran d'accueil iOS | Non, il utilise l'apple-touch-icon PNG |
| Installation Android et PWA | Non, elle lit des icônes PNG depuis le manifest |
Faire en sorte que le SVG s'adapte au mode sombre
Placez une media query prefers-color-scheme dans les styles propres du SVG et laissez-le changer ses couleurs de remplissage quand le thème de l'OS change. Un seul fichier se lit alors correctement sur l'interface claire comme sombre du navigateur, ce qui est la façon la plus élégante de gérer un favicon adaptatif au thème.
Si vous préférez ne pas maintenir la media query, une seule marque en teinte intermédiaire, avec assez de contraste pour survivre sur n'importe quel fond, est une voie plus simple vers le même objectif.
Questions fréquentes
Devrais-je utiliser un favicon SVG ?
Pour l'onglet du navigateur, oui : c'est un seul fichier, il s'adapte parfaitement et peut s'adapter au mode sombre. Associez-le simplement à un favicon.ico et à des app icons PNG pour que les surfaces qui ne lisent pas le SVG restent couvertes.
Tous les navigateurs prennent-ils en charge les favicons SVG ?
La plupart des navigateurs modernes oui, mais pas tous, et aucune surface d'écran d'accueil n'en utilise. C'est pourquoi vous gardez un .ico et des PNG comme fallbacks plutôt que de compter sur le SVG seul.
Ai-je encore besoin de favicon.ico si j'ai un SVG ?
Oui. Les navigateurs, les robots d'exploration et les lecteurs de flux demandent toujours /favicon.ico par le chemin, et cette requête ne peut pas être satisfaite avec un SVG. Gardez un vrai .ico à la racine du site.
Un favicon SVG peut-il gérer le mode sombre ?
Oui, c'est l'un de ses atouts. Une media query prefers-color-scheme à l'intérieur du SVG le recolorise quand l'OS change de thème, si bien qu'un seul fichier fonctionne sur l'interface claire comme sombre du navigateur.