Favicon Checker

Un favicon est la petite icône qu'un navigateur affiche à côté du titre de votre page dans les onglets, les signets, les listes d'historique et les raccourcis d'écran d'accueil. Le nom est l'abréviation de « favorite icon », inventée par Microsoft en 1999 quand IE 5 a introduit /favicon.ico à la racine du site. Aujourd'hui, le favicon comprend six fichiers, pas un. Les navigateurs desktop utilisent un PNG 32x32 ou SVG. iOS utilise un PNG 180x180 via apple-touch-icon. Android récupère des PNG 192x192 et 512x512 à partir de manifest.json. Les onglets épinglés Safari utilisent un SVG monochrome via mask-icon. Le /favicon.ico hérité est la solution de secours lorsque rien d'autre n'est déclaré. Une configuration complète donne à chaque appareil la bonne taille et le bon format, garde votre marque nette à toute échelle, et évite l'espace réservé générique du globe que les plates-formes mobiles rendent lorsque les icônes sont manquantes ou mal dimensionnées.

Un vérificateur de favicon récupère le HTML de n'importe quelle URL, analyse chaque balise de lien de la famille favicon, et rapporte quelles icônes sont déclarées, leurs tailles, formats, et si les URLs se résolvent. Il parcourt le head pour <link rel="icon">, <link rel="shortcut icon">, <link rel="apple-touch-icon">, <link rel="mask-icon"> et <link rel="manifest">, puis sonde /favicon.ico à la racine du domaine en tant que solution de secours. Il groupe les résultats par appareil cible pour que vous voyiez ce que chaque navigateur Chrome desktop, Safari iOS, Chrome Android et onglets épinglés Safari rendent. Lancez ce test de favicon avant chaque déploiement pour attraper les variantes manquantes, les URLs cassées, et les mauvaises tailles en moins de trois secondes. Le résultat signale également si le manifest.json lui-même retourne 200 et si le tableau icons à l'intérieur pointe vers des fichiers réels, ce qui est où la plupart des bogues spécifiques à Android se cachent.

L'ensemble moderne est 16x16, 32x32, 180x180, 192x192 et 512x512. Les PNG 16x16 et 32x32 gèrent les onglets du navigateur desktop et la barre d'adresse. Les navigateurs choisissent la correspondance la plus proche de la taille rendue, donc livrer les deux prévient la mise à l'échelle. Le PNG 180x180 est l'apple-touch-icon utilisé par iOS pour les tuiles d'écran d'accueil. Les tailles plus petites sont mises à l'échelle et semblent floues sur les affichages Retina. Les PNG 192x192 et 512x512 se trouvent dans manifest.json pour les écrans d'accueil Android et les écrans de démarrage PWA. Les guides plus anciens recommandent dix tailles ou plus (57x57, 72x72, 114x114, 144x144). Les navigateurs modernes ignorent la plupart de celles-ci. Cinq fichiers couvrent tous les appareils du monde réel, et le validateur de favicon signale toute taille qui ne correspond pas à la spécification pour que vous puissiez abandonner l'encombrement hérité.

Utilisez les trois pour une couverture complète. ICO est le format hérité, requis pour /favicon.ico à la racine car certains anciens navigateurs et crawlers ne vérifient que cet endroit. Un fichier ICO multi-résolution 16x16 plus 32x32 est la solution de secours la plus sûre. PNG est le format desktop et mobile moderne. Utilisez-le pour <link rel="icon" sizes="32x32">, apple-touch-icon et les icônes du manifeste. PNG gère la transparence proprement et rend net à la taille déclarée. SVG est l'avenir. Utilisez-le pour <link rel="icon" type="image/svg+xml"> et le mask-icon de Safari. SVG s'adapte à n'importe quel DPI sans flou, pèse 1-3 KB, et supporte les variantes en mode sombre via les media queries. Environ 92% des navigateurs en usage aujourd'hui supportent les favicons SVG, les 8% restants revenant silencieusement à votre PNG déclaré.

Lorsque les utilisateurs iOS appuient sur « Ajouter à l'écran d'accueil » à partir de Safari, le système d'exploitation récupère l'apple-touch-icon pour afficher la tuile de l'écran d'accueil. Si vous ne déclarez pas une, iOS prend une capture d'écran de la page et l'utilise, ce qui semble flou et sans marque. La taille attendue est un PNG 180x180 avec un arrière-plan unie, déclaré comme <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Environ 25% du trafic mobile mondial provient d'iOS, et un apple-touch-icon manquant signifie que chaque utilisateur qui enregistre votre site voit un espace réservé au lieu de votre logo. La portion de vérification apple-touch-icon de cet outil signale si le fichier est déclaré, la taille correspond à 180x180, l'URL retourne 200, et l'arrière-plan est unie plutôt que transparent.

manifest.json est le Web App Manifest, un petit fichier JSON qui indique à Android (et à Chrome desktop) comment votre site se comporte lorsqu'il est installé en tant que Progressive Web App. Il déclare le nom de l'application, la couleur du thème, la couleur d'arrière-plan, le mode d'affichage, et surtout le tableau icons. Android récupère des PNG 192x192 et 512x512 du manifeste pour afficher la tuile d'écran d'accueil, l'écran de démarrage et l'entrée du tiroir d'applications. Sans un manifeste déclaré via <link rel="manifest" href="/manifest.json">, Android revient à une capture d'écran de votre page ou une icône générique globe. Environ 70% du trafic mobile mondial fonctionne sur Android, donc un manifeste manquant est une impression de marque manquée chaque fois qu'un utilisateur installe votre site ou l'épingle à l'écran d'accueil.

mask-icon est une déclaration spécifique à Safari pour les icônes d'onglets épinglés dans macOS Safari. Lorsqu'un utilisateur épingle votre onglet, Safari rend une silhouette monochrome en utilisant le SVG que vous déclarez via <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">. Le SVG doit être un vecteur d'une seule couleur. Safari ignore toute couleur du fichier et applique l'attribut color de la balise de lien à la place. Environ 8% du trafic desktop mondial utilise Safari, et les onglets épinglés sont une fonctionnalité pour utilisateurs avancés, mais ignorer mask-icon signifie que votre marque rend comme un point d'espace réservé générique pour ces utilisateurs. L'icône doit être simple, reconnaissable à 16x16, et utiliser des formes audacieuses qui se lisent clairement en monochrome sans lignes fines ou détail fin.

Cinq erreurs sont responsables de la plupart des configurations de favicon cassées. Premièrement, déclarer uniquement /favicon.ico et ignorer les cinq autres variantes, ce qui laisse iOS et Android avec des espaces réservés. Deuxièmement, livrer la mauvaise taille apple-touch-icon (152x152 au lieu de 180x180), ce que iOS met à l'échelle en flou. Troisièmement, oublier de lier manifest.json à partir du head HTML, ce qui rend Android ignore complètement les icônes du manifeste. Quatrièmement, utiliser des arrière-plans transparents sur les apple-touch-icons, ce que iOS rend comme un carré noir au lieu d'honorer la transparence. Cinquièmement, la mise en cache agressive du navigateur qui affiche l'ancien favicon pendant des semaines après une mise à jour. Corrigez le problème de cache en ajoutant une chaîne de requête de version (favicon.ico?v=2) ou en utilisant des noms de fichiers hachés dans votre pipeline de construction.

Oui, si vous vous souciez de l'apparence de votre marque dans les onglets en mode sombre. Environ 60% des utilisateurs exécutent maintenant leur système d'exploitation en mode sombre par défaut, et un favicon sombre sur sombre (un logo noir sur une barre d'onglets gris foncé) disparaît visuellement. La solution est un favicon SVG avec une media query : <link rel="icon" type="image/svg+xml" href="/favicon.svg" media="(prefers-color-scheme: dark)"> associé à une valeur par défaut en mode clair. À l'intérieur du SVG, vous pouvez utiliser CSS pour permuter les couleurs de remplissage en fonction de la même media query. Cela nécessite le format SVG car PNG ne supporte pas les media queries. Les navigateurs qui ne comprennent pas la syntaxe reviennent au <link rel="icon"> par défaut, donc vous conservez une couverture complète sans surcharge HTML supplémentaire.

Les navigateurs mettent les favicons en cache de manière agressive, souvent pendant une à quatre semaines, parfois plus longtemps. Chrome stocke les favicons dans sa base de données Favicon sans expiration explicite. Safari les met en cache par session et entre les redémarrages. Firefox met en cache en fonction des en-têtes HTTP de cache standard. Si vous mettez à jour votre favicon et les utilisateurs voient toujours l'ancien une semaine plus tard, le cache en est la cause. Trois solutions fonctionnent de manière fiable. Premièrement, ajoutez une chaîne de requête de version à l'URL du favicon (href="/favicon.ico?v=2026"), que les navigateurs traitent comme une ressource différente. Deuxièmement, changez complètement le nom du fichier (favicon-v2.ico) et mettez à jour la balise de lien. Troisièmement, définissez des en-têtes Cache-Control explicites sur la réponse du favicon avec une max-age courte. Quelle que soit l'itinéraire que vous choisissez, lancez un test de favicon après le déploiement pour confirmer que le nouveau fichier est servi depuis l'origine.

Un favicon n'affecte pas directement les classements Google, mais il affecte le taux de clics à partir des résultats de recherche, ce que Google utilise comme signal de qualité indirect. Google Search affiche les favicons à côté des résultats organiques sur mobile (depuis 2019) et desktop (depuis 2020). Les pages avec un favicon clair et marqué obtiennent un CTR mesurément plus élevé que les pages avec un favicon manquant ou par défaut. Une étude SEO 2023 de 100 000 SERP a trouvé un CTR lift de 4-8% pour les résultats avec des favicons marqués par rapport à ceux sans. Au-delà du CTR, un favicon manquant ou cassé signale un site de faible qualité ou abandonné aux utilisateurs, ce qui nuit à la confiance et à l'engagement. Google nécessite que le favicon soit au moins 8x8 pixels, multiple de 8, et crawlable à partir d'une URL stable pour l'afficher dans les résultats de recherche.

Oui. Ce vérificateur de favicon accepte n'importe quelle URL publique et récupère le HTML côté serveur, vous pouvez donc auditer votre propre site, un concurrent, ou toute conception de référence. Collez l'URL avec le protocole inclus (https://example.com), appuyez sur Vérifier les favicons, et l'outil retourne chaque icône déclarée dans deux à trois secondes. La vérification fonctionne sur n'importe quelle page, pas seulement la page d'accueil. Si un site utilise différents favicons sur les sous-domaines ou sections, testez l'URL spécifique qui vous importe. L'outil gère les redirections, suit l'URL finale, et rapporte tout 404 sur les fichiers d'icône. Utilisez-le pour comparer comment les sites leaders dans votre industrie configurent leurs favicons avant de concevoir les vôtres, puis copiez les motifs qui tiennent sur desktop et mobile.

/favicon.ico est le chemin de secours hérité. Les navigateurs le demandent automatiquement à la racine du domaine si aucune autre icône n'est déclarée dans le HTML. Le format est ICO, un conteneur Windows qui contient plusieurs résolutions dans un fichier. <link rel="icon"> est la déclaration HTML moderne. Il pointe vers n'importe quel fichier d'icône (PNG, SVG ou ICO) à n'importe quelle URL avec des attributs optionnels sizes et type. Les navigateurs préfèrent <link rel="icon"> lorsqu'il est présent et ne reviennent à /favicon.ico que s'il est manquant ou retourne 404. La meilleure pratique est de livrer les deux. Déclarez des icônes PNG et SVG modernes via <link rel="icon"> pour les onglets, et conservez un ICO multi-résolution à /favicon.ico pour les anciens navigateurs, lecteurs RSS et crawlers qui ne vérifient que le chemin racine.

Trois vérifications confirment un favicon qui fonctionne. Premièrement, lancez un vérificateur de favicon sur l'URL de page pour vérifier que chaque déclaration est présente, dimensionnée correctement et retourne 200. Deuxièmement, actualisez durement la page dans votre navigateur (Cmd+Shift+R ou Ctrl+Shift+F5) pour contourner le cache, puis regardez l'onglet. Troisièmement, enregistrez la page sur votre écran d'accueil iOS et écran d'accueil Android sur un appareil réel pour confirmer que ces icônes s'affichent correctement. Les outils de développement du navigateur aident aussi. Ouvrez l'onglet Réseau, filtrez par « favicon », et rechargez pour voir quels fichiers d'icônes le navigateur a réellement demandés. Si vous voyez des 404, corrigez les chemins et redéployez. Utilisez le test de favicon sur chaque déploiement pour attraper les régressions avant que les utilisateurs ne le fassent, surtout après les mises à niveau de framework qui changent les chemins des actifs statiques.

Le meilleur vérificateur de favicon est celui qui audite les six déclarations, pas seulement /favicon.ico. Il doit récupérer la page côté serveur, analyser chaque balise de lien, valider que chaque URL d'icône retourne 200, rapporter la taille et les dimensions réelles du fichier, grouper les résultats par appareil cible (desktop, iOS, Android, Safari épinglé), et signaler les variantes manquantes. Il doit également vérifier le contenu du manifest.json, pas seulement si le manifeste est lié. Ce vérificateur de favicon couvre les six vérifications en un seul passage et retourne les résultats en moins de trois secondes. Les outils de développement du navigateur fonctionnent pour les vérifications ponctuelles mais nécessitent une inspection manuelle de chaque balise de lien. Les validateurs en ligne qui ne vérifient que /favicon.ico manquent complètement les variantes modernes. Lancez un audit complet avant le lancement et après chaque migration d'actif statique pour garder l'ensemble d'icônes propre.