Ludicweb.fr

Informatique

Favicons : Guide complet pour garantir leur prise en compte

Par Publié le Mis à jour le 2 min de lecture

Sommaire
  1. 1. Qu’est-ce qu’une favicon ?
  2. 2. Pourquoi une favicon est-elle importante ?
  3. 3. Formats et dimensions recommandés
  4. 4. Emplacement et balises HTML
  5. 5. Le rôle du fichier /favicon.ico
  6. 6. Vérification et dépannage
  7. 7. Bonnes pratiques avancées
  8. Conclusion

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 :

2. Pourquoi une favicon est-elle importante ?

3. Formats et dimensions recommandés

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

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 :

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

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 !