Vérificateur et analyseur de favicon gratuit
Analysez les déclarations de favicon dans le head HTML. Détectez les tailles manquantes et les bonnes pratiques. Gratuit, rapide et fonctionne entièrement dans votre navigateur, sans inscription.
Mis à jour le
Favicon Checker & Analyzer
Analyze favicon declarations in your HTML head. Find missing sizes and get best-practice recommendations.
Paste HTML Head Section
Copy the <head> section from your webpage source (Ctrl/Cmd+U to view page source), paste it below, and click Analyze.
Favicon Best Practices
A complete favicon setup typically includes:
/favicon.ico— 16×16 + 32×32 combined, for legacy browsersfavicon-16x16.png+favicon-32x32.png— modern browsersapple-touch-icon.pngat 180×180 — iOS home screenandroid-chrome-192x192.png+512x512.png— Android + PWAsite.webmanifest— PWA manifest with icon declarationsmeta name="theme-color"— browser UI color on mobile
Tools like RealFaviconGenerator.net can generate all sizes from a single source image.
Related Tools
Questions Fréquentes
Qu'est-ce que le Favicon Checker & Analyzer ?
Le Favicon Checker & Analyzer est un outil en ligne gratuit qui analyse les déclarations de favicon dans le head du HTML et vérifie les tailles manquantes ainsi que les bonnes pratiques. Il fonctionne entièrement dans votre navigateur, sans installation ni inscription.
Quelles tailles de favicon devrais-je avoir ?
Recommandées : 16x16, 32x32, 180x180 (Apple Touch Icon) et un manifeste web avec 192x192 et 512x512.
Comment l'utiliser ?
Collez la section <head> de votre HTML et l'outil extraira et analysera toutes les déclarations de favicon.
Est-ce gratuit ?
Oui, entièrement gratuit.
Mes données sont-elles en sécurité avec cet outil ?
Absolument. Le Favicon Checker & Analyzer traite tout côté client, dans votre navigateur. Aucune donnée n'est téléversée ni stockée sur un serveur. Votre contenu reste privé sur votre appareil à tout moment.
Le Favicon Checker & Analyzer fonctionne-t-il sur les appareils mobiles ?
Oui, le Favicon Checker & Analyzer est entièrement responsive et fonctionne sur les smartphones et tablettes. Vous pouvez l'utiliser sur tout appareil doté d'un navigateur web moderne, sans aucun téléchargement d'application.
Dois-je créer un compte pour utiliser cet outil ?
Aucun compte ni inscription n'est nécessaire. Ouvrez simplement le Favicon Checker & Analyzer dans votre navigateur et commencez à l'utiliser immédiatement. Il n'y a ni page d'inscription ni restriction d'utilisation.
Quels navigateurs sont pris en charge ?
Le Favicon Checker & Analyzer fonctionne dans tous les navigateurs modernes, dont Chrome, Firefox, Safari, Edge et Opera. Pour une expérience optimale, utilisez la dernière version de votre navigateur préféré.
Pourquoi un favicon nécessite-t-il autant de fichiers différents au lieu d'un seul ?
Parce qu'aucun fichier unique ne satisfait toutes les plateformes. Les navigateurs de bureau lisent de petits PNG ou un .ico pour l'onglet et la barre de favoris, iOS utilise une icône tactile Apple séparée en 180×180 lorsqu'un utilisateur enregistre votre site sur son écran d'accueil, et Android ainsi que les PWA récupèrent leurs icônes de lancement (192×192 et 512×512) depuis un manifeste web plutôt que depuis une balise link. Une meta theme-color teinte ensuite l'interface du navigateur mobile. Chaque plateforme regarde une déclaration différente, donc une configuration solide combine un repli /favicon.ico historique, des PNG modernes en 16×16 et 32×32, une icône tactile Apple, un manifeste et une couleur de thème. Manquez-en une et cette plateforme se rabat silencieusement sur une image vierge ou recadrée. Collez votre section head dans l'analyseur pour voir lesquelles de ces six déclarations vous avez réellement et lesquelles font défaut.
Quelle est la différence entre rel="icon" et rel="apple-touch-icon" ?
Ils ciblent des contextes différents. Un lien avec rel="icon" (ou l'ancien rel="shortcut icon") fournit la petite icône affichée dans les onglets, favoris et historique des navigateurs de bureau, généralement déclarée en 16×16 et 32×32 avec un repli .ico. Un lien avec rel="apple-touch-icon" est lu par Safari et iOS lorsqu'un utilisateur ajoute votre page à son écran d'accueil ; il doit s'agir d'un unique PNG en 180×180 sans transparence, car iOS ajoute lui-même des coins arrondis. Utiliser l'un à la place de l'autre laisse un vide : omettez l'apple-touch-icon et les raccourcis d'écran d'accueil afficheront une capture d'écran recadrée au lieu de votre logo. L'analyseur liste chaque lien d'icône détecté avec son rel, href, sizes et type, et signale séparément les icônes de bureau et l'icône tactile Apple afin que vous puissiez vérifier que chacune est correctement déclarée.
Comment l'analyseur trouve-t-il les balises de favicon si je ne colle qu'une partie de mon HTML ?
L'outil scanne le balisage que vous lui fournissez à la recherche de balises porteuses d'icônes, qu'il s'agisse du code source complet de la page ou seulement de la section head. Il repère chaque <link> dont le rel contient icon, apple-touch-icon, manifest, shortcut ou mask-icon, ainsi que chaque <meta> pour theme-color, msapplication-TileImage ou msapplication-TileColor. Pour chacune, il extrait le rel ou le name, le href ou le content, le sizes et le type, puis les liste dans un tableau. Il ne récupère pas les fichiers image référencés et ne charge pas une URL en direct, c'est pourquoi il lit sans problème le balisage de sites de préproduction, de pages protégées par mot de passe ou de fichiers HTML locaux. Pour un résultat le plus complet possible, collez tout votre <head>, car c'est là que vivent les déclarations de favicon. Déposez votre balisage et l'analyseur signale en quelques secondes chaque balise d'icône détectée.
Un manifeste web est-il nécessaire pour qu'un simple favicon fonctionne ?
Non, un favicon de base fonctionne sans manifeste. Les navigateurs afficheront une icône d'onglet à partir d'un simple lien rel="icon" ou d'un /favicon.ico, et Safari utilisera un apple-touch-icon, aucun de ces éléments ne dépendant d'un manifeste. Le manifeste devient important lorsque vous voulez qu'Android Chrome et les applications web progressives affichent une véritable icône de lancement, car ces plateformes lisent leurs icônes en 192×192 et 512×512 depuis le site.webmanifest plutôt que depuis des balises link. Sans lui, un raccourci d'écran d'accueil Android se rabat sur une icône générique ou basée sur une lettre. Un manifeste est donc facultatif pour un simple favicon d'onglet mais attendu pour une configuration complète et prête à l'installation, ce qui explique pourquoi l'analyseur signale un manifeste manquant comme une lacune plutôt qu'une erreur bloquante. Passez votre section head dans l'outil pour vérifier si votre manifeste et votre theme-color sont présents.
Pourquoi mon favicon ne s'affiche-t-il pas alors que la balise link est bien présente dans le head ?
Une balise correcte n'est que la moitié de l'histoire. Les causes les plus fréquentes sont un chemin href erroné, ce qui fait que le navigateur demande un fichier renvoyant une erreur 404 ; une mise en cache agressive du navigateur, où l'ancienne icône ou une icône vide persiste longtemps après la mise à jour du fichier ; ou le fichier image lui-même étant malformé ou dans un format que le navigateur ne peut pas rendre. Déclarer des sizes qui ne correspondent pas à l'image réelle, ou faire pointer rel="icon" vers un fichier qui n'existe plus, produit le même résultat vide. Cet analyseur vérifie les déclarations présentes dans votre balisage, pas les fichiers sur votre serveur, donc il confirme si les balises et les tailles sont présentes et bien formées, puis signale ce qui manque. Collez d'abord votre head ici pour écarter les problèmes de balise, puis vérifiez que chaque href se charge réellement et essayez une actualisation forcée pour vider le cache.
Embed This Tool
Add a free, live version of this widget to your own website or blog post — it runs entirely in your visitors' browsers, with a credit link back to The Toolbox.
<iframe src="https://getthetoolbox.com/embed/favicon-checker" title="Free Favicon Checker & Analyzer — The Toolbox" width="100%" height="280" style="max-width:480px;border:1px solid #e2e8f0;border-radius:12px" loading="lazy"></iframe>
<p style="font-size:12px;margin:4px 0 0"><a href="https://getthetoolbox.com/website-tools/favicon-checker?utm_source=embed&utm_medium=widget" target="_blank" rel="noopener">Free Favicon Checker & Analyzer</a> by The Toolbox</p>Outils Associés
Test de vitesse de site web gratuit
Analysez le temps de chargement des pages, les indicateurs de performance et les pistes d'optimisation de votre site web. Gratuit, rapide et fonctionne entièrement dans votre navigateur, sans inscription.
Test de compatibilité mobile gratuit
Vérifiez si votre site est optimisé pour les appareils mobiles. Gratuit, rapide et fonctionne entièrement dans votre navigateur, sans inscription.
Extracteur de balises meta gratuit
Extrayez et examinez toutes les balises meta de n'importe quelle page web pour l'analyse SEO et réseaux sociaux. Gratuit, rapide et entièrement dans votre navigateur, sans inscription.
Outil de capture d'écran de site web gratuit
Capturez des captures d'écran pleine page ou de la fenêtre de n'importe quelle page web pour la revue de design et les tests. Gratuit, rapide et entièrement dans votre navigateur, sans inscription.
À propos du Vérificateur & Analyseur de Favicon
Le Vérificateur & Analyseur de Favicon est un outil gratuit qui audite la configuration du favicon déclarée dans le <head> HTML d'une page. Collez la section head de n'importe quelle page web, et l'outil extrait chaque balise <link> et <meta> liée aux icônes, liste précisément ce qu'il a trouvé, et note la configuration par rapport aux tailles et formats attendus par les navigateurs modernes. Il s'adresse aux développeurs front-end, aux spécialistes SEO et aux propriétaires de sites qui veulent s'assurer que leur favicon s'affiche correctement dans les onglets du navigateur, les favoris, les écrans d'accueil mobiles et les résultats de recherche — sans avoir à deviner quelles balises manquent.
Un favicon est la petite icône qu'un navigateur affiche dans l'onglet, la barre de favoris et l'historique. Un favicon « complet » n'est aujourd'hui plus un fichier unique : chaque plateforme lit des déclarations différentes, donc une configuration solide combine un .ico historique, des tailles PNG modernes, une icône tactile Apple, un manifeste web Android et une indication de couleur de thème. Cet outil rend ces lacunes visibles en un coup d'œil.
Ce que l'analyseur vérifie
Une fois votre balisage collé, l'outil recherche les balises porteuses d'icônes et les évalue selon six bonnes pratiques, marquant chacune comme validée, en avertissement ou manquante :
- Repli favicon.ico — un
rel="icon"oushortcut iconpointant vers un fichier.ico, toujours l'option de secours la plus sûre pour les navigateurs anciens. - Icône 32×32 — la taille standard haute densité pour l'onglet et les favoris sur navigateur de bureau.
- Icône 16×16 — la taille classique des petits onglets, déclarée avec
sizes="16x16". - Icône tactile Apple (180×180) —
rel="apple-touch-icon", utilisée lorsqu'un utilisateur ajoute votre site à l'écran d'accueil iOS. - Manifeste d'application web —
rel="manifest", qui fournit les icônes Android et PWA (généralement 192×192 et 512×512). - Meta couleur de thème —
<meta name="theme-color">, qui teinte l'interface du navigateur sur mobile.
L'outil relève également d'autres déclarations connexes rencontrées en chemin, comme les liens mask-icon et les balises meta msapplication-TileImage et msapplication-TileColor utilisées par les anciennes tuiles Windows.
Comment l'utiliser
Ouvrez votre page dans un navigateur, affichez le code source avec Ctrl+U (ou Cmd+U sur Mac), copiez la section <head>, collez-la dans le champ, puis cliquez sur Analyser. L'outil analyse le balisage et renvoie trois éléments : un score de complétude indiquant combien de vérifications sont passées, une liste de chaque déclaration de favicon détectée (type de balise, rel, href, sizes et type), et des recommandations précises. Chaque élément manquant est accompagné de la balise exacte à ajouter — par exemple, <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> — afin que vous puissiez copier le correctif directement dans votre modèle.
Comme l'analyseur lit le balisage que vous collez plutôt que de récupérer une URL en direct, il fonctionne aussi bien sur des pages de préproduction, des sites protégés par mot de passe et des fichiers HTML locaux. Tout s'exécute dans votre navigateur ; rien de ce que vous collez n'est téléversé, stocké, ni envoyé à un serveur, et aucune inscription n'est requise.
Pourquoi une configuration de favicon complète est importante
Un favicon manquant ou mal formé est un signal de qualité discret mais persistant. Les navigateurs se rabattent alors sur une icône de document vierge, ce qui rend votre onglet plus difficile à repérer parmi de nombreux onglets ouverts et donne une impression d'inachevé face à des concurrents mis en favoris. Sur mobile, l'absence d'icône tactile Apple ou de manifeste fait qu'un raccourci d'écran d'accueil affiche une capture d'écran recadrée au lieu de votre logo, et les applications web progressives Android perdent totalement leur icône de lancement.
Une configuration prête pour la production type comprend /favicon.ico (16×16 et 32×32 combinés pour les navigateurs anciens), des fichiers séparés favicon-16x16.png et favicon-32x32.png pour les navigateurs modernes, un apple-touch-icon.png en 180×180, des PNG en 192×192 et 512×512 référencés depuis un site.webmanifest, et une balise meta theme-color. Passez votre section head dans l'analyseur après toute refonte ou migration de framework — ces balises disparaissent facilement lors d'une reconstruction, et cette vérification détecte les lacunes avant que vos utilisateurs ne le fassent.