Choisir les bonnes dimensions de favicon est essentiel pour obtenir une icône nette et professionnelle sur chaque appareil. Ce guide complet guide des tailles de favicon couvre toutes les dimensions dont vous avez besoin en 2026—de l'icône classique d'onglet de navigateur 16×16 à l'icône PWA maskable 512×512—ainsi que les formats et les bonnes pratiques qui gardent votre marque nette sur toutes les plateformes.
Pourquoi la taille du favicon est importante
Les favicons sont affichés à de nombreuses tailles dans les navigateurs, les systèmes d'exploitation et les écrans d'accueil. Un seul fichier source ne peut pas satisfaire tous les contextes, car chaque plateforme demande une dimension spécifique. Si vous ne fournissez qu'une seule taille, les navigateurs l'agrandiront ou la réduiront—produisant souvent des résultats flous ou rognés qui affaiblissent votre marque.
Fournir les bonnes dimensions de favicon pour chaque plateforme garantit que l'image est rendue à sa résolution native, ce qui signifie des bords nets, des couleurs précises et une transparence fiable. Ce guide répertorie toutes les tailles qu'il vaut la peine de générer et explique où chacune est utilisée afin que vous puissiez livrer un ensemble complet en toute confiance.
Référence complète des tailles de favicon
Le tableau ci-dessous répertorie les tailles de favicon que les sites web modernes devraient livrer en 2026, le format utilisé par chacune et la plateforme qui la consomme. Utilisez-le comme votre référence unique lors de la préparation d'un ensemble.
| Taille | Format | Utilisé pour |
|---|---|---|
| 16×16 | ICO / PNG | Onglet de navigateur classique, prise en charge héritée |
| 32×32 | ICO / PNG | Onglet de navigateur standard sur écrans retina |
| 48×48 | ICO | Barre des tâches Windows, certaines vues de favoris |
| 64×64 | PNG | Barre d'adresse du navigateur sur écrans à haute densité de pixels |
| 96×96 | PNG | Favoris et raccourcis de bureau |
| 120×120 | PNG | Écrans d'accueil Android plus anciens |
| 152×152 | PNG | Icône tactile iPad (héritée) |
| 167×167 | PNG | Icône tactile iPad Pro |
| 180×180 | PNG | apple-touch-icon iPhone (actuelle) |
| 192×192 | PNG | Écran d'accueil Android Chrome, PWA |
| 512×512 | PNG | Écran de démarrage PWA, icône maskable |
Les tailles essentielles à générer
Bien que la liste complète ci-dessus soit exhaustive, un ensemble rationalisé couvre la grande majorité des utilisateurs. Notre générateur de favicon produit cet ensemble essentiel à partir d'un seul téléversement :
- 16×16 et 32×32—les tailles indispensables pour les onglets de navigateur de bureau sur écrans standard et retina.
- 48×48—incluses dans le fichier ICO pour l'affichage dans la barre des tâches Windows et les favoris hérités.
- 180×180—l'apple-touch-icon requis par iOS pour les raccourcis d'écran d'accueil.
- 192×192 et 512×512—les tailles Android et PWA déclarées dans votre manifeste web.
Avec une version SVG pour les navigateurs modernes, cet ensemble couvre pratiquement tous les appareils qu'un visiteur pourrait utiliser en 2026. Vous n'avez pas besoin de suivre manuellement chaque taille héritée—le générateur les regroupe pour vous.
Comparaison des formats de favicon
La taille ne représente que la moitié de l'équation ; le format détermine la compatibilité et le poids du fichier. La comparaison ci-dessous résume les trois formats que vous devriez livrer ensemble :
| Format | Résolution | Taille du fichier | Idéal pour |
|---|---|---|---|
| ICO | Fixe (conteneur multi-tailles) | Petit à moyen | Navigateurs obsolètes, solution de repli /favicon.ico |
| PNG | Fixe (une taille par fichier) | Petit | Navigateurs modernes, apple-touch-icon, Android |
| SVG | Vectoriel (indépendant de la résolution) | Minuscule | Safari, Chrome, icônes adaptées au mode sombre |
Le SVG est particulièrement précieux en 2026 car il s'adapte parfaitement à toute densité de pixels et peut inclure des media queries qui s'adaptent automatiquement au mode sombre. Notre générateur produit automatiquement un SVG lorsque vous téléversez une source vectorielle, ce qui en fait le format le plus pérenne de votre pack.
Exigences de taille par plateforme
Navigateurs de bureau
Les navigateurs de bureau tels que Chrome, Firefox, Safari et Edge demandent des favicons en 16×16 et 32×32 pixels. Sur les écrans Retina, la variante 32×32 est utilisée pour l'onglet. Le format ICO peut regrouper les deux tailles dans un seul fichier, c'est pourquoi fournir /favicon.ico reste une bonne pratique encore aujourd'hui—il sert de solution de repli automatique.
Apple iOS et iPadOS
Les appareils Apple ignorent le lien favicon standard lorsqu'un site est ajouté à l'écran d'accueil. Ils recherchent à la place un PNG 180×180 déclaré avec rel=”apple-touch-icon”. Sans ce fichier, iOS utilisera une capture d'écran de la page ou une icône générique, ce qui paraît peu professionnel et nuit à la cohérence de la marque sur la plateforme mobile la plus populaire.
Android et applications web progressives
Android Chrome et les installateurs PWA lisent les icônes à partir d'un manifeste d'application web. Les deux tailles requises sont 192×192 et 512×512. La variante 512×512 est également utilisée pour l'écran de démarrage PWA. Pour les icônes maskables—celles qui s'adaptent aux différentes formes d'icônes Android—vous devez marquer le PNG 512×512 comme “purpose”:”maskable” dans le manifeste.
Bonnes pratiques pour le dimensionnement des favicons
Suivez ces bonnes pratiques pour garder votre favicon net à toutes les tailles et sur toutes les plateformes :
- Commencez grand. Générez à partir d'une source de 512×512 ou plus afin que chaque réduction reste nette.
- Fournissez toutes les tailles. Fournissez 16, 32, 48, 180, 192 et 512 plus le SVG pour une couverture complète.
- Gardez /favicon.ico à la racine. Les navigateurs utilisent cette URL par défaut lorsqu'aucune balise link n'est présente.
- Testez en 16×16. Si votre design tient à la plus petite taille, il sera beau partout.
- Utilisez le vectoriel quand c'est possible. Le SVG s'adapte à toute résolution et prend en charge le mode sombre.
Comment générer toutes les tailles en une fois
Produire toutes ces tailles manuellement serait fastidieux. Notre générateur de favicon se charge du travail pour vous en quatre étapes simples :
- Téléversez une image source carrée de 512×512 ou plus.
- Vérifiez les aperçus en direct en 16×16, 32×32 et 180×180.
- Cliquez sur créer pour télécharger un ZIP contenant toutes les tailles et formats ci-dessus.
- Copiez les balises link HTML et le manifeste inclus dans votre site.
L'ensemble du processus prend moins d'une minute et produit un pack qui satisfait toutes les plateformes couvertes dans ce guide. Vous n'avez jamais à vous rappeler quelle taille va où—le générateur nomme correctement chaque fichier et fournit les balises link correspondantes.
Questions fréquemment posées
Quelle est la taille standard d'un favicon pour un site web ?
La taille standard de favicon la plus courante est 32×32 pixels pour l'onglet du navigateur, avec une solution de repli 16×16 dans un fichier ICO. Les sites modernes devraient aussi fournir 180×180 pour iOS et 192×192 plus 512×512 pour Android et l'usage PWA.
Quelle taille doit avoir mon image source ?
Utilisez une image source carrée d'au moins 512×512 pixels. Une source plus grande permet au générateur de réduire proprement à chaque taille requise, gardant votre favicon net sur les écrans Retina et les écrans mobiles à haute densité.
Quelle est la taille de l'apple-touch-icon ?
La taille actuelle de l'apple-touch-icon est 180×180 pixels. iOS utilise ce PNG pour les raccourcis d'écran d'accueil et ignore le lien favicon standard, il doit donc être déclaré avec rel=”apple-touch-icon” dans votre HTML.
Quelles tailles Android exige-t-il pour les favicons ?
Android Chrome et les applications web progressives exigent des icônes PNG 192×192 et 512×512 déclarées dans un manifeste d'application web. L'icône 512×512 doit être marquée maskable afin qu'Android puisse l'adapter aux différentes formes d'écran d'accueil.
Dois-je utiliser SVG ou PNG pour mon favicon ?
Utilisez les deux. Le SVG s'adapte parfaitement et prend en charge le mode sombre dans les navigateurs modernes, tandis que le PNG garantit la compatibilité avec iOS, Android et les navigateurs plus anciens. Fournir les trois formats—ICO, PNG et SVG—garantit que votre favicon est net partout.
Comment les tailles affectent les performances et le chargement
Servir la bonne taille de favicon n'est pas seulement une question visuelle—cela affecte aussi la rapidité de chargement de votre site. Lorsqu'un navigateur demande une icône d'onglet 32×32 et que vous servez un PNG 512×512 à la place, le visiteur télécharge bien plus d'octets que nécessaire pour un minuscule élément à l'écran. Sur de nombreux chargements de page et de nombreux visiteurs, cette bande passante gaspillée s'accumule. En fournissant chaque taille comme fichier séparé et en les déclarant avec l'attribut sizes correct dans vos balises link, vous laissez le navigateur choisir automatiquement le plus petit fichier approprié. Le résultat est un premier rendu plus rapide et un profil de page plus léger, ce qui compte à la fois pour l'expérience utilisateur et les Core Web Vitals en 2026. Le générateur gère cette optimisation pour vous en nommant et dimensionnant chaque fichier avec précision.
Générez toutes les tailles de favicon maintenant
Vous n'avez plus besoin de vous rappeler quelle taille chaque plateforme souhaite. Téléversez une image carrée dans notre générateur et téléchargez un pack complet couvrant chaque dimension et format décrits dans ce guide, avec le HTML prêt à coller et un manifeste. C'est la façon la plus simple de satisfaire chaque navigateur et appareil en 2026. Que vous teniez à la netteté sur un onglet Retina, à un raccourci d'écran d'accueil propre sur iOS, ou à un écran de démarrage PWA parfait, un seul téléchargement couvre tout.
