Chercher « taille favicon » renvoie encore des listes de quinze fichiers héritées de 2014. En pratique, six dimensions suffisent aujourd'hui pour couvrir les onglets, les résultats de recherche, iOS, Android et les PWA. Voici lesquelles, et pourquoi.
Le tableau des tailles à générer
Chaque ligne correspond à un usage documenté du paquet proposé. Le tableau privilégie un petit ensemble interopérable plutôt qu'une collection de variantes historiques.
| Fichier | Dimensions | À quoi ça sert |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Onglets, favoris, vieux navigateurs, robots d'indexation |
| favicon.svg | vectoriel, carré | Navigateurs modernes, net à toutes les tailles, gère le mode sombre |
| favicon-96x96.png | 96×96 | Résultats de recherche Google sur mobile |
| apple-touch-icon.png | 180×180 | Écran d'accueil iOS et iPadOS, sans transparence |
| web-app-manifest-192x192.png | 192×192 | Écran d'accueil Android, déclaré dans le manifeste web |
| web-app-manifest-512x512.png | 512×512 | Écran de démarrage des PWA, version « maskable » |
Pourquoi 16, 32 et 48 dans le même .ico
Le format ICO est un conteneur : un seul fichier peut embarquer plusieurs images, et le navigateur choisit celle qui correspond à son affichage. C'est exactement ce qu'on veut, parce que le contexte change la taille demandée.
16×16 sert à l'onglet sur un écran classique. 32×32 offre une variante pour les écrans haute densité et d'autres interfaces du navigateur. 48×48 complète le conteneur et respecte aussi le multiple de 48 demandé par Google pour les favicons de résultats de recherche.
Générer un .ico qui ne contient que du 16×16 est l'erreur la plus fréquente : sur un écran Retina, votre icône est agrandie et paraît floue en permanence.
180×180 pour iOS, 192 et 512 pour Android
iOS ne lit pas le manifeste web pour l'icône d'écran d'accueil : il cherche une balise apple-touch-icon. Une seule taille suffit, 180×180, qui couvre tous les iPhone et iPad récents. Le système réduit lui-même l'image pour les appareils plus anciens.
Android, lui, passe par le manifeste web. Deux entrées suffisent : 192×192 pour l'icône de l'écran d'accueil, et 512×512 pour l'écran de démarrage quand le site est installé comme application. La version 512 doit être déclarée avec purpose « maskable », c'est-à-dire dessinée pour supporter un recadrage en cercle ou en carré arrondi.
Pour une icône maskable, gardez l'essentiel du dessin dans les 80 % centraux. Tout ce qui dépasse peut être rogné selon le fabricant du téléphone.
Quelle image source utiliser
Le meilleur point de départ est un SVG : il se redimensionne sans perte vers toutes les tailles ci-dessus. À défaut, partez d'un PNG carré d'au moins 512×512 pixels, pour que même l'icône de démarrage Android soit générée par réduction et jamais par agrandissement.
Un logo horizontal avec du texte ne fonctionne pas en 16×16 : à cette taille, un mot devient une bouillie de trois pixels de haut. Extrayez le symbole, ou repartez d'une ou deux lettres avec un fond contrasté.
Vérifiez enfin le contraste sur fond clair et sur fond sombre : un logo noir disparaît dans un onglet en thème sombre. C'est précisément le problème que résout la variante sombre du favicon SVG.
Les tailles dont vous n'avez plus besoin
Les anciens générateurs produisent encore des fichiers destinés à des intégrations historiques, comme les tuiles Windows avec mstile-150x150.png et browserconfig.xml. Ne les ajoutez que si votre matrice de support cible explicitement ces interfaces.
La longue série apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 et 152x152 date d'une époque où iOS ne savait pas redimensionner. Une seule image en 180×180 les remplace toutes.
Retirer les déclarations sans usage simplifie votre dépôt et votre HTML. Vérifiez toutefois vos propres navigateurs et plateformes cibles avant de supprimer une intégration existante.
Sources primaires
Questions fréquentes
Faut-il encore un favicon.ico ?
Oui, mais uniquement à la racine du site. Les navigateurs modernes préfèrent le SVG, seulement de nombreux robots, agrégateurs et clients de messagerie demandent encore /favicon.ico sans lire votre HTML. Le fichier pèse quelques kilo-octets : gardez-le.
Quelle taille pour le favicon dans les résultats Google ?
Google demande une icône dont le côté est un multiple de 48 pixels, et affiche généralement du 48×48. Un PNG en 96×96, ou un SVG, couvre le cas sans effort. L'icône doit être accessible aux robots et ne pas être bloquée par le robots.txt.
Mon favicon peut-il être rectangulaire ?
Techniquement oui, visuellement non. Tous les contextes d'affichage réservent un carré : une image rectangulaire sera soit déformée, soit centrée avec des bandes vides. Partez toujours d'un carré, quitte à ajouter des marges autour du symbole.