Article

Créer un favicon à partir d'un PNG

Un favicon est un petit graphique que les navigateurs affichent dans les onglets, les favoris et l'historique. Bien le produire va au-delà d'un simple redimensionnement de logo : le format .ico regroupe plusieurs résolutions dans un seul fichier, les navigateurs modernes préfèrent le PNG, les appareils mobiles ont leur propre apple-touch-icon, et les manifestes d'application web nécessitent un jeu d'icônes dédié. Cet article détaille chaque élément et explique comment produire l'ensemble complet à partir d'un seul PNG source.

Rédigé par Bastien Sulyan · Publié le 29 juin 2026

Ce qu'est un favicon et où les navigateurs l'affichent

Le mot favicon est la contraction de "favorite icon". Les navigateurs l'ont d'abord affiché dans la barre d'adresse avec Internet Explorer 5 (1999), puis l'ont adopté pour les favoris. Il apparaît aujourd'hui dans les onglets du navigateur, la barre des favoris, l'historique de navigation, la page nouvel onglet de certains navigateurs, et les barres des tâches des systèmes d'exploitation quand un site est épinglé. Sur mobile, si un utilisateur ajoute un site à son écran d'accueil, l'appareil utilise une image associée mais distincte appelée apple-touch-icon plutôt que le favicon standard. Les moteurs de recherche affichent parfois les favicons à côté des résultats dans leur interface. Le graphique est petit par conception, ce qui le rend efficace pour une identification visuelle rapide mais aussi exigeant à bien produire : à 16x16 pixels, un logo détaillé devient une tache indistincte. Le fichier favicon lui-même a traversé plusieurs formats au fil des décennies, le .ico restant le plus compatible et le PNG étant désormais le format moderne par défaut pour la plupart des navigateurs.

Le conteneur .ico : plusieurs résolutions dans un seul fichier

Le format .ico est un conteneur, pas une image unique. Un seul fichier .ico peut contenir plusieurs images bitmap à différentes résolutions, chacune stockée comme une entrée distincte dans un index en début de fichier. Les trois tailles les plus courantes sont 16x16, 32x32 et 48x48 pixels. Quand Windows affiche un favicon dans l'Explorateur ou dans la barre des tâches, il choisit l'entrée qui correspond le mieux au contexte d'affichage. Les anciennes versions de Windows nécessitaient une entrée 48x48 pour les emplacements haute densité de la barre des tâches. Les navigateurs demandent le favicon en 16x16 pour les onglets, mais peuvent utiliser une entrée plus grande si un écran haute densité est détecté. Regrouper les trois tailles dans un seul fichier .ico signifie qu'une seule requête HTTP couvre tous les cas d'usage. Les distribuer comme des PNG séparés est également valide, mais nécessite des balises link supplémentaires et ajoute des requêtes HTTP. Les images internes d'un fichier .ico sont des données BMP ou PNG standard, donc le conteneur n'ajoute qu'un faible overhead d'en-tête par entrée.

Concevoir pour les petites tailles : simplifier le pictogramme

À 16x16 pixels, vous disposez de 256 pixels au total. Un logotype typique avec une partie textuelle ou des détails fins devient illisible à cette taille. L'approche standard consiste à créer un pictogramme simplifié : une seule lettre, une forme abstraite ou une icône qui représente la marque sans dépendre du détail. Quelques problèmes spécifiques à anticiper : les traits fins disparaissent entièrement aux petites tailles, surtout sur les écrans non-retina. Les paires de lettres et les détails en espace négatif se fondent en un bruit gris. Les dégradés deviennent à peine visibles. Le contraste élevé entre le pictogramme et son arrière-plan est le facteur le plus déterminant pour la lisibilité. Une forme pleine sur un fond uni se lit presque toujours mieux qu'une illustration détaillée en 16x16. Les tailles 32x32 et 48x48 sont plus indulgentes et peuvent supporter un peu plus de détail, mais la version 16x16 doit être traitée comme la contrainte déterminante. Si le pictogramme ne se lit toujours pas en 16x16, le design doit être davantage simplifié.

L'ensemble moderne : .ico, PNG, apple-touch-icon, manifeste et balises HTML

Une configuration favicon complète pour un site public nécessite actuellement cinq éléments. D'abord, un favicon.ico à la racine du site (les navigateurs le demandent directement sans balise link comme repli). Ensuite, un PNG 32x32 pour les navigateurs desktop modernes, déclaré avec : `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. Puis un PNG 16x16 pour la taille des onglets : `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. Ensuite, un apple-touch-icon de 180x180 pixels pour les favoris sur écran d'accueil iOS : `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. Enfin, un manifeste d'application web (site.webmanifest) avec un PNG 192x192 et un PNG 512x512 pour Android et les applications web progressives. La transparence est supportée dans les PNG et dans les entrées encodées en PNG à l'intérieur du .ico, mais l'apple-touch-icon doit avoir un fond opaque car iOS ignore le canal alpha et remplit les zones transparentes en noir.

En local : favicon-generator garde votre image sur votre appareil

Le favicon-generator de ce site prend un PNG et produit l'ensemble complet : un favicon.ico multi-résolution regroupant des entrées 16x16, 32x32 et 48x48, les tailles PNG individuelles pour un usage direct avec des balises link, et l'apple-touch-icon 180x180. Tout cela se passe dans votre navigateur via l'API Canvas et un encodeur .ico en JavaScript. Votre image source n'est jamais envoyée nulle part ; elle reste sur votre appareil. C'est important quand le fichier source est un logo d'entreprise ou tout autre actif qui ne doit pas quitter votre machine avant que vous ne contrôliez où il va. Chaque fichier généré est proposé en téléchargement individuel, avec les noms conventionnels. Vous les copiez à la racine de votre site et ajoutez les balises link correspondantes dans le head de votre HTML. Si votre logo source contient des détails fins qui ne survivent pas au rendu 16x16, vous pouvez le recadrer ou le simplifier avant de le déposer dans le générateur, ou fournir une image source différente spécialement préparée pour le favicon.

Outils mentionnés dans cet article

Questions fréquentes

Ai-je encore besoin d'un favicon.ico si je déclare des balises link PNG ?

Oui, pour deux raisons. D'abord, les navigateurs qui ne lisent pas votre HTML (robots d'exploration, lecteurs RSS, certains anciens navigateurs mobiles) cherchent /favicon.ico directement à la racine du domaine. Si ce fichier est absent, ils génèrent une requête 404 à chaque chargement de page, ce qui ajoute du bruit dans vos journaux serveur et un aller-retour inutile. Ensuite, les anciennes versions d'Internet Explorer ne reconnaissent que le format .ico et ignorent les balises link PNG. Fournir les deux couvre tous les cas.

Puis-je utiliser un SVG comme favicon ?

Chrome et Firefox prennent en charge les favicons SVG via `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari ne supporte pas les favicons SVG. Comme les favicons SVG sont indépendants de la résolution, ils s'affichent nettement sur tout type d'écran, y compris les écrans retina, sans nécessiter plusieurs variantes de taille. La recommandation pratique est de déclarer la balise link SVG pour les navigateurs qui la supportent, tout en conservant le repli .ico pour une couverture complète. Les favicons SVG peuvent également inclure une media query `prefers-color-scheme` pour basculer automatiquement entre une version claire et sombre.

Quelle image fournir pour obtenir le meilleur résultat ?

Un PNG carré de 512x512 pixels ou plus avec un fond transparent offre le plus de flexibilité. Partir d'une grande taille et réduire préserve plus de détail que partir d'une petite image. Si votre logo principal comporte une partie textuelle, envisagez de préparer une version simplifiée séparée montrant uniquement l'icône ou le pictogramme, car le texte ne sera pas lisible en 16x16 quelle que soit la résolution source. Le contraste élevé entre le pictogramme et son arrière-plan est le facteur le plus fiable pour prédire si les petites tailles seront lisibles.