Favicons : les tailles dont tu as réellement besoin en 2026

Pars des consommateurs, pas de la liste de fichiers

Une icône de site atterrit dans exactement cinq endroits, et chacun lit une chose précise. L'onglet et la barre de favoris lisent ce que le head déclare en rel="icon", en préférant un vectoriel si tu en proposes un. Tout ce qui devine — navigateurs anciens, lecteurs de flux, générateurs d'aperçus de liens, une quantité surprenante d'outillage interne — demande /favicon.ico à la racine du site, sans le moindre balisage. L'écran d'accueil iOS et iPadOS lit apple-touch-icon.png. L'écran d'accueil Android et l'invite d'installation de Chrome lisent le tableau icons du manifeste d'application web. Voilà la liste complète des consommateurs, et elle n'a pas grandi depuis des années.

Relis cette liste et vois ce qui manque. Aucun consommateur ne réclame 57 pixels, ni 70, ni 114, ni 144, ni 310. Ces nombres viennent d'une matrice historique précise : les tuiles de sites épinglés d'Internet Explorer, une décennie d'appareils iOS d'avant l'époque où le système a su réduire un fichier unique, et une génération de lanceurs Android antérieure au manifeste. Ces trois consommateurs ont disparu. Il n'en reste que de la sortie de générateur — une vingtaine de PNG et un browserconfig.xml — posée à la racine de sites dont les propriétaires ignorent lequel de ces fichiers est encore lu par quoi que ce soit.

L'ensemble minimal, et ce que coûte l'ensemble maximal

Nous avons construit les deux, à partir d'une seule marque 512 × 512, et les avons pesés. L'ensemble minimal, c'est favicon.ico à 1 664 octets, icon.svg à 254 octets, apple-touch-icon.png en 180 × 180 et 13 573 octets, icon-192.png à 14 510 octets et icon-512.png à 27 390 octets : cinq fichiers, 57 391 octets. La matrice héritée — la même marque exportée en 16, 24, 32, 36, 48, 57, 60, 70, 72, 76, 96, 114, 120, 128, 144, 150, 152, 167, 180, 192, 196, 228, 256, 310, 384 et 512 — fait 26 fichiers et 272 192 octets, avant l'ICO et les deux fichiers de configuration. Soit 4,7 fois les octets et cinq fois les fichiers, pour exactement zéro couverture supplémentaire.

Le total en octets est le moins intéressant, car un visiteur ne télécharge jamais l'ensemble. Lors d'une consultation ordinaire, un navigateur récupère l'icône d'onglet et rien d'autre : notre ICO plus notre SVG font 1 918 octets, et un navigateur qui prend le SVG en récupère 254. L'apple-touch-icon et les icônes du manifeste ne sont demandés que si quelqu'un installe réellement le site ou l'ajoute à un écran d'accueil. Ce que coûte vraiment le nombre de fichiers, c'est la maintenance : 26 fichiers matriciels à régénérer, de manière cohérente, à chaque changement de la marque, et que personne ne vérifiera jamais.

Le SVG dans l'onglet : presque partout désormais, pas encore partout

Une icône d'onglet vectorielle est le meilleur changement possible, car elle supprime toute la question des tailles matricielles à livrer : le navigateur demande ce dont il a besoin et le moteur de rendu le produit. Chrome et Edge lisent les SVG en rel="icon" depuis la version 80, Firefox depuis la 41. Safari a longtemps résisté — il ne prenait en charge que son propre format monochrome d'onglet épinglé — et Safari 26 est la première version à afficher un favicon SVG ordinaire dans les onglets et les favoris. Les tables de compatibilité situent l'ensemble autour de 89 % du trafic mondial, et le chiffre monte à mesure que les installations Safari se mettent à jour.

Ces 11 % restants sont la raison de garder l'ICO. Il n'est pas là pour l'onglet ; il est là parce que /favicon.ico est un chemin demandé sans le moindre balisage, par des navigateurs trop anciens pour le SVG et par tout outil non-navigateur qui veut une icône de site et n'analyse pas le HTML. Une seule entrée en 32 × 32 suffit. Garde-le à la racine, pas dans un dossier d'actifs : les clients qui le demandent par convention ne liront pas ton élément link pour savoir où tu l'as déplacé.

Ce que fait sizes="any", et pourquoi ce conseil a changé

Dans le standard HTML, l'attribut sizes est un indice : une liste de valeurs largeur par hauteur séparées par des espaces, indiquant au navigateur ce que contient la ressource, plus le mot-clé unique any, qui déclare que la ressource est scalable — un vectoriel. Le navigateur reste libre de s'en servir ou de l'ignorer. Ce n'est pas une instruction de rendu, et poser sizes sur une image ne redimensionne rien.

Le conseil qu'on trouve partout — mettre sizes="any" sur l'ICO — n'a jamais porté sur cette définition. C'était un contournement d'un comportement de Chrome : face à un ICO et un SVG, Chrome téléchargeait les deux et utilisait l'ICO ; on déclarait donc l'ICO en « any » pour pousser Chrome vers le SVG. Cela marchait, mais cela énonce une fausseté sur le fichier. La recommandation actuelle des mêmes auteurs qui ont popularisé l'astuce est de déclarer honnêtement l'ICO en sizes="32x32" : cela règle le même double téléchargement et ne ment pas sur le contenu du fichier. Si tu as copié un extrait de favicon avant 2023 environ, c'est la ligne à mettre à jour.

Une icône de 16 pixels n'est pas une icône de 512 réduite

C'est là que la liste de fichiers ne peut rien. Un canevas 512 × 512 contient 262 144 pixels. Un canevas 16 × 16 en contient 256 — un mille vingt-quatrième. Chaque élément de ta marque doit survivre à la moyenne qui le comprime dans ce budget, et cette moyenne est précisément ce que fait l'anticrénelage : un filet plus fin qu'un pixel de sortie ne devient pas une ligne fine, il devient une teinte pâle étalée sur les pixels qu'il couvre partiellement.

Nous l'avons mesuré sur une marque : une lettre grasse, un logotype composé en 52 pixels, une accroche en 24, et un anneau blanc de 8 pixels, le tout sur un canevas de 512. La marque contient 407 couleurs distinctes en 512 et 85 en 16. En mesurant le contraste de luminance restant à chaque élément — l'écart entre son pixel le plus clair et le plus sombre —, la lettre grasse passe de 199,4 niveaux en 512 à 188,0 en 16 : elle survit, à 94 % de son contraste. Le logotype passe de 199,4 à 86,4 — 57 % perdus. L'accroche passe de 199,4 à 29,1 — 85 % perdus. À ce stade ce n'est plus du petit texte, c'est une barre grise.

L'anneau est le cas le plus net, car on peut suivre une seule ligne de balayage à travers. Sur l'original 512, le trait de l'anneau donne du blanc pur, luminance 255 sur un fond à 56 — un contraste de 199. En 192, il est encore à 255. En 48, où le trait de 8 pixels tombe à 0,75 pixel de sortie, son point le plus clair n'atteint que 159. En 32, il atteint 121. En 16, où le trait fait un quart de pixel, le point le plus clair de tout l'anneau est à 99 sur un fond à 52 : un contraste de 47, contre 199. Les trois quarts de la présence de l'anneau ont disparu, et aucun réglage d'accentuation dans la boîte d'export ne les ramène — l'information est sous la grille d'échantillonnage.

La conséquence pratique est une règle de conception, pas de fichiers : à 16 pixels, une marque peut porter une forme grasse et rien d'autre. Si ton logo est un logotype, le favicon en est la première lettre ou le symbole, pas le logotype. S'il comporte un filet, épaissis-le ou supprime-le. Dessine une version simplifiée distincte pour les petites tailles si l'onglet t'importe — et si c'est le cas, c'est le seul endroit où dessiner à la main un raster de 16 et de 32 pixels bat la décision d'un algorithme de réduction.

Les deux fichiers qui ne sont pas des favicons

L'apple-touch-icon et les icônes du manifeste se retrouvent dans les listes de favicons, mais ce sont des icônes d'application, et elles se comportent comme telles. L'apple-touch-icon fait 180 × 180, soit l'icône iOS de 60 points en densité 3×, et iOS réduit ce fichier unique pour tous les autres appareils — l'ancienne échelle 57, 72, 76, 114, 120, 144 et 152 est inutile. Deux choses comptent : iOS applique son propre masque en rectangle arrondi, donc une marque à bord perdu perd ses coins ; et iOS ne conserve pas la transparence ici, donc un fond transparent est aplati à ta place, et pas forcément dans la couleur que tu aurais choisie.

Les icônes du manifeste sont ce que Chrome vérifie avant de proposer l'installation : il lui faut une entrée de 192 et une de 512 pixels, et sans les deux l'invite d'installation n'apparaît tout simplement jamais, sans erreur nulle part. Ajoute une troisième entrée 512 × 512 avec purpose à maskable si tu veux que les lanceurs Android redécoupent l'icône en cercle ou en squircle sans rogner ton dessin — la zone sûre est alors un cercle central de 409 pixels sur le canevas de 512, soit environ 80 % de la largeur, et tout ce qui déborde peut être masqué.

Questions fréquentes

Ai-je encore besoin d'un favicon.ico si je livre un SVG ?

Oui, et cela ne coûte presque rien — 1 664 octets pour une seule entrée 32 × 32 dans notre test. Son rôle n'est pas l'onglet. Son rôle, ce sont les requêtes qui arrivent sans balisage : navigateurs antérieurs à Chrome 80 ou Safari 26, lecteurs de flux, générateurs d'aperçus et outils internes qui récupèrent /favicon.ico par convention. Place-le à la racine, car ces clients ne liront pas ton élément link pour le trouver ailleurs.

Mon ICO doit-il contenir des versions 16, 32 et 48 pixels ?

Pas utilement. Nous avons fabriqué les deux : une seule entrée 32 × 32 pèse 1 664 octets, et empiler 16, 32 et 48 dans un même fichier en pèse 5 188 — plus de trois fois. Les clients qui lisent encore l'ICO sont ceux qui risquent le moins d'être exigeants sur l'entrée obtenue, et la réduction moderne de 32 à 16 est bonne. Investis plutôt l'effort dans le dessin à 16 pixels, qui, lui, se voit.

Un favicon SVG peut-il changer de couleur en mode sombre ?

Oui, et c'est l'un des vrais avantages du fichier vectoriel. Un favicon SVG peut contenir un bloc de style, et une requête média prefers-color-scheme à l'intérieur sera honorée par les navigateurs qui affichent le SVG : un onglet en mode sombre peut donc recevoir une marque plus claire sans second fichier. N'en faites toutefois rien d'essentiel : le repli ICO n'en est pas capable, ni l'apple-touch-icon ni les icônes du manifeste.

Pourquoi Chrome ne propose-t-il jamais d'installer mon site ?

La cause la plus fréquente est un manifeste sans icône de 192 et de 512 pixels. Chrome vérifie ces deux tailles dans ses critères d'installabilité, et s'il en manque une il ne te prévient pas — le bouton d'installation n'apparaît simplement jamais. Regarde le panneau application des outils de développement : il liste le manifeste tel qu'analysé et indique le critère non satisfait.

Puis-je simplement exporter le fichier 512 dans toutes les tailles inférieures et en rester là ?

Tu peux, et pour les fichiers de 180, 192 et 512 pixels c'est exactement la bonne méthode : ils sont assez grands pour tout contenir. C'est du côté 16 et 32 pixels que la réduction automatique cesse de suffire. Sur notre marque de test, la petite accroche a perdu 85 % de son contraste à 16 pixels et l'anneau fin 76 % : l'icône qui arrive dans l'onglet est un flou des formes prévues. Simplifie le dessin pour ces tailles, ou accepte que l'onglet montre une seule forme grasse.