Résumé (TL;DR)
- La validation est cruciale : Un favicon cassé n’est pas juste une icône manquante ; cela cause des erreurs 404 et nuit à l’image de marque.
- Analyse complète : Cet outil scanne votre site comme un navigateur pour vérifier
favicon.ico, les icônes PNG, Apple Touch Icons et les Web Manifests. - Feedback exploitable : Obtenez des rapports précis sur l’accessibilité des fichiers, les incohérences de dimensions et la validité des formats.
Pourquoi valider les favicons ?
Déployer un favicon semble simple, mais c’est souvent source d’erreurs silencieuses. Les écosystèmes modernes (Desktop, Android, iOS) ont tous des exigences différentes.
- Cache du navigateur : Les navigateurs locaux mettent les favicons en cache de manière agressive, masquant souvent les problèmes que voient les nouveaux visiteurs.
- Standards fragmentés :
favicon.icone suffit plus. Apple chercheapple-touch-icon. Android et les PWA cherchentsite.webmanifest. - Configuration serveur : Les chemins corrects dans le HTML ne servent à rien si votre serveur renvoie une erreur 403 ou le mauvais type MIME.
Ce vérificateur agit comme un client tiers neutre, vous montrant l’état réel de votre déploiement de favicon.
Ce qui est vérifié
Notre analyseur effectue un audit en plusieurs étapes :
- Parsing HTML : Nous scannons le
<head>pour trouver tous les liens d’icônes déclarés. - Validation du Manifeste : Si un Web Manifest est trouvé, nous vérifions que les tailles déclarées correspondent aux dimensions réelles des fichiers.
- Accessibilité : Nous essayons de télécharger chaque icône pour vérifier qu’elle renvoie un statut
200 OK. - Format et Dimensions : Nous inspectons les données binaires pour assurer que le fichier est une image valide (ICO, PNG, SVG) et que ses dimensions correspondent.
- Découverte implicite : Nous vérifions les conventions standards comme
/favicon.icomême si elles ne sont pas explicitement liées.
Erreurs de déploiement courantes
1. L’icône “Fantôme”
Vous avez une balise <link rel="icon" href="/icon.png">, mais le fichier renvoie une erreur 404. Solution : Vérifiez le chemin du fichier relatif à la racine de votre domaine.
2. Inadéquation de format
Vous déclarez type="image/png" mais servez un fichier JPEG ou ICO. Certains navigateurs stricts peuvent rejeter l’icône. Solution : Assurez-vous que l’en-tête Content-Type de votre serveur correspond au format réel.
3. Mensonge sur les dimensions
Votre HTML indique sizes="32x32", mais l’image réelle est en 16x16. Cela force le navigateur à redimensionner l’image, la rendant souvent floue. Solution : Utilisez le Générateur de Favicon pour produire des tailles exactes.
4. Manque de l’Apple Touch Icon
iOS n’utilise pas le favicon standard. Sans apple-touch-icon, les utilisateurs ajoutant votre site à leur écran d’accueil auront une capture d’écran générique. Solution : Incluez toujours un PNG 180x180 pour Apple.
Bonnes pratiques pour un score parfait
- Réserve à la racine : Ayez toujours un
favicon.icoà la racine (/favicon.ico). - SVG pour le moderne : Utilisez un favicon SVG (
type="image/svg+xml") pour une indépendance de résolution. - Manifeste : Définissez des icônes distinctes dans
manifest.json. - Cache Busting : Ajoutez une chaîne de requête (ex:
?v=2) si vous mettez à jour votre icône.
FAQ
Pourquoi le vérificateur dit “Manquant” alors que je peux le voir ?
Votre navigateur a probablement mis en cache une ancienne version. Vérifiez vos permissions de fichiers et assurez-vous d’utiliser des chemins absolus.
Ai-je vraiment besoin de tous ces fichiers ?
favicon.ico est le minimum vital. Mais pour un aspect professionnel sur mobile et écrans haute densité, le set complet est la norme industrielle.
Puis-je utiliser un CDN ?
Oui. Assurez-vous que vos balises <link> pointent vers l’URL absolue sur le CDN.