Un favicon n'est plus une seule image. Les navigateurs, les téléphones et les systèmes d'exploitation attrapent chacun une taille différente pour un emplacement différent — l'onglet du navigateur, un favori, un écran d'accueil iOS, un sélecteur d'applications Android. Livrez un seul PNG de 32×32 et il marchera dans l'onglet mais paraîtra flou quand quelqu'un enregistre votre site sur son téléphone. Livrez le jeu complet et chaque surface reçoit une icône nette.
Voici exactement les tailles dont vous avez besoin, ce que fait chacune, et pourquoi la liste est ainsi.
Les tailles qui comptent
La plupart des sites sont couverts par six tailles PNG plus un .ico hérité. Voici la référence :
| Taille | Format | Où c'est utilisé |
|---|---|---|
| 16×16 | PNG (dans .ico) | Onglet du navigateur, barre d'adresse, favoris |
| 32×32 | PNG (dans .ico) | Onglets Retina, raccourcis de la barre des tâches Windows |
| 48×48 | PNG | Icônes de site Windows, certaines surfaces Android |
| 180×180 | PNG | Écran d'accueil iOS (apple-touch-icon) |
| 192×192 | PNG | Écran d'accueil Android, installation PWA |
| 512×512 | PNG | Écran de démarrage PWA, magasins d'applications, haute densité |
Le fichier favicon.ico est un conteneur qui regroupe les petites tailles (généralement 16 et 32, parfois 48). Les anciens navigateurs et Windows le cherchent par nom à la racine de votre site, il vaut donc encore la peine de le livrer même si les navigateurs modernes utilisent volontiers les PNG.
Pourquoi autant ? Un tour rapide
Si la liste est longue, c'est que l'icône apparaît à des tailles physiques très différentes.
16 et 32 sont les icônes d'onglet du quotidien. 16 est la taille classique ; 32 couvre les écrans haute densité (« Retina ») où le 16 paraîtrait mou. Les navigateurs choisissent celle qui convient à la densité de pixels.
48 est une affaire Windows — utilisée pour les raccourcis de site et plus nette dans quelques endroits que le 32 ne couvre pas bien.
180 est l'apple-touch-icon d'Apple. Quand quelqu'un touche « Sur l'écran d'accueil » sur un iPhone ou un iPad, iOS l'utilise. Ratez-la et iOS attrapera soit une capture réduite, soit une tuile avec une simple lettre — ni l'un ni l'autre ne ressemble à votre marque.
192 et 512 sont les tailles Progressive Web App, déclarées dans un fichier manifest.webmanifest. 192 est l'icône d'écran d'accueil Android ; 512 alimente l'écran de démarrage et est réduite pour tout ce dont l'OS a besoin. Si votre site est installable, ces deux-là ne sont pas négociables.
Faut-il plus grand que 512 ?
Non. 512×512 est le plafond pratique pour les favicons web — la spécification webmanifest et toutes les grandes plateformes plafonnent autour de là. Si votre illustration source fait 1024 ou plus, c'est parfait comme image de départ (plus de détail à réduire), mais vous ne livrez pas un favicon 1024. Tout au-dessus de 512 n'ajoute que des octets que personne n'utilise.
La seule règle qui compte en montant : partez d'une source grande et carrée. Un original 512×512 ou 1024×1024 se réduit proprement vers chaque taille en dessous. Partez d'une image minuscule et les petites tailles paraissent boueuses car il n'y a jamais eu assez de détail à garder.
Concevez pour survivre au 16×16
La taille la plus difficile est la plus petite. À 16×16, un logo détaillé devient une tache illisible. Quelques conseils valables partout :
- Simplifiez. Un logotype complet ne se lira pas à 16 px. Utilisez une seule lettre, un monogramme, ou la partie la plus reconnaissable de votre marque.
- Gardez un contraste élevé pour que la forme reste lisible sur les fonds d'onglet clairs comme sombres.
- Laissez un peu de marge — une icône qui touche les quatre bords semble à l'étroit dans l'onglet.
- Testez-la en petit. Dézoomez votre navigateur, ou regardez simplement l'onglet réel. Si vous ne devinez pas ce que c'est d'un coup d'œil, simplifiez davantage.
Générer tout le jeu
Vous ne construisez pas cela à la main. Déposez une seule image carrée dans le générateur de favicon et il produit le jeu complet d'un coup — le favicon.ico, les PNG 16/32/48/180/192/512, un webmanifest prêt à l'emploi, et l'extrait HTML <head> exact à coller. Tout fonctionne dans votre navigateur : l'image n'est jamais téléversée, et après votre première visite l'outil fonctionne hors ligne.
Le HTML que vous obtiendrez
Pour référence, une configuration de favicon complète ressemble à peu près à ceci dans votre <head> :
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Le générateur l'écrit pour vous, vous pouvez donc le coller directement. Couvrez les six tailles plus le .ico et le manifeste, et chaque navigateur, téléphone et OS reçoit l'icône nette qu'il réclame.