Tailles de favicon : les fichiers vraiment nécessaires et comment les créer

Les anciens générateurs de favicon vous rendent une bonne vingtaine de fichiers. La plupart servent aux tuiles Windows et à d’anciennes tailles Apple qu’aucun système actuel ne lit plus. Le jeu qui compte encore est réduit, et la vraie question n’est pas de savoir quelles tailles exporter, mais si votre logo survit à la plus petite.

Deux définitions

Un favicon est la petite icône qu’un navigateur affiche dans un onglet, un favori ou sur un écran d’accueil. Il a ceci de particulier, parmi les éléments d’une marque, qu’on le dessine à 512 pixels et qu’on le voit presque toujours à 16.

Un PNG-dans-ICO est un fichier .ico dont les images sont stockées en données PNG plutôt qu’en bitmaps. C’est valide depuis Windows Vista, et le fichier reste léger.

Les fichiers, et ce qui lit chacun d’eux

Voici le jeu que produit l’outil, avec le nom de chaque fichier dans le téléchargement :

Fichier	Taille en pixels	Ce qui l’utilise
favicon.ico	16, 32 et 48, dans un seul fichier	Demandé par défaut à la racine du site, et par divers robots d’indexation et lecteurs de flux
icon-16.png	16	L’onglet du navigateur, la taille que presque tout le monde voit réellement
icon-32.png	32	Un onglet sur un écran haute densité, et la barre des tâches Windows
icon-48.png	48	Les raccourcis de site sous Windows
apple-touch-icon.png	180	Un favori sur l’écran d’accueil iOS
icon-192.png	192	L’écran d’accueil Android, via le manifeste web
icon-512.png	512	L’écran de démarrage et l’invite d’installation, via le manifeste web
site.webmanifest	Aucune	Liste les icônes 192 et 512 avec le nom de votre site
head.html	Aucune	Les quatre lignes pour le head de votre page

L’ICO vaut la peine d’être fourni, même si les navigateurs modernes utilisent un PNG déclaré dans une balise link. Un favicon.ico à la racine reste demandé par défaut : l’omettre produit un flux continu d’erreurs 404.

Gardez les petites tailles en PNG. Dans nos mesures, convertir une icône de 16 pixels en WebP l’a alourdie au lieu de l’alléger : 332 octets en PNG, 718 octets en WebP, soit une hausse de 116.3 %, parce que le coût fixe du conteneur WebP n’a aucune chance d’être amorti sur 256 pixels. Le détail se trouve dans combien PNG vers WebP fait gagner, mesures à l’appui.

Le code pour le head

Voici les quatre lignes que l’outil écrit, à l’identique :

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon-512.png" type="image/png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Chaque chemin commence par une barre oblique : les fichiers vont donc à la racine de votre site, à côté de votre page d’accueil. Les PNG de 16, 32 et 48 pixels ne sont pas listés : leurs images sont celles que contient l’ICO, et ils figurent dans le téléchargement comme fichiers séparés au cas où vous en auriez besoin.

Le manifeste que l’outil écrit, avec le nom de site par défaut, est le suivant :

{
  "name": "My site",
  "short_name": "My site",
  "icons": [
    {
      "src": "/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

Créer le jeu de fichiers avec l’outil

1. Ouvrez le Favicon generator et déposez votre logo dans la zone, ou cliquez dessus pour choisir un fichier. Il accepte le PNG, le JPEG ou le SVG, de 512 pixels ou plus, idéalement carré. Une source qui n’est pas carrée est ajustée à l’intérieur du carré, pas recadrée.
2. Lisez le contrôle avant toute chose. Il donne trois chiffres : Detail kept at 16px (détail conservé à 16px), On a light tab (sur un onglet clair) et On a dark tab (sur un onglet sombre). En dessous, l’icône de 16 pixels est affichée en taille réelle sur une couleur d’onglet claire et sur une sombre.
3. Lisez les éventuels avertissements en rouge sous les chiffres. S’il n’y en a aucun, le panneau indique que l’icône tient à 16 pixels et reste lisible sur les deux barres d’onglets.
4. Parcourez la liste des tailles. Chaque ligne montre l’icône, sa taille, son usage et le poids du fichier.
5. Saisissez le nom de votre site dans Site name, for the manifest (nom du site, pour le manifeste).
6. Appuyez sur Download everything as .zip pour obtenir les neuf fichiers, et sur Copy the markup pour le code du head.

Ce que 16 pixels font à un logo

L’arithmétique est impitoyable. Une icône de 16 pixels compte 16 × 16 = 256 pixels au total. Une source de 512 pixels en compte 512 × 512 = 262 144. Chaque pixel de l’onglet représente 262 144 ÷ 256 = 1 024 pixels de votre visuel. Un logotype de trois lettres obtient environ 85 pixels par lettre une fois les espaces entre lettres décomptés, ce qui ne suffit pas pour dessiner une lettre.

Le chiffre de détail mesure ce qui en survit. L’outil dessine votre logo à 128 pixels et à 16, compte le nombre de niveaux de luminosité distincts dans chacun (en ignorant les pixels transparents), et exprime le nombre obtenu à 16 pixels en pourcentage de celui à 128 pixels. En dessous de 45 %, il avertit que l’icône sera perçue comme une forme colorée plutôt que comme votre logo. Ne jugez pas sur le seul aperçu : à 16 pixels, votre œil complète ce qu’il sait être là.

Si le chiffre s’effondre, modifiez le logo plutôt que l’export. Une seule lettre, un fragment recadré du logo ou une silhouette simplifiée survivent là où le logo complet échoue. Aucun réglage d’export ne récupère du détail dans 256 pixels.

Un dernier avertissement est à surveiller. Si votre source fait moins de 512 pixels, le fichier de 512 pixels est agrandi à partir d’elle et paraîtra flou. Fournissez au moins 512 pixels, ou un SVG.

Le piège de l’onglet sombre

Un logo parfaitement lisible dans un navigateur clair peut disparaître en mode sombre. L’outil prend la couleur moyenne des pixels visibles de votre logo, la mesure contre une barre d’onglets claire (#F2F2F2) et une sombre (#202124), et avertit si l’un des deux rapports descend sous 1.6:1.

Un logo noir montre le problème dans toute son ampleur. Le noir a une luminance relative de 0 ; celle de la barre claire est de 0.8879 et celle de la barre sombre de 0.0152. Contre la barre claire, cela donne (0.8879 + 0.05) ÷ (0 + 0.05) = 18.76:1, on ne peut plus net. Contre la barre sombre, (0.0152 + 0.05) ÷ 0.05 = 1.30:1, sous le seuil d’avertissement, et l’icône disparaît presque.

C’est le fait de voir les deux chiffres côte à côte qui rend le problème visible avant la mise en ligne. Donner au logo son propre carré de fond plein est un moyen de ne plus dépendre de la couleur de l’onglet ; modifiez la source et déposez-la de nouveau pour voir les chiffres bouger.

Les autres méthodes

Ni macOS ni Windows n’intègrent de générateur de favicon. Sur Mac, Outils → Ajuster la taille dans Preview redimensionne une image : vous pouvez donc créer chaque taille de PNG, une à une, à partir d’une copie de votre source. Il vous reste alors à confier l’ICO, le manifeste et le code du head à un autre outil, et vous n’avez aucun contrôle à 16 pixels.

Vérifier que rien n’a été envoyé

Chaque taille est dessinée sur un canvas dans votre navigateur, et le zip y est assemblé. Le code qui construit le zip est récupéré la première fois que vous appuyez sur le bouton de téléchargement, ce qui apparaît dans le panneau Network des outils de développement comme un script entrant ; rien ne sort avec votre image. Vous pouvez aussi charger la page, couper la connexion et déposer votre logo : le contrôle et les aperçus s’affichent quand même.

Et ensuite

Déposez votre logo dans le Favicon generator et lisez le chiffre de détail avant l’aperçu. Si votre source est un SVG tout juste sorti d’un logiciel de design, passez-le d’abord dans le SVG optimiser.