Tailles de favicon et code HTML (2026) : la liste courte | We.Inc
Les fichiers favicon dont un site a vraiment besoin en 2026 : favicon.ico, un SVG, une Apple touch icon de 180px et des icônes de manifest 192 et 512, avec des balises head à copier et un générateur de manifest.
Cinq fichiers couvrent presque tous les navigateurs et appareils : un favicon.ico de 32 par 32, une icône SVG pour les navigateurs modernes, un PNG apple-touch-icon de 180 par 180 pour les écrans d'accueil d'iPhone, et des PNG de 192 par 192 et 512 par 512 listés dans un manifest d'application web. La recherche Google demande une icône carrée, idéalement de plus de 48 pixels.
Le jeu de favicons qui vaut la peine d'être livré
Fichier
Taille
Utilisé par
Toutes (vectoriel)
Onglets des navigateurs modernes, net à toutes les tailles
Manifest d'application web, écrans d'installation et de démarrage
Les anciens guides de favicon listent vingt tailles ou plus pour des appareils que plus personne n'utilise. Aujourd'hui, le navigateur redimensionne à partir de quelques bons fichiers sources : il s'agit donc de choisir les cinq bons, d'écrire correctement les balises head et de vérifier que Google peut les explorer. Utilisez le générateur ci-dessous pour produire les balises et le manifest de votre propre site.
Concevez un modèle carré de 512 par 512 avec le logo centré et un peu de marge.
Exportez les cinq fichiers du tableau, ou créez-les avec notre générateur de favicon.
Remplissez le générateur avec le nom et la couleur de votre site, puis copiez les balises head et le manifest.
Envoyez les fichiers à la racine du site, collez les balises dans le head de chaque page et forcez le rechargement pour vérifier.
Testez la version 16 pixels seule ; le texte fin et les traits minces disparaissent à la taille d'un onglet, alors simplifiez le logo.
Ajoutez au SVG une media query pour le mode sombre afin qu'un logo foncé reste visible sur les onglets sombres.
Gardez la partie importante d'une icône maskable dans le cercle central, d'un rayon de 40% de la largeur, car Android peut rogner le reste.
Ne bloquez ni les fichiers d'icône ni votre page d'accueil dans robots.txt ; Google doit explorer les deux pour afficher votre favicon dans les résultats.
Les navigateurs mettent les favicons en cache de façon agressive, alors renommez le fichier ou ajoutez un paramètre de version quand vous le remplacez.
Questions fréquentes
Quelle est la meilleure taille de favicon ?
Il n'existe pas de taille idéale unique. Livrez un ICO de 32 par 32 pour la compatibilité et un SVG pour des onglets modernes bien nets, puis ajoutez l'icône Apple de 180 pixels et les icônes de manifest 192 et 512 pour les écrans d'accueil. La recherche Google demande une image carrée, d'au moins 8 pixels et de préférence plus grande que 48 par 48.
Comment ajouter un favicon à un site web ?
Placez les fichiers à la racine de votre site et ajoutez des balises link dans le head de chaque page : rel icon pour l'ICO et le SVG, rel apple-touch-icon pour le PNG de 180 pixels, et rel manifest qui pointe vers un fichier JSON listant les icônes 192 et 512. Le générateur de cette page écrit ces lignes pour vous.
Pourquoi mon favicon ne s'affiche-t-il pas dans Google ?
Google doit pouvoir explorer à la fois votre page d'accueil et le fichier d'icône, l'icône doit être carrée, et le lien doit se trouver dans le head de la page d'accueil. Les mises à jour peuvent mettre du temps à apparaître, car Google réexplore les favicons selon son propre calendrier.
Ai-je encore besoin de favicon.ico ?
Il vaut la peine de le garder. Certains outils, lecteurs de flux et anciens navigateurs demandent directement /favicon.ico sans lire votre HTML, et un petit ICO à la racine leur répond.
Qu'est-ce qu'une icône maskable ?
Une icône de manifest marquée avec purpose maskable, dessinée avec une marge supplémentaire pour qu'Android puisse la rogner en cercle, en squircle ou en une autre forme. Gardez le logo dans la zone de sécurité centrale et remplissez le fond d'un bord à l'autre.
Pourquoi la liste a raccourci
Les navigateurs choisissent désormais l'icône la plus proche et la redimensionnent, et le format SVG permet à un seul fichier de servir toutes les tailles d'onglet. Les nombreuses anciennes tailles pour les tuiles Windows et Apple concernaient des plateformes qui ont depuis évolué.
La documentation Safari d'Apple décrit encore des touch icons par appareil, mais iOS se rabat sur une icône plus grande quand aucune ne correspond exactement, donc un seul PNG de 180 pixels couvre bien les iPhone et iPad actuels.
Les icônes du manifest
Selon web.dev, les navigateurs Chromium ont besoin d'au moins une icône de 192 pixels et une de 512 pixels dans le manifest avant qu'un site puisse être installé. Avec ces deux-là, Chrome adapte automatiquement pour les autres densités.
Chaque icône du manifest peut avoir un purpose any, maskable ou monochrome. Utilisez un fichier séparé pour maskable, car la marge adaptée à une forme rognée paraît trop petite quand l'icône est affichée en carré.
Faire apparaître le favicon dans les résultats de recherche
La recherche Google affiche un favicon à côté des résultats quand elle en trouve un sur votre page d'accueil. Les valeurs rel prises en charge sont icon, shortcut icon, apple-touch-icon et apple-touch-icon-precomposed.
Google accepte aussi plusieurs formats, dont ICO, PNG, GIF et JPEG. Le fichier d'icône peut même se trouver sur un autre domaine, tant que Googlebot est autorisé à le récupérer.
Pointe vers le fichier JSON qui liste les icônes d'installation
<meta name="theme-color" content="#4F98FB">
Colore l'interface du navigateur sur les navigateurs mobiles compatibles
Code de favicon à copier
Balises head pour le jeu de cinq fichiers
Collez-les dans le head de chaque page. L'attribut sizes sur l'ICO empêche certains navigateurs de le préférer au SVG.
Manifest avec icônes standard et maskable
Deux icônes standard plus une copie maskable avec marge. Le champ type permet aux navigateurs d'ignorer les formats qu'ils ne savent pas utiliser.
Favicon SVG qui s'adapte au mode sombre
Un bloc style dans le SVG change le remplissage quand le navigateur est en mode sombre, pour que le logo ne disparaisse jamais sur un onglet sombre.
Copier
Boulangerie du Port
Site
Mon site
PNG 192 et 512
PNG maskable 512
Sans les icônes 192 et 512, les navigateurs Chromium ne proposeront pas d'installer le site.
Générateur de code favicon
Saisissez le nom de votre site et sa couleur de thème, choisissez les fichiers dont vous disposez, puis copiez les balises head et le manifest correspondants.