Favicon - Docs MetricSpot

Q: Pourquoi ma favicon n'apparaît-elle pas dans les résultats de recherche Google ?

Trois causes courantes : 1. L'URL renvoie un 404 ou un 403 — vérifiez avec curl -I https://votresite.com/favicon.ico. 2. L'icône est trop petite (sous 8×8) — générez un ICO multi-résolution à 16, 32 et 48. 3. Google n'a pas re-exploré le site depuis votre ajout — attendez jusqu'à une semaine, ou demandez l'indexation dans Search Console.

Ce que vérifie ce contrôle

Cherche dans <head> un <link rel="icon"> ou <link rel="shortcut icon"> (ou, en repli, un /favicon.ico à la racine du domaine) et vérifie que le fichier référencé se charge.

Pourquoi c’est important

Trois endroits utilisent votre favicon, tous visibles par les utilisateurs :

Barres d’onglets et favoris du navigateur — identification visuelle instantanée quand un utilisateur a 30 onglets ouverts.
Résultats Google Search — Google affiche les favicons à côté du nom de site sur les SERP mobiles et de plus en plus sur desktop. Les sites sans favicon affichent une icône de globe générique, qui paraît inachevée à côté des concurrents.
Historique du navigateur, téléchargements, sélecteurs d’app de l’OS — partout où l’OS ou le navigateur met en cache l’identité de votre site.

Une favicon manquante, c’est l’équivalent visuel d’une lettre postée sans adresse de retour. Le site fonctionne ; il n’a juste pas l’air sérieux.

Comment corriger

Livrez deux fichiers d’icône et liez-les correctement :

1. Le classique .ico — pour les navigateurs historiques et le chemin de détection automatique.

Placez-le à la racine du domaine :

public/favicon.ico   (ICO multi-résolution 16×16, 32×32)

La plupart des navigateurs récupèrent automatiquement /favicon.ico même sans balise <link>, mais l’explicite est mieux.

2. Une icône SVG — pour les navigateurs modernes, s’adapte à toutes les tailles.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Le navigateur prend celle qu’il préfère (Chrome et Firefox préfèrent le SVG ; Safari retombe sur ICO).

3. Usage PWA / grande icône — à associer à apple-touch-icon et au manifest web.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">  <!-- 180×180 -->
<link rel="manifest" href="/site.webmanifest">

Voir les contrôles Apple touch icon et manifest d’application web.

Bloc head complet :

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

C’est tout ce dont la plupart des sites ont besoin.

Générer toute la collection depuis une source :

RealFaviconGenerator prend une image source (idéalement SVG ou un PNG 512×512) et produit toute la famille d’icônes plus le HTML à coller. Couvre iOS, Android, les tuiles Windows et l’installabilité PWA.

Astro : déposez les fichiers dans public/ et liez-les dans le <head> de votre layout. Astro configure déjà le link rel="icon" depuis astro:assets si vous l’utilisez.

Next.js (App Router) : placez favicon.ico et éventuellement icon.svg directement dans app/. Le framework injecte automatiquement les balises <link>.

app/
  favicon.ico       # auto-liée
  icon.svg          # optionnel, auto-liée
  apple-icon.png    # optionnel, 180×180, auto-liée

WordPress : Apparence → Personnaliser → Identité du site propose un téléverseur « Icône du site ». WordPress génère et lie automatiquement la collection complète.

Notes de design :

Utilisez un design carré. Les navigateurs recadrent en carré de toute façon.
Fort contraste — les favicons s’affichent en 16×16 dans les barres d’onglets, où les détails fins disparaissent.
Testez en mode sombre. Un logo sur fond transparent qui marchait sur blanc peut devenir invisible sur une barre d’onglets sombre.

Exigences SERP Google :

Google a des règles supplémentaires pour la favicon SERP — carrée, au moins 8×8, et avec une URL stable. Les sites qui font tourner l’URL de leur favicon à chaque déploiement peuvent s’afficher comme un globe sur Google. Utilisez un nom de fichier stable et ne le query-stringez jamais.

Questions fréquentes

Faut-il `.ico` ou le SVG suffit-il ?

Les deux, pour l’instant. Le SVG est l’avenir, l’ICO est le présent — Safari et certaines anciennes versions de Chrome préfèrent encore l’ICO pour la barre d’onglets. Jusque vers 2027, livrez les deux.

Pourquoi ma favicon n’apparaît-elle pas dans les résultats de recherche Google ?

Trois causes courantes :

L’URL renvoie un 404 ou un 403 — vérifiez avec curl -I https://votresite.com/favicon.ico.
L’icône est trop petite (sous 8×8) — générez un ICO multi-résolution à 16, 32 et 48.
Google n’a pas re-exploré le site depuis votre ajout — attendez jusqu’à une semaine, ou demandez l’indexation dans Search Console.

Et l’astuce de la favicon claire/sombre ?

Les navigateurs modernes prennent en charge les icônes SVG avec media queries :

<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)" type="image/svg+xml">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)" type="image/svg+xml">

Ou embarquez les deux dans un SVG unique avec une balise <style> utilisant prefers-color-scheme. Les deux fonctionnent ; la seconde fait une requête HTTP en moins.