Tailles de favicon : toutes les dimensions dont vous avez vraiment besoin
Les tailles de favicon dont vous avez besoin sont 16x16 et 32x32 en PNG pour les onglets et les favoris des navigateurs, 180x180 pour l'apple-touch-icon d'iOS, et 192x192 plus 512x512 en PNG pour les écrans d'accueil Android et l'installation en PWA. Un favicon.ico contenant des entrées de 16, 32 et 48 pixels couvre tout ce qui demande /favicon.ico directement. Toutes les autres tailles sont facultatives, et la plupart des sites n'en livrent aucune.
Pourquoi plus d'une taille
Un onglet de navigateur réclame une icône d'environ 16 à 32 pixels de large. Un écran d'accueil Android en réclame une de 192. Un écran de démarrage PWA en réclame une de 512. Ce n'est pas la même image mise à l'échelle. À 16 pixels, une marque dispose d'environ 256 pixels de travail, et tout ce qui survit là doit être bien plus simple que ce qui a l'air juste à 512.
Lorsque vous déclarez plusieurs tailles, le navigateur choisit la correspondance la plus proche et met à l'échelle à partir de là. Ne déclarer qu'une grande icône signifie que chaque petite surface la sous-échantillonne, d'où la tache grise dans l'onglet. Ne déclarer qu'une petite signifie que chaque grande surface l'agrandit, d'où l'icône floue sur l'écran d'accueil.
Tailles de favicon essentielles
| Taille | Utilisée pour | Priorité |
|---|---|---|
| 16x16 | Barre d'adresse, navigateurs anciens, favoris | Essentielle |
| 32x32 | Onglets de navigateur, navigateurs modernes | Essentielle |
| 96x96 | Raccourcis de bureau, tuiles Windows | Facultative |
| 192x192 | Écran d'accueil Android, icônes PWA | Essentielle |
| 512x512 | Écrans de démarrage, icônes haute résolution | Essentielle |
À quoi ressemblent ces chiffres
Tailles de l'apple touch icon
| Taille | Appareil |
|---|---|
| 57x57 | iPhone (non-retina) |
| 60x60 | iPhone (retina) |
| 72x72 | iPad (non-retina) |
| 76x76 | iPad (retina) |
| 114x114 | iPhone (retina) |
| 120x120 | iPhone (retina HD) |
| 144x144 | iPad (retina) |
| 152x152 | iPad (retina HD) |
| 180x180 | iPhone (retina HD) principal |
Où vont les fichiers
- public/
- favicon.ico16, 32 and 48 in one file
- favicon-16x16.pngAddress bar
- favicon-32x32.pngBrowser tabs
- favicon-96x96.pngDesktop shortcuts
- apple-touch-icon.png180x180, iOS home screen
- icon-192.pngAndroid home screen
- icon-512.pngPWA splash screen
- manifest.jsonLists the PWA icons
À plat dans la racine public est la convention, car plusieurs d'entre eux sont aussi demandés par chemin, sans balise link impliquée.
FAQ sur les tailles de favicon
Quel est l'ensemble minimal de tailles de favicon ?
Un favicon.ico contenant 16 et 32, un apple-touch-icon.png de 180x180, et des PNG de 192x192 et 512x512 listés dans votre manifeste d'application web. Cela couvre les navigateurs de bureau, les écrans d'accueil iOS, Android et l'installation PWA avec cinq fichiers.
Ai-je encore besoin du 57x57 et du 72x72 pour iOS ?
Uniquement si vous prenez en charge de très vieux iPhone et iPad. iOS actuel utilise l'apple-touch-icon de 180x180 et le réduit là où il lui faut quelque chose de plus petit, donc un seul 180 suffit pour presque tous les sites.
Un favicon plus grand ralentit-il la page ?
Pas de façon notable. Les icônes sont de petits PNG mesurés en kilo-octets à un chiffre, et les navigateurs ne demandent que la taille dont ils ont besoin ; en plus, elles sont mises en cache de façon agressive. Livrer un 512 que vous n'utilisez jamais coûte moins qu'une icône floue sur l'écran d'accueil.