Favicon (.ico) vs SVG

SVG est un format vectoriel, ce qui signifie qu'un seul favicon SVG s'affiche à n'importe quelle densité de pixels sans dégradation. Sur un écran 1x, le rendu est de 16 × 16 pixels ; sur un écran Retina 3x, le rendu est de 48 × 48 pixels physiques à partir du même fichier. Aucun bundle ICO avec 4 images raster spécifiques à la taille ne peut égaler cette gestion automatique de la densité. SVG est le format idéal pour les écrans modernes à haute résolution.

Le format .ico reste la référence universelle. Tous les navigateurs de bureau, navigateurs mobiles, systèmes d'exploitation et outils tiers traitant des icônes Web prennent en charge favicon.ico depuis la fin des années 1990. Beaucoup de ces environnements ne vérifient pas du tout les balises de lien HTML : ils essaient simplement de récupérer /favicon.ico à partir de la racine du domaine, par convention. La suppression de .ico de votre configuration supprime instantanément les favicons pour un segment significatif d'utilisateurs et d'outils.

La prise en charge du mode sombre est la fonctionnalité phare des favicons SVG. Un fichier SVG peut intégrer un bloc `<style>` avec une requête `@media (prefers-color-scheme: dark)`. Lorsque le navigateur est en mode sombre, la requête s'active et peut modifier la couleur de remplissage, de contour ou d'arrière-plan de l'icône. C'est impossible avec .ico ou PNG — ces formats sont des rasters statiques sans conscience environnementale.

La prise en charge par les navigateurs des favicons SVG a considérablement évolué. Chrome 80+ (publié en 2020), Edge 80+, Firefox 41+ et Safari 15+ (publié en 2021) prennent tous en charge `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`. Depuis 2026, la grande majorité des installations de navigateurs actifs prennent en charge les favicons SVG. L’exception notable concerne les anciens Safari (avant 15) sur les anciens appareils iOS – ceux-ci reviennent automatiquement à .ico.

La taille du fichier est un autre avantage du SVG. Un favicon SVG monochrome propre pour une marque simple fait généralement moins de 1 Ko. Un fichier .ico regroupant des images raster de 16, 32, 48 et 64 px de bonne qualité fait généralement entre 10 et 25 Ko. Pour les sites ayant des exigences de temps de chargement très rapides, l'envoi d'un favicon SVG au lieu d'un ensemble PNG autonome réduit considérablement la charge utile du favicon, bien que l'un ou l'autre format soit mis en cache après le premier chargement.

La syntaxe de liaison des favicon SVG est légèrement différente de celle de .ico. Vous avez besoin d'un attribut de type explicite : `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`. Sans l'attribut type, certains navigateurs ne reconnaissent pas le fichier comme un favicon. Associez-le d'abord à la balise de lien de secours .ico : `<link rel='icon' href='/favicon.ico'>`. Les navigateurs qui comprennent les favicons SVG préfèrent la balise SVG plus spécifique ; d'autres passent au .ico.

L'optimisation SVG vaut la peine d'être effectuée avant de déployer un favicon. Les outils de conception exportent SVG avec des métadonnées d'éditeur, des commentaires, des chemins invisibles et des attributs redondants qui ajoutent des octets sans aucune contribution visuelle. L'exécution de votre SVG via le SVG optimizer peut réduire la taille du fichier de 50 à 80 % tout en gardant l'icône visuellement identique. Les SVG plus petits analysent également plus rapidement, ce qui est important sur les connexions plus lentes.

Le format .ico gère l'intégration du système d'exploitation Windows, ce que SVG ne peut pas. Les raccourcis sur le bureau créés à partir des onglets du navigateur, des épingles de la barre des tâches et des icônes de l'explorateur de fichiers Windows lisent tous /favicon.ico. SVG n'est pas un format d'icône Windows reconnu dans ces contextes. Même les utilisateurs qui voient principalement le favicon SVG dans les onglets de leur navigateur verront la version .ico lorsqu'ils créeront un raccourci Windows vers votre site.

L'animation d'un favicon est possible avec SVG en utilisant des éléments `<animate>` ou des animations SMIL à l'intérieur du fichier SVG. Un favicon SVG animé peut pulser, tourner ou changer de couleur. La prise en charge par le navigateur de l'animation SVG dans les favicons est limitée (Chrome et Edge la prennent en charge ; Firefox et Safari ne le font pas), mais il s'agit d'une option créative pour les applications Web qui souhaitent afficher les changements d'état (par exemple, les indicateurs de chargement, les nouveaux points de notification) via le favicon.

Les favicons SVG prennent en charge les modes de couleur avancés au-delà de la simple commutation sombre/lumière. Vous pouvez utiliser les propriétés personnalisées CSS dans SVG, répondre aux requêtes multimédias `forced-colors` pour le mode à contraste élevé et utiliser plusieurs points d'arrêt de schéma de couleurs. Ce niveau de thématique est impossible avec les formats raster et fait du SVG le meilleur choix pour les systèmes de conception axés sur l'accessibilité.

La limitation pratique de SVG en production est que vous avez toujours besoin d’une solution de secours autre que SVG. L'approche la plus simple consiste à conserver le SVG comme icône principale et à générer le .ico et le apple-touch-icon PNG à partir de la même source SVG. Le favicon generator accepte SVG comme format source et produit les sorties .ico et PNG à partir des données vectorielles — aucune perte de qualité due à la rastérisation.

Pour les cartes de partage sur les réseaux sociaux, les images OG et le déploiement de liens, le format source du favicon n'est pas pertinent : les plateformes sociales récupèrent le favicon de votre HTML ou /favicon.ico et le convertissent en interne. Que votre favicon soit .ico, PNG ou SVG, la carte de lien déployée affichera l'icône indépendamment. Concentrez-vous sur la qualité du contenu des icônes plutôt que sur le format des scénarios de partage social.

La mise en œuvre de la configuration ico+SVG recommandée implique uniquement trois balises de lien : `.ico` fallback, `image/svg+xml` SVG et `apple-touch-icon` PNG. Les navigateurs les lisent par ordre de spécificité – le format le plus spécifique en premier – et choisissent le premier qu’ils prennent en charge. Cette approche d'amélioration progressive signifie que chaque utilisateur obtient le meilleur favicon que son navigateur puisse gérer. Voir le best favicon format guide pour la matrice de décision complète.