Quelles tailles de favicon un site a besoin aujourd’hui (et lesquelles ne servent plus)

Un site actuel a besoin de cinq fichiers de favicon, pas des vingt que produisaient les générateurs il y a dix ans : un favicon.ico pour les anciens navigateurs et les moteurs de recherche, un favicon.svg qui s’adapte à toute taille et au mode sombre, un apple-touch-icon.png de 180 pixels pour iOS, et deux PNG de 192 et 512 pixels déclarés dans le manifest pour Android et les applications web installables. Cela couvre les onglets, les favoris, les écrans d’accueil et les résultats de Google.

Cet article explique le rôle de chaque fichier, les balises à mettre dans le <head>, ce que Google exige pour afficher l’icône dans les résultats et les tailles que vous pouvez cesser de générer.

Les cinq fichiers

Fichier	Taille	Rôle
/favicon.ico	32×32 (éventuellement aussi 16×16 et 48×48 dans le même .ico)	Anciens navigateurs, lecteurs de flux et moteurs qui demandent /favicon.ico par convention même s’il n’est pas déclaré.
/favicon.svg	Vectoriel	Navigateurs modernes. Net à toute densité, peut changer de couleur avec prefers-color-scheme.
/apple-touch-icon.png	180×180	Icône lors de l’ajout du site à l’écran d’accueil sur iOS et iPadOS. Safari le cherche aussi par convention à la racine.
/icons/icon-192.png	192×192	Android et applications web installables (déclaré dans le manifest).
/icons/icon-512.png	512×512	Écran de démarrage et icône haute résolution dans le manifest.

Et les balises qui relient le tout :

<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="/manifest.webmanifest" />

{
  "name": "AIMRAN Blog",
  "icons": [
    { "src": "/icons/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icons/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icons/icon-512-maskable.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ]
}

L’ordre des deux premières balises compte : les navigateurs qui comprennent le SVG choisissent le SVG ; les autres gardent le .ico. L’attribut sizes="32x32" sur le .ico aide à ce choix.

Pourquoi un favicon SVG

Un SVG pèse peu, s’affiche parfaitement sur les écrans haute densité et permet de s’adapter au mode sombre depuis le fichier lui-même :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <style>
    path { fill: #1d1d1f; }
    @media (prefers-color-scheme: dark) { path { fill: #f5f5f7; } }
  </style>
  <path d="…" />
</svg>

Firefox joue même les animations CSS dans un favicon SVG ; Chrome ne les anime pas dans l’onglet (pour une animation là, il faut du JavaScript qui remplace l’icône au fil du temps, comme le fait ce blog). Safari accepte les favicons SVG depuis la version 12 mais préfère toujours l’apple-touch-icon pour l’écran d’accueil.

Deux précautions avec le SVG : ne pas dépendre de polices externes (convertissez-les en tracés) et vérifier que le dessin reste lisible à 16 pixels ; un logo avec du petit texte devient une tache.

Ce que Google exige pour afficher le favicon dans les résultats

D’après la documentation Google Search :

• Le favicon doit être un carré multiple de 48 pixels (48×48, 96×96, 144×144…) ou un SVG. Un .ico multi-tailles convient s’il contient une version 48×48.
• Il doit être déclaré avec <link rel="icon"> sur la page d’accueil du domaine et être explorable (pas bloqué par robots.txt).
• Il doit être stable (même URL) et représenter la marque du site ; Google peut ne pas afficher des icônes qu’il juge inappropriées.
• L’icône est associée à la page d’accueil et appliquée à tout le site ; un favicon différent par section n’apparaît pas dans les résultats.

Google explore le favicon avec un robot dédié et peut mettre plusieurs jours à le mettre à jour après un changement.

Ce que vous pouvez cesser de générer

• Les PNG de 57, 60, 72, 76, 114, 120, 144 et 152 px pour les anciennes versions d’iOS : Apple redimensionne celui de 180 px.
• browserconfig.xml et les tuiles de Windows 8/10 (msapplication-TileImage) : la prise en charge des tuiles dynamiques a disparu avec Windows 11.
• mask-icon pour les onglets épinglés de Safari : depuis la version 12, Safari utilise le favicon normal aussi dans les onglets épinglés.
• Des dizaines de <link rel="icon" sizes="…"> : un .ico, un SVG et le manifest suffisent.

Comment générer les fichiers

Partez d’un carré d’au moins 512 px, idéalement un SVG. Avec sharp en Node.js :

import sharp from 'sharp';
for (const size of [32, 180, 192, 512]) {
  await sharp('logo.svg').resize(size, size).png().toFile(`icon-${size}.png`);
}

Le .ico peut être assemblé avec la bibliothèque png-to-ico ou avec ImageMagick (magick icon-32.png icon-16.png favicon.ico). Si vous préférez ne rien installer, le générateur de favicon d’AIMRAN Tools accepte une image carrée ou un SVG, prévisualise les tailles habituelles (de 16 à 180 px) et télécharge l’ensemble en ZIP, le tout dans le navigateur.

Pour l’icône maskable (Android découpe les icônes en cercle ou en formes arrondies), laissez une marge de sécurité : le contenu important doit tenir dans les 80 % centraux.

Vérifications finales

1. Ouvrez https://votredomaine/favicon.ico et https://votredomaine/favicon.svg : les deux doivent répondre 200.
2. Dans Chrome DevTools, Application → Manifest, vérifiez que les icônes se chargent sans avertissement.
3. Ajoutez le site à l’écran d’accueil sur un iPhone et sur un Android et regardez l’icône.
4. Faites le test de l’onglet : l’icône est-elle reconnaissable à 16 pixels à côté de vingt autres onglets ?

Conclusion

Un .ico, un SVG, un PNG de 180 px et deux PNG dans le manifest : cinq fichiers et quatre balises couvrent navigateurs, mobiles, applications installables et résultats Google. Consacrez le temps gagné sur la génération de tailles à ce qui se voit vraiment : un dessin lisible à 16 pixels qui fonctionne en clair comme en sombre.