Favicon SVG : prise en charge, mode sombre et solutions de repli
Un favicon SVG est une icône vectorielle référencée par une balise link de type image/svg+xml, de sorte qu'un seul fichier s'affiche nettement à n'importe quelle taille au lieu d'un PNG par taille. Comme c'est un document, il peut porter une media query prefers-color-scheme et se dessiner différemment en mode sombre. La prise en charge n'est pas universelle : Chrome, Edge et Firefox actuels l'affichent, tandis que Safari ne l'utilise pas pour l'icône d'onglet, alors gardez un repli PNG ou ICO à côté.
Un seul fichier au lieu d'un ensemble
Un favicon matriciel est une décision de taille prise au moment de l'export. Un SVG ne l'est pas : le navigateur le rastérise à la taille dont la surface a besoin, donc un onglet à 16 pixels et une barre de favoris à 32 obtiennent le même résultat net à partir d'un seul fichier, généralement plus léger qu'un unique PNG.
Le piège est que la prise en charge est inégale, et un favicon SVG ne remplace pas le reste de l'ensemble d'icônes. Les surfaces d'application installée sur Android et iOS veulent toujours des PNG, et Safari a toujours besoin du chemin matriciel pour son icône d'onglet. Traitez le SVG comme une amélioration superposée à une configuration PNG et ICO fonctionnelle.
Où fonctionne un favicon SVG
| Surface | Comportement |
|---|---|
| Onglet Chrome / Edge | Affiche le SVG |
| Onglet Firefox | Affiche le SVG |
| Onglet Safari | Ne l'utilise pas ; se rabat sur votre PNG ou ICO |
| Écran d'accueil iOS | Utilise le PNG apple-touch-icon, jamais le SVG |
| Installation Android / PWA | Utilise les PNG du manifeste d'application web |
Les balises d'en-tête
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">Les navigateurs qui comprennent image/svg+xml prennent le SVG ; les autres se rabattent sur l'ICO. Aucun sniffing du user-agent nécessaire.
Un favicon qui suit le mode sombre
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #111111 }
@media (prefers-color-scheme: dark) {
path { fill: #ffffff }
}
</style>
<path d="M20 80 L50 20 L80 80 Z" />
</svg>Les styles doivent être à l'intérieur du SVG. Une feuille de style externe n'est pas chargée pour un favicon. Les navigateurs qui prennent en charge les favicons SVG respectent généralement ceci ; ceux qui ne le font pas utilisent simplement le repli matriciel.
FAQ sur le favicon SVG
Un favicon SVG peut-il remplacer favicon.ico ?
Pas entièrement. Tout ce qui demande /favicon.ico par chemin (et tout ce qui n'affiche pas les favicons SVG) a besoin du fichier matriciel. Le SVG est un ajout, pas un remplacement.
Pourquoi mon favicon SVG n'apparaît-il pas dans Safari ?
Safari n'utilise pas le SVG pour l'icône d'onglet à l'heure actuelle. Il se rabat sur l'icône matricielle que vous avez déclarée, donc la solution est de s'assurer que ce repli existe et a bonne allure.
rel="mask-icon" est-il la même chose ?
Non. mask-icon est une fonctionnalité distincte de Safari qui prend un SVG monochrome plat et le teinte pour les onglets épinglés. Elle ignore les couleurs de votre fichier et n'affecte pas l'icône d'onglet normale.