Aller au contenu
Ludicweb » Informatique » Internet » Favicons : Guide complet pour garantir leur prise en compte

Favicons : Guide complet pour garantir leur prise en compte

    La favicon (contraction de « favorite icon ») est cette petite icône qui apparaît à côté de l’URL dans la barre d’adresse, dans les onglets de navigateur, et parfois dans les résultats de recherche. Bien qu’elle soit discrète, elle joue un rôle clé dans l’identité visuelle de votre site et dans la reconnaissance de votre marque. Dans ce guide, nous verrons toutes les bonnes pratiques pour qu’elle soit correctement chargée, par les navigateurs comme par Google.

    1. Qu’est-ce qu’une favicon ?

    La favicon est un petit fichier image, généralement carré (16×16, 32×32 ou 48×48 pixels), qui représente visuellement un site web. Les formats les plus courants sont :

    • .ico (le plus compatible, Microsoft & anciens navigateurs)
    • .png (transparent, bonne qualité moderne)
    • .svg (vectoriel, évolutif mais moins pris en charge partout)

    2. Pourquoi une favicon est-elle importante ?

    • Identité visuelle : elle renforce la reconnaissance de marque.
    • UX (expérience utilisateur) : facilite la navigation entre onglets.
    • SEO : Google intègre la favicon dans les résultats mobiles et dans vos pages AMP.

    3. Formats et dimensions recommandés

    Pour couvrir tous les usages, préparez plusieurs fichiers :

    • favicon.ico : 16×16 et 32×32 intégrés
    • favicon-32x32.png : 32×32 px
    • favicon-16x16.png : 16×16 px
    • apple-touch-icon.png : 180×180 px (pour iOS)
    • site.webmanifest (JSON avec icônes variées pour PWA)

    4. Emplacement et balises HTML

    Placez vos fichiers à la racine du site (ex. /favicon.ico) et dans le <head>, avant tout CSS/JS, ajoutez :

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#ffffff" />

    5. Le rôle du fichier /favicon.ico

    Même si vous utilisez des PNG, les navigateurs et Google cherchent d’abord un /favicon.ico à la racine. C’est le standard historique :

    • Fallback pour anciens navigateurs (IE, Edge Legacy)
    • Googlebot l’interroge pour afficher l’icône dans les résultats AMP et mobiles
    👉 à lire aussi :  Quelle est la distance maximale et distance conseillée pour un câble RJ45 de catégorie 6 ?

    6. Vérification et dépannage

    Après déploiement :

    1. Accédez à https://votredomaine.com/favicon.ico et vérifiez qu’il renvoie 200 OK.
    2. Inspectez le <head> avec les outils développeur (Chrome : F12).
    3. Vérifiez l’absence de directive noindex ou de blocage dans robots.txt.
    4. Dans Google Search Console, utilisez l’inspection d’URL et cliquez sur Demander une indexation.

    7. Bonnes pratiques avancées

    • Utilisez un générateur de favicon (RealFaviconGenerator) pour produire tous les formats nécessaires.
    • Optimisez vos PNG avec un outil comme pngcrush ou ImageOptim.
    • Prévoyez une version SVG pour les navigateurs récents : <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    • Déclarez une mask-icon pour Safari : <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />

    Conclusion

    Une favicon bien configurée améliore l’expérience utilisateur, renforce votre marque et permet à Google d’afficher correctement votre icône dans les résultats de recherche. Suivez ces étapes pour garantir une compatibilité maximale et une excellente visibilité de votre site.

    Vous avez des questions ? Laissez un commentaire ci-dessous !