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.
Les tailles dont vous avez vraiment besoin
| Taille | Utilisée pour | La garder ? |
|---|---|---|
| 16, 32, 48 | Onglet du navigateur et favoris, regroupés dans favicon.ico | Garder |
| 180x180 | apple-touch-icon pour l'écran d'accueil iOS | Garder |
| 192x192 | Icône du launcher Android, listée dans le manifest | Garder |
| 512x512 | Splash et invite d'installation du PWA, listés dans le manifest | Garder |
| SVG | Icône d'onglet nette à toute taille, peut s'adapter au mode sombre | Facultatif |
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.
À quoi ressemblent ces chiffres
Tailles à ne plus publier
| Taille | Servait à | La garder ? |
|---|---|---|
| 57, 60, 72, 76 | apple-touch-icon pour iOS 6 et les iPad plus anciens | Supprimer |
| 114, 120, 144, 152 | apple-touch-icon Retina pour les anciens iPhone et iPad | Supprimer |
| 70, 150, 310 | Icônes de tuile Windows via browserconfig.xml | Supprimer |
| 160, 196 | Diverses anciennes tailles de raccourci Android et Chrome | Supprimer |
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.
Devrais-je publier des icônes de tuile Windows ?
Non. Les tailles de tuile 70, 150 et 310 et le browserconfig.xml visaient les live tiles de Windows, qui ont été abandonnés. Supprimez-les.
Un favicon.ico peut-il contenir plus d'une taille ?
Oui. Le format .ico est un conteneur qui contient 16, 32 et 48 dans un seul fichier. Le navigateur choisit la taille dont il a besoin à l'intérieur.