Favicons en 2025 : standards, formats et bonnes pratiques

En 2025, le favicon n'est plus un simple gadget graphique : c'est une composante essentielle de l'identité visuelle d'un site. Il apparaît dans l'onglet du navigateur, dans les favoris, les résultats de recherche Google. Ce guide s'adresse aux webmasters, développeurs frontend et créateurs de site qui souhaitent gérer leurs favicons de manière moderne, sans multiplier les formats de fichiers inutilement.

I. Évolution des favicons : du .ico au .svg

Les favicons ont longtemps été de simples fichiers favicon.ico placés à la racine du site. Ces petits carrés de 16x16 pixels s’affichaient dans les onglets des navigateurs et dans les favoris. Mais avec l’évolution du web, des écrans et des navigateurs, ce format unique a montré ses limites.

1. L’ère du .ico (1999–2015)

La fonctionnalité a été introduite par Internet Explorer 5, qui recherchait automatiquement la présence d’un fichier nommé favicon.ico à la racine du site. Bien que jamais formellement standardisée, cette pratique a été progressivement adoptée par l’ensemble des navigateurs graphiques. Le format .ico présentait certains avantages :

• Seul format reconnu par Internet Explorer et les premières versions de Firefox/Chrome.
• Peut contenir plusieurs tailles dans un seul fichier (16x16, 32x32, 48x48).
• Lecture implicite par les navigateurs (même sans balise <link>).

Mais il s’accompagnait aussi d’un certain nombre d’inconvénients :

• Format propriétaire Windows.
• Transparence limitée ou mal gérée selon les navigateurs.
• Poids élevé, peu compressible.
• Non vectoriel : flou sur les écrans Retina ou haute résolution.

2. L’ouverture aux formats modernes (2015–aujourd'hui)

À partir de 2015, avec le déclin progressif d’Internet Explorer et l’adoption croissante de Chrome, Firefox, et Safari, les navigateurs commencent à mieux gérer des formats plus modernes comme le .png et, plus tard, le .svg. Les développeurs web gagnent en flexibilité et peuvent enfin s’éloigner du format .ico sans perdre en compatibilité.

Le format .png s’est rapidement imposé grâce à ses nombreux avantages :

• Support natif par tous les navigateurs modernes (desktop et mobile).
• Transparence complète (canal alpha) pour des icônes propres et nettes.
• Compression plus efficace que le .ico.

Le format .svg, bien qu’adopté plus lentement, a ensuite trouvé sa place parmi les navigateurs récents :

• Format vectoriel, donc parfaitement net quelle que soit la résolution d’écran.
• Ultra léger, modifiable via CSS ou JavaScript.
• Supporté par Chrome, Firefox, Edge, et progressivement par Safari (avec quelques limitations sur iOS).

La pratique courante consiste à cumuler plusieurs balises <link rel="icon"> pour couvrir tous les cas d’usage et assurer une compatibilité maximale. Cela donne souvent lieu à des déclarations comme :

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">

Ou encore, une variante mixant .ico et .svg :

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">

Ces approches visent à anticiper les différences de comportement entre navigateurs, tout en préparant l'adoption des formats modernes.

Cette période marque une transition vers une gestion plus souple, plus légère et plus performante des favicons, en posant les bases des pratiques modernes que l’on applique encore en 2025.

II. Quels formats de favicons en 2025 ? Avantages et recommandations

En 2025, la gestion des favicons s’est considérablement simplifiée. Grâce à l’évolution des navigateurs modernes, il est désormais possible de se passer de formats anciens comme le .ico, au profit de formats plus adaptés aux besoins actuels : scalabilité, légèreté, compatibilité mobile et accessibilité.

1. Pourquoi ne plus utiliser .ico ?

Bien que toujours fonctionnel, le format .ico est aujourd’hui considéré comme obsolète pour la majorité des usages modernes.

Sauf contrainte legacy (anciens intranets, vieux navigateurs non mis à jour), il n’y a plus de raison d’inclure un fichier .ico dans un projet moderne.

2. Le format SVG : le choix moderne par excellence

Le format .svg est aujourd’hui le format privilégié pour les favicons modernes. Il offre un rendu net, quel que soit le niveau de zoom ou la résolution d’écran, et peut être stylisé via CSS.

• Scalable : s’adapte automatiquement à toutes les tailles sans perte de qualité.
• Léger : le poids d’un fichier .svg est souvent inférieur à celui d’un .png ou .ico équivalent.
• Compatible avec tous les navigateurs modernes (Chrome, Firefox, Edge, Android).

Attention toutefois : Safari, notamment sur iOS, ne prend pas encore totalement en charge les favicons en .svg dans certains contextes (écran d’accueil, partage, etc.). D’où l’intérêt d’un fallback.

3. Le fallback en .png 48×48 : la garantie de compatibilité

Pour assurer une prise en charge universelle, il est fortement recommandé de fournir un fallback en .png, en particulier une version carrée de 48x48 pixels. Cette taille est reconnue par la plupart des navigateurs comme valeur par défaut, et elle correspond aussi aux exigences de Google pour l'affichage du favicon dans les résultats de recherche.

• Supporté par Safari, iOS et les moteurs de recherche comme Google.
• Permet d’avoir une image nette même dans les contextes où le SVG est ignoré.
• Suffisamment grand pour être redimensionné à la volée en 16x16 ou 32x32 par les navigateurs.

Le PNG est donc un complément indispensable au SVG pour couvrir tous les cas d’usage sans surcharger le projet.

Pour iOS, les fichiers .png sont également utilisés pour les icônes de l'écran d'accueil via les balises <link rel="apple-touch-icon">. Même s’il ne s’agit pas de favicons à proprement parler, ils sont souvent confondus, d’où l’importance d’une icône bien conçue et bien dimensionnée.

Affichage du favicon dans les résultats de recherche Google

Le format .png est également essentiel pour répondre aux exigences de Google en matière d’affichage du favicon dans les résultats de recherche, notamment sur mobile. Google recommande un favicon d’au moins 48x48 pixels, au format carré, lisible à petite taille, et hébergé sur le même domaine que la page indexée. Le fichier doit être correctement déclaré via la balise <link rel="icon"> dans l’en-tête du document HTML.
Bien que Google accepte aussi les formats .ico et .svg, un .png de bonne qualité garantit un affichage cohérent et évite tout fallback visuel non désiré.
Source: Documentation officielle Google Search

III. La méthode bulletproof 2025

1. Code HTML

En 2025, vous n'avez plus besoin de favicon.ico. Une icône en SVG pour les navigateurs modernes, accompagnée d'un fallback en PNG 48x48, couvre 99,9 % des usages. Simple, moderne et efficace :

<!-- Favicon principal pour navigateurs modernes -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Fallback PNG pour compatibilité maximale -->
<link rel="icon" href="/favicon-48.png" sizes="48x48" type="image/png">

• rel="icon" : déclare l'icône par défaut
• type="image/svg+xml" : indique le format SVG (prioritaire)
• sizes="48x48" : précise la taille réelle de l'image PNG pour les navigateurs qui l'exploitent

2. Compatibilité des navigateurs

3. Bonnes pratiques & erreurs à éviter

Bonnes pratiques :

• Fournir un SVG bien optimisé (icône carrée, contrastée)
• Tester sur plusieurs plateformes

À éviter :

• Multiplier les tailles inutiles (16x16, 32x32, etc.)
• Utiliser un SVG illisible (trop fin, trop détaillé)
• Oublier d’inclure le type dans la balise <link>

4. Bonus : Favicon en mode sombre

En 2025, de nombreux systèmes d’exploitation et navigateurs prennent en charge le mode sombre, et les sites web suivent cette tendance en adaptant leur interface. Mais peu de développeurs pensent à adapter aussi leur favicon. Or, il est tout à fait possible de proposer une variante spécifique pour les utilisateurs ayant activé le thème sombre.

Pour cela, on utilise l’attribut media="(prefers-color-scheme: dark)" dans une balise <link rel="icon"> pointant vers une version alternative du favicon.

<link rel="icon" href="/favicon-dark.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)">

Cette approche permet d’offrir une expérience plus cohérente et élégante, notamment si votre favicon clair devient illisible sur fond sombre. Il suffit de créer une version visuellement adaptée (souvent avec un fond clair ou un tracé inversé) et de la déclarer en complément de l’icône par défaut.

Note : veillez à ne pas surcharger le nombre de favicons déclarés, privilégiez toujours la clarté, et testez le comportement dans différents navigateurs pour vérifier que le bon favicon est bien affiché selon le thème actif.

IV. Conclusion

Le favicon, souvent négligé à tort, reste en 2025 un élément-clé de l'identité visuelle d’un site. Il contribue à sa reconnaissance immédiate dans les onglets, les favoris, et même les résultats de recherche Google. Grâce aux progrès des navigateurs modernes, il n’est plus nécessaire de multiplier les formats et tailles comme autrefois.

Une simple combinaison .svg pour la scalabilité et .png 48×48 en fallback suffit désormais à couvrir la quasi-totalité des usages, tout en allégeant le code et la maintenance.

En adoptant cette approche minimaliste et fiable, vous garantissez un rendu propre, cohérent et moderne à votre site, sans vous enfermer dans des pratiques héritées d'une époque révolue.

Dans le prochain article, nous explorerons en détail les Touch Icons pour iOS, les icônes adaptatives pour Android, et la configuration du fichier manifest.json pour les Progressive Web Apps. Vous y découvrirez les formats recommandés, les dimensions adaptées aux écrans d’accueil, et les bonnes pratiques pour offrir une expérience mobile soignée et cohérente.

Lire la suite : Icônes Web en 2025 : Touch Icons, Adaptive Icons & manifest.json