La taille du favicon se résume aujourd'hui à cinq fichiers : un favicon.ico de 32×32, une icône SVG, une Apple touch icon de 180×180, et deux PNG dans le manifeste d'application web, en 192×192 et 512×512, dont l'un est maskable. Tout le reste, comme les icônes Apple de 57×57, les tuiles Windows ou les PNG de tailles supplémentaires, est hérité du passé et peut disparaître.
Le tableau des tailles
| Fichier | Taille | Utilisé par | Remarques |
|---|---|---|---|
favicon.ico | 32×32 (peut aussi contenir 16 et 48) | Tous les navigateurs, les lecteurs RSS, tout ce qui demande /favicon.ico | Gardez-le à la racine du site, même si votre HTML déclare d'autres icônes. |
favicon.svg | Toutes, viewBox carré | Onglets de Chrome, Edge et Firefox | Net à toutes les tailles, et peut changer de couleurs en mode sombre. |
favicon-96x96.png | 96×96 | Google Search | Facultatif si l'Apple touch icon est déclarée ; Google lit les deux. |
apple-touch-icon.png | 180×180 | Écrans d'accueil de l'iPhone et de l'iPad, Google Search | Arrière-plan opaque. iOS arrondit lui-même les coins. |
| Icône du manifeste | 192×192 | Écran d'accueil d'Android | Listée dans icons du manifeste d'application web. |
| Icône du manifeste | 512×512 | Invite d'installation, écran de démarrage | Les critères d'installation de Chrome demandent une icône de 192 et une de 512. |
| Icône maskable | 512×512 | Icônes adaptatives d'Android | "purpose": "maskable", logo dans le cercle central de 80 %. |
Onglets du navigateur : favicon.ico et SVG
Un onglet affiche l'icône à 16 pixels CSS, soit 32 pixels physiques sur un écran à haute densité. C'est pourquoi l'image de 32×32 contenue dans favicon.ico compte le plus. Vous pouvez ajouter du 16 et du 48 dans le même fichier ; le navigateur prend la taille la plus proche.
Une icône SVG couvre toutes les tailles à la fois. Elle peut aussi contenir une media query prefers-color-scheme, de sorte qu'un logo sombre devienne clair dans les onglets sombres. Déclarez d'abord l'ICO avec sizes="32x32", puis le SVG : les navigateurs qui gèrent le SVG le prennent, les autres se rabattent sur l'ICO.
Google Search
Les consignes de Google sur les favicons demandent une icône carrée d'au moins 8×8 pixels et en recommandent une de plus de 48×48. Les formats pris en charge sont BMP, GIF, ICO, PNG, JPEG, PPM et TIFF. Le SVG ne figure pas dans cette liste : un site qui n'a qu'un SVG ne donne rien à Google. Google lit à la fois rel="icon" et rel="apple-touch-icon", donc une Apple touch icon de 180×180 déclarée respecte déjà la taille conseillée. Si vous voulez un fichier dédié, un PNG de 96×96 convient.
iPhone et iPad
iOS utilise l'Apple touch icon quand quelqu'un ajoute votre site à l'écran d'accueil. 180×180 est la taille des iPhone actuels (60 points en échelle 3×) ; les iPad la réduisent sans problème, un seul fichier suffit donc. Les zones transparentes deviennent noires sur l'écran d'accueil : donnez à l'icône un arrière-plan uni. Sans cette icône, iOS utilise une capture de la page ou une lettre sur une tuile unie.
Android et applications web installables
Android et Chrome lisent les icônes dans le manifeste d'application web. L'icône de 192×192 sert pour l'écran d'accueil ; celle de 512×512 apparaît dans la boîte de dialogue d'installation et sur l'écran de démarrage.
Une icône maskable est une image de 512×512 distincte, dont le visuel remplit tout le carré. Android la découpe selon la forme qu'utilise le téléphone : cercle, squircle ou carré arrondi. Gardez le logo dans un cercle centré dont le diamètre fait 80 % de l'image et il survit à tous les masques. Sans icône maskable, Android réduit votre icône habituelle et la place sur un cercle blanc.
Le HTML
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Et la partie icônes de site.webmanifest :
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Servez le manifeste avec le type application/manifest+json et chaque icône avec son vrai type d'image. Un serveur qui répond à /favicon.ico par une page HTML avec le statut 200 casse l'icône, même si l'onglet réseau semble normal. Les applications monopages font souvent cela.
Les tailles que vous pouvez abandonner
- Les Apple touch icons de 57, 60, 72, 76, 114, 120, 144 et 152 px. iOS réduit celle de 180 px.
mstile-*.png,browserconfig.xmlet les balisesmsapplication-*. Ils servaient aux tuiles de l'écran d'accueil de Windows 8 et 10.- Le
mask-iconde Safari. Safari 12 et suivants utilisent le favicon habituel pour les onglets épinglés. - Les liens séparés vers des PNG de 16×16 et 32×32 quand
favicon.icocontient déjà les deux.
Vérifiez votre jeu d'icônes
Favicon Checker récupère sur votre site chacun des fichiers ci-dessus, mesure leur taille et leur format réels, et montre l'aspect des icônes dans les onglets, Google, iOS et Android.