Créer une favicon nette sur un écran Retina

Un unique petit favicon.ico suffisait autrefois pour tout le web. Ce n’est plus le cas depuis longtemps, et continuer à le traiter comme suffisant explique pourquoi tant d’icônes sont floues.

Par PulsarKit · Publié le 8 septembre 2026 · Mis à jour le 16 octobre 2026

Un petit fichier d’icône n’a jamais pu convenir à tous les écrans

Un onglet de navigateur, un raccourci sur l’écran d’accueil d’un téléphone et une icône d’application sur l’écran haute densité d’un ordinateur portable demandent chacun une taille de pixels différente. Un seul petit pictogramme étiré pour tout couvrir reste net à un endroit et devient flou partout ailleurs. Le favicon.ico classique, que les navigateurs continuent à demander à la racine d’un site, fait toujours partie de la solution. Mais il a été conçu pour un web où les écrans avaient une résolution bien plus faible qu’aujourd’hui et il n’a jamais été prévu comme l’unique fichier en jeu.

Pourquoi un jeu d’icônes complet contient autant de fichiers séparés

Un jeu d’icônes complet, comme celui que produit Générateur de favicon à partir d’une seule image, couvre plusieurs usages à la fois, et pas seulement plusieurs tailles pour un seul usage. Il y a des PNG de 16 et 32 pixels pour les onglets de navigateur en densité normale et élevée, une icône de 180 pixels pour l’ajout d’un site à l’écran d’accueil d’un iPhone, ainsi que des icônes de 192 et 512 pixels que le manifeste d’une application web progressive doit référencer avant que l’application puisse être installée. Chaque taille existe parce que quelque chose demande précisément cette taille. Ce n’est pas de la redondance pour la forme. En omettre une signifie que cette surface tombera sur un substitut plus flou ou qu’elle n’affichera rien du tout.

Le seul fichier qui ne peut pas rester transparent

iOS ne compose pas une icône transparente d’écran d’accueil au-dessus de quelque chose de raisonnable quand quelqu’un ajoute un site sur son téléphone. Il remplit chaque zone transparente de noir uni, donc un logo propre sur un arrière-plan transparent devient une tuile sombre et disgracieuse dès qu’il arrive sur l’écran d’accueil. L’icône prévue pour cet emplacement doit voir sa transparence aplatie sur une vraie couleur d’arrière-plan à l’avance, volontairement, au lieu de rester transparente comme les autres tailles de l’ensemble. Toutes les autres icônes peuvent garder la transparence là où l’image source en contient, car un onglet de navigateur ou un raccourci sur le bureau l’affiche correctement.

Pourquoi une source vectorielle donne une icône de 16 pixels plus nette

Un logo construit en SVG (un logo bitmap en aplats peut être vectorisé avec PNG en SVG) peut être rendu à neuf à chaque taille cible à partir de ses formes vectorielles, au lieu d’être généré une fois en grande taille puis réduit successivement pour chaque variante plus petite. La différence se voit surtout à la plus petite taille de la série. Un logo sous-échantillonné à partir d’une grande image bitmap maîtresse devient souvent pâteux à 16 pixels, et les traits fins ainsi que les détails disparaissent. Une version rendue à partir des tracés vectoriels à cette même petite taille garde des traits nets, car elle n’a jamais été une grande image réduite. Elle a été dessinée directement à cette taille, et c’est aussi pourquoi une icône isolée passe par SVG en PNG aux dimensions exactes en pixels plutôt que par un outil de redimensionnement. Pour un logo avec un mot-symbole fin ou un contour délicat, c’est la différence entre une icône reconnaissable dans la barre d’onglets et une tache grise.

Une icône « maskable » existe parce qu’Android ne respecte pas la forme de l’icône

Android recadre l’icône d’une application installée dans la forme qu’un appareil ou un lanceur particulier a choisie : cercle, carré arrondi, « squircle ». Il le fait sans tenir compte de la forme avec laquelle l’icône a été dessinée, donc une icône carrée ordinaire peut perdre des éléments importants sur les bords, uniquement selon la forme appliquée. Une icône maskable évite ce problème en gardant tout son contenu significatif dans environ les quatre-vingts pour cent centraux de l’image. Cela laisse une marge de sécurité sur chaque bord, que n’importe quelle forme peut recadrer sans supprimer d’élément important du design.

Les erreurs courantes : une source trop petite, et un jeu jamais relié aux pages

Un jeu d’icônes flou vient rarement du générateur. Chaque taille est construite à partir d’une image maîtresse de 512 pixels : toute source plus petite est donc étirée pour y arriver, et une source de moins de 260 pixels environ doit doubler de taille ou plus, si bien que les grandes tailles ressortent molles. Partez d’au moins 512 par 512, ou mieux d’un SVG ; une source de moins de 32 pixels est refusée d’emblée. La deuxième décision est la façon dont un logo non carré devient carré : recadrer au centre garde la marque grande mais peut couper un logotype large, tandis qu’intégrer toute l’image et compléter les côtés avec une couleur garde tout visible au prix d’une marque plus petite. Pour un logo bien plus large que haut, une version carrée avec le symbole seul est généralement une meilleure source que la composition complète. La troisième erreur survient après la génération. Les huit fichiers, neuf avec l’icône maskable, vont à la racine du site, et les balises de head-snippet.html vont dans le head de chaque page ; si les fichiers sont dans un sous-dossier, modifiez les valeurs href de l’extrait en conséquence, sinon les balises pointent vers des fichiers qui n’existent pas. Enfin, vérifiez l’icône de 16 pixels dans un vrai onglet de navigateur et non dans une visionneuse d’images : à cette taille, un contour fin ou un logotype devient une tache grise, et le remède est une marque plus simple, pas un export plus net.

Outils utilisés dans cet article

Générateur de faviconTransformez un seul logo en jeu complet de favicons : toutes les tailles PNG, un ICO multi-tailles, un manifeste et les balises HTML à coller dans votre head.

PNG en SVGVectorisez un PNG en SVG redimensionnable dans votre navigateur. Adapté aux logos et icônes plates avec peu de couleurs, pas aux photographies.

SVG en PNGRendez des fichiers SVG en PNG à n’importe quelle échelle ou à une taille exacte en pixels dans votre navigateur. Les scripts et liens externes sont supprimés avant tout affichage.