Formats de favicon expliqués : ICO, PNG, SVG et ce dont les navigateurs ont besoin

Pourquoi les favicons restent étonnamment compliquées

Une favicon ressemble à une petite image unique, mais elle se situe au croisement de l’interface du navigateur, des favoris, des onglets, des raccourcis épinglés, des résultats de recherche, des écrans d’accueil mobiles et des installations d’applications web progressives. Chaque contexte a des attentes légèrement différentes.

C’est pourquoi les conseils sur les favicons semblent souvent confus. Certaines équipes ne fournissent qu’un seul favicon.ico, parce que cela suffisait autrefois. D’autres génèrent une douzaine de fichiers sans savoir lesquels sont réellement utilisés. Le juste milieu est plus réduit : comprendre ce que ICO, PNG et SVG font chacun de mieux, puis fournir un ensemble compact qui couvre les navigateurs actuels et les contextes d’appareils courants.

Les favicons ne sont pas l’endroit où démontrer la sophistication d’un pipeline d’images. Elles sont l’endroit où il faut être sobre, explicite et compatible.

ICO : l’ancien format qui refuse de disparaître

ICO est le conteneur classique d’icônes Windows. Il peut contenir plusieurs images bitmap à différentes tailles, couramment 16×16, 32×32 et 48×48 pixels. C’est important, car une favicon peut être rendue en très petit dans un onglet de navigateur, en plus grand dans une liste de favoris, et différemment encore sur des raccourcis Windows.

Le détail important est qu’ICO est un conteneur, pas simplement une image. Un bon favicon.ico contient généralement plusieurs tailles raster afin que le navigateur ou le système d’exploitation puisse choisir la correspondance la plus proche au lieu de redimensionner un minuscule bitmap unique.

ICO reste utile pour trois raisons :

• Les navigateurs peuvent demander /favicon.ico automatiquement, même si vous ne le liez pas dans votre HTML.
• Certains navigateurs et intégrations plus anciens s’y attendent.
• C’est une solution de repli sûre lorsque les déclarations d’icônes plus récentes sont ignorées.

Cela ne signifie pas qu’ICO devrait être votre seule icône. Il est peu pratique à modifier, pas particulièrement adapté aux workflows modernes, et médiocre comme source de vérité pour une marque. Traitez-le comme la solution de repli de compatibilité.

En pratique, placez un vrai /favicon.ico à la racine du site. Ne servez pas une 404 à cet endroit, sauf si vous aimez les journaux bruyants et les nouvelles tentatives inutiles des navigateurs.

PNG : le cheval de trait fiable

PNG reste le format raster le plus prévisible pour les favicons et les icônes tactiles. Il prend en charge la transparence, il est largement supporté, et il se comporte de manière cohérente entre les navigateurs et les plateformes.

Pour les favicons, PNG est utile lorsque vous voulez des icônes à taille de pixels explicite, comme 32×32 ou 48×48. Pour les icônes d’écran d’accueil mobile, PNG est effectivement obligatoire dans certains environnements. Les Apple touch icons, par exemple, reposent sur PNG dans un usage normal en production.

Quelques règles pratiques aident :

• Exportez depuis une source vectorielle, pas depuis un bitmap déjà petit.
• Rendez l’icône lisible à 16×16 avant de vous préoccuper des tailles plus grandes.
• Ajoutez suffisamment de marge intérieure pour que la marque ne paraisse pas rognée dans les contextes arrondis ou masqués.
• Évitez les textes fins, les lignes minces et les illustrations détaillées.

La compression PNG ne vaut généralement pas la peine qu’on s’y attarde pour les favicons, car les fichiers sont minuscules. Cela dit, ne livrez pas une icône tactile de 500 KB simplement parce qu’elle sort directement d’un export de design. Si vous examinez déjà des choix d’images plus larges, la même réflexion disciplinée que pour les décisions de formats d’image sur le web moderne s’applique ici aussi : choisissez le format adapté au travail, pas celui qui est à la mode.

SVG : l’option moderne et flexible

Les favicons SVG sont séduisantes parce qu’elles sont indépendantes de la résolution. Un seul petit fichier peut s’afficher nettement à de nombreuses tailles, et il peut être modifié directement dans le code ou exporté depuis un logiciel de design.

Les versions modernes de Chromium, Firefox et Safari prennent en charge les favicons SVG. Cela fait de SVG un bon format principal de favicon pour de nombreux sites, en particulier lorsque l’icône est un logo simple, un glyphe ou une marque géométrique.

Mais les favicons SVG ont des réserves.

Premièrement, le SVG doit être autonome. Ne dépendez pas de polices externes, d’images distantes ou de scripts. Les navigateurs appliquent des restrictions aux SVG utilisés comme images, et même lorsque quelque chose fonctionne dans un navigateur, cela peut échouer dans un autre.

Deuxièmement, gardez-le visuellement simple. SVG ne résout pas magiquement le problème des 16 pixels. Une illustration vectorielle détaillée reste floue lorsqu’elle est compressée dans un onglet.

Troisièmement, soyez prudent avec le style dynamique. Certaines équipes utilisent prefers-color-scheme dans une favicon SVG afin que l’icône s’adapte aux thèmes clairs et sombres du navigateur. Cela peut fonctionner, mais le comportement des navigateurs et la mise en cache peuvent être irréguliers. Si la reconnaissance de marque compte, une seule icône robuste vaut souvent mieux qu’une icône adaptative ingénieuse.

SVG est une bonne source et un bon format moderne de livraison. Ce n’est pas une raison pour ignorer les fichiers de repli.

Ce que les navigateurs recherchent réellement

Les navigateurs découvrent les favicons de deux façons principales : les liens HTML explicites et les requêtes implicites à la racine.

Le comportement implicite est l’ancien : si le navigateur veut une icône et n’en a pas trouvé, il peut demander /favicon.ico. C’est pourquoi le fichier ICO à la racine reste utile même sur les sites modernes.

Le comportement explicite utilise des éléments <link> dans l’en-tête du document. Une configuration moderne compacte ressemble à ceci :

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Le manifeste peut ensuite pointer vers des icônes PNG plus grandes utilisées pour les applications web installables :

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Ce n’est pas la seule configuration valide, mais c’est une bonne base. Elle donne aux navigateurs modernes un SVG, fournit une solution de repli ICO conventionnelle, couvre les enregistrements sur l’écran d’accueil iOS, et prend en charge les contextes d’installation d’applications.

L’ensemble de favicons que la plupart des sites devraient fournir

Pour un site marketing classique, un site de documentation, une application SaaS ou une publication, cet ensemble suffit :

• /favicon.ico contenant 16×16 et 32×32, éventuellement 48×48.
• /icon.svg comme favicon moderne et redimensionnable.
• /apple-touch-icon.png en 180×180.
• /icon-192.png et /icon-512.png si vous avez un manifeste d’application web.

Vous pouvez ajouter davantage de tailles si une plateforme a une exigence spécifique, mais ne générez pas dix fichiers par habitude. Chaque fichier supplémentaire est une chose de plus à mettre en cache, à oublier, à mal nommer ou à laisser obsolète après un changement de marque.

Si votre site n’est pas installable et n’a pas de manifeste, vous n’avez peut-être pas besoin des icônes de 192 et 512 pixels. Si votre site se comporte comme une application, vous en avez probablement besoin.

Modes de défaillance courants

Les bugs de favicon les plus courants ne sont pas artistiques. Ce sont des problèmes de livraison.

L’un d’eux est la mise en cache agressive. Les navigateurs conservent les favicons avec obstination. Pendant les tests, une icône modifiée peut ne pas apparaître tant que vous n’avez pas effectué un rafraîchissement forcé, effacé les données du site, utilisé un nouveau nom de fichier ou testé dans un profil neuf. Pour les changements de marque en production, modifier /icon.svg?v=2 peut aider dans le HTML, mais le /favicon.ico à la racine est plus difficile, car les navigateurs le demandent directement. Remplacer le fichier et attendre l’expiration des caches fait souvent partie du travail.

Un autre problème courant est le mauvais type MIME. SVG doit être servi en image/svg+xml, PNG en image/png, et ICO couramment en image/x-icon ou image/vnd.microsoft.icon. Beaucoup de navigateurs sont indulgents, mais pas tous les contextes. Si quelque chose échoue seulement dans un navigateur, inspectez la réponse réseau avant de redessiner l’icône. Les mêmes habitudes que pour le débogage des redirections et des en-têtes HTTP en production s’appliquent ici : regardez la réponse réelle, pas ce que le CMS affirme servir.

Un troisième problème est la densité du design. Les logos qui fonctionnent très bien dans l’en-tête d’un site échouent souvent comme favicons. L’icône d’onglet est un test brutal. Supprimez les mots, simplifiez les formes, augmentez le contraste, et testez aux tailles réelles. Si l’icône est un contenu significatif dans la page, alors les questions d’accessibilité comme le texte alternatif comptent ; pour la favicon elle-même, il s’agit d’un élément décoratif de l’interface du navigateur, pas d’un contenu de page. Pour cette distinction, consultez notre guide pragmatique du texte alternatif d’image.

<!-- tool-cta:start -->

💡 Essayez ceci: Générez en une seule fois les variantes ICO, PNG et SVG attendues par les navigateurs modernes avec Ultimate Favicon Generator.

<!-- tool-cta:end -->

Une checklist de mise en œuvre simple

Utilisez cette checklist avant la mise en ligne :

1. Partez d’un master vectoriel propre.
2. Testez la marque en 16×16 et 32×32.
3. Exportez une favicon SVG autonome.
4. Générez une solution de repli ICO multi-tailles.
5. Exportez une icône Apple touch en 180×180.
6. Ajoutez des PNG en 192×192 et 512×512 si vous utilisez un manifeste.
7. Placez /favicon.ico à la racine du site.
8. Vérifiez les codes de statut, les types MIME et les en-têtes de cache.
9. Testez dans au moins un navigateur Chromium, Firefox et Safari si votre audience inclut des appareils Apple.

Les favicons sont petites, mais elles sont aussi très visibles. Une favicon cassée donne à un site une impression d’inachevé. Une favicon bien faite disparaît dans l’interface, ce qui est exactement le but.