Tailles et formats de favicon réellement utiles

Pourquoi cela reste compliqué

Le favicon a l’une des histoires les plus longues et compliquées des ressources Web. Il est apparu en 1999 comme un fichier .ico unique de 16×16 qu’Internet Explorer cherchait à /favicon.ico, sans balise HTML nécessaire. Chaque plateforme apparue ensuite — icônes d’écran d’accueil iOS, icônes adaptatives Android, tuiles Windows, manifestes PWA — a ajouté sa convention sans remplacer l’ancienne, car casser le comportement initial aurait cassé tous les sites existants. La spécification n’a donc jamais été simplifiée, seulement étendue. La plupart des listes de tailles circulant sur le Web proviennent d’une époque où davantage de ces extensions étaient réellement utiles.

Les navigateurs modernes gèrent également beaucoup mieux ce que vous leur fournissez. Chrome, Firefox et Safari peuvent tous utiliser une seule icône vectorielle et produire sa petite version pour l’onglet. La longue liste de fichiers est une précaution pour les systèmes anciens, pas une exigence actuelle ; un site classique peut en ignorer la plupart sans risque.

L’ensemble couvrant réellement les usages

En pratique, trois fichiers couvrent l’immense majorité des navigateurs et appareils :

• favicon.ico, contenant une image 32×32 — reste la solution de secours que chaque navigateur vérifie par défaut à la racine du site, même sans <link> balise présente. Le conteneur .ico peut techniquement contenir plusieurs résolutions, mais une seule image de 32px suffit à l’usage actuel des navigateurs.
• PNG 180×180 comme apple-touch-icon — ce qu’iOS utilise lorsqu’un utilisateur ajoute votre site à son écran d’accueil. iOS ne lit pas du tout favicon.ico pour cela ; sans ce fichier, il fait une capture de la page, nettement moins belle comme icône d’accueil.
• Un favicon SVG — s’adapte proprement à toute taille d’onglet et densité de pixels, et prend en charge la requête média de mode sombre décrite ci-dessous. Les navigateurs modernes le préfèrent lorsque SVG et .ico sont tous deux déclarés.

Dans l'en-tête du document :

Tout ce qui s’ajoute à ces trois éléments — l’icône PWA de 512px, les variantes d’icône adaptative Android et les balises méta de tuiles Windows — ne compte que si vous créez une PWA installable ou ciblez spécifiquement l’épinglage de tuiles Windows. Ajoutez-les lorsque le besoin est réel, pas par anticipation.

Produire manuellement la partie matricielle de cet ensemble revient à exporter la même illustration à plusieurs tailles et à créer un .ico. Notre Générateur de favicons le fait à partir d’une seule image source : favicon.ico, apple-touch-icon de 180px et les PNG de 192 et 512 pour les cas où vous voulez un manifeste. Le SVG doit toujours venir de votre outil vectoriel.

Ce que chaque plateforme demande réellement

• Onglets de navigateur de bureau affichent l’icône à environ 16×16 pixels CSS, agrandis pour les écrans haute densité. C’est pourquoi un SVG ou un petit PNG bien dessiné importe davantage ici qu’une grande image source : l’onglet est le rendu le plus petit et le plus souvent vu de votre icône.
• écran d’accueil iOS demande apple-touch-icon en 180×180 : cela couvre les iPhone actuels de plus forte densité ; iOS réduit pour les appareils anciens. iOS applique aussi automatiquement des coins arrondis et, sur certaines versions, un léger effet brillant. N’arrondissez pas les coins dans la source, sinon vous obtenez un double arrondi.
• Écran d'accueil Android / PWA lit les tailles dans site.webmanifest plutôt que dans une balise link, généralement 192×192 et 512×512, et prend en charge une variante « maskable » avec des marges de sécurité pour que les formes d’icônes adaptatives — cercle, carré arrondi, goutte — ne rognent pas votre dessin.
• Résultats de recherche (Google en particulier) affiche un petit favicon à côté du résultat, obtenu comme celui de l'onglet et rendu à une taille aussi petite.

site.webmanifest : à quoi sert-il ?

Un site.webmanifest le fichier est un petit document JSON décrivant votre site comme une application installable : nom, couleur du thème, couleur de fond et liste d’icônes aux tailles déclarées. Il transforme « Ajouter à l’écran d’accueil » d’un raccourci de signet en quelque chose qui ressemble et se lance comme une vraie icône d’application sur Android. Si vous ne créez pas de PWA et ne vous souciez pas de cette installation, vous pouvez l’ignorer entièrement : un site simple avec les trois fichiers ci-dessus fonctionne très bien sans lui. Si vous l’ajoutez, reliez-le avec <link rel="manifest" href="/site.webmanifest"> et référencez vos icônes avec des chemins absolus dans le JSON.

Concevoir pour être lisible à 16px

L’icône d’un onglet est minuscule. La plupart des favicons échouent non à cause du format, mais parce que le dessin source n’a jamais été vérifié à sa taille réelle d’affichage. Les détails nets à 512px — logo textuel, traits fins, dégradé à plusieurs bandes visibles — deviennent une tache grise à 16px.

• Réduisez le dessin à une forme ou une lettre dominante. Un glyphe épais ou une silhouette d’icône survit à la réduction ; un logo détaillé à plusieurs éléments, non.
• Augmentez le contraste et simplifiez les couleurs. Deux ou trois aplats sont plus lisibles en petit qu’un dégradé, qui tend à se fondre en une tonalité moyenne unique.
• Épaississez les traits fins. Une ligne correcte à taille réelle peut disparaître après anticrénelage dans une grille 16px.
• Testez en réduisant réellement l’export à 16px et en le regardant, pas en jugeant l’illustration à pleine taille en supposant qu’elle restera lisible. C’est l’étape la plus souvent négligée dans la conception de favicons.

Mode sombre

Les barres d’onglets et interfaces système peuvent être sombres ou claires selon le thème. Un favicon conçu seulement sur fond clair peut disparaître sur une barre sombre, ou inversement. Un favicon SVG peut s’y adapter directement avec une prefers-color-scheme une requête média dans le bloc de styles intégré au SVG, qui change les couleurs de remplissage selon le thème de l’utilisateur. Les favicons PNG et ICO ne le peuvent pas : ce sont des images statiques. Si le mode sombre compte, le favicon SVG n’est donc pas facultatif ; c’est le seul format capable de le gérer.

À défaut, choisir un favicon offrant assez de contraste sur fond blanc comme presque noir, généralement avec un contour fin ou une couleur intermédiaire plutôt que du noir ou blanc pur, couvre raisonnablement la plupart des cas sans complexité supplémentaire.

Pourquoi le favicon ne se met pas à jour et comment le corriger

Les favicons sont mis en cache de façon particulièrement agressive. Les navigateurs les considèrent comme pratiquement statiques et peuvent afficher une ancienne icône pendant des jours ou des semaines, même après une actualisation forcée de la page. En effet, leur requête n’est pas liée à l’invalidation normale du cache de page comme celle d’un script ou d’une feuille de style. Trois méthodes résolvent ce problème de manière fiable :

1. Changer le nom ou ajouter une version à la requête — /favicon.ico?v=2 ou renommer en /favicon-v2.ico force une nouvelle requête, car l’URL elle-même a changé.
2. Videz le cache spécifique favicon de Chrome, distinct du général : chrome://favicon-internals ou données de navigation avec images/fichiers en cache.
3. Laissez du temps. Même après changement d’URL, certains navigateurs et moteurs de recherche relisent et remettent en cache les favicons selon leur propre calendrier. L’icône d’un résultat de recherche peut notamment rester en retard de plusieurs jours sur le site actuel.

Questions fréquentes