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 fichier réel du paquet moderne. Rien de plus, rien de moins : si une taille n'est pas dans ce tableau, aucun navigateur courant ne la réclame en 2026.
| 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 sert au même onglet sur un écran haute densité, ainsi qu'à la barre de favoris et aux raccourcis de bureau. 48×48 est réclamé par certains gestionnaires de favoris et par plusieurs robots d'indexation, dont celui de Google.
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 une dizaine de fichiers inutiles. Les tuiles Windows (mstile-150x150.png et browserconfig.xml) visaient les vignettes du menu Démarrer de Windows 8, abandonnées depuis. L'icône Safari « pinned tab » en SVG monochrome n'est plus lue par Safari depuis plusieurs versions.
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.
Supprimer ces fichiers allège votre dépôt, votre code HTML, et surtout vos requêtes : chaque balise inutile est une requête réseau que le navigateur tente quand même.