➡️ Grosse promo en cours sur ma plateforme SEO ⬅️

Sur My Ranking Metrics, on double les crédits que vous achetez !

🎁 Offre limitée au 19/09 à découvrir ici

favicon SERP Google
Portrait Olivier Duffez

Olivier Duffez

Créateur de WebRankInfo,
consultant en référencement

Favicon dans les SERP Google

Google a officialisé l’affichage de favicon devant chaque résultat (naturel) dans les pages de résultats sur mobile. Voici comment l’utiliser ainsi que quelques conseils d’optimisation.

En résumé :

  • depuis mai 2019, dans ses résultats sur mobile, Google affiche le favicon du site devant le titre de chaque résultat
  • c’est aussi le cas sur desktop depuis le 22/08/2019
  • il est donc recommandé à chacun de s’assurer que le favicon s’affiche bien
  • c’est un moyen de développer la marque associée au site
  • ce dossier détaille comment il faut faire :-)

📢 Au fait, vous dites un favicon ou une favicone (ou « favicône ») ? on dirait que le masculin l’a emporté, alors qu’il s’agit d’une icône. Bizarre.

Voici à quoi ça ressemble dans les SERP mobiles de Google :

Favicon SERP Google
Google affiche le favicon s’il est bien défini, sinon une icône par défaut

Voici un aperçu sur ordinateur :

favicon SERP Google desktop
Depuis août 2019, Google teste aussi l’affichage de favicon dans les résultats sur ordinateur

Le format officiel favicon

D’où vient le favicon ?

C’est Microsoft qui l’a inventé ! Son navigateur Internet Explorer 5 testait la présence du fichier favicon.ico à la racine du site et l’utilisait pour illustrer les favoris (bookmarks).

Depuis, les autres navigateurs ont ajouté le support du favicon et c’est resté dans les usages. Il faut dire que c’est pratique pour reconnaître des sites dans les favoris, ou tout simplement en surfant (cette petite image s’affichage par exemple dans les onglets sur Chrome ou Firefox).

Faut-il utiliser le format ICO ?

Non, ça fait bien longtemps qu’il n’est plus nécessaire d’utiliser le format propriétaire .ico, une sorte de dérivé du format BMP sous Windows.

Quel format d’image faut-il utiliser ?

Il est possible d’utiliser des formats classiques d’images comme PNG, GIF ou SVG (JPG n’est pas adapté mais c’est possible) à condition de déclarer le favicon dans le code HTML comme expliqué ci-après.

Le format GIF animé pour le favicon n’est géré que par Firefox et Opera.

Il est conseillé de détailler le type MIME de l’image avec l’attribut type.

Quelle taille (pixels) pour le favicon ?

La taille du favicon doit être 48×48 pixels ou tout autre multiple plus grand (par exemple 96×96 ou 144×144). Ceci ne s’applique pas aux images SVG puisqu’elle n’ont pas de taille prédéterminée.

Comme indiqué plus loin, il est conseillé de prévoir aussi une image plus grande pour les navigateurs mobiles (ajout d’un raccourci sur l’écran d’accueil).

Au final, l’image que Google affiche dans ses résultats est une image de 16×16 pixels. C’est Google qui la redimensionne, il ne faut pas fournir une image aussi petite que ça.

Comment déclarer un favicon pour son site ?

Il faut inclure une balise <link> dans l’entête HTML de votre page (entre <head> et </head>) en suivant le formalisme suivant :

<link rel="shortcut icon" type="TYPE_MIME" href="/chemin/du/favicon.png">

Les valeurs possibles pour l’attribut rel sont les suivantes :

  • shortcut icon
  • icon
  • apple-touch-icon
  • apple-touch-icon-precomposed

L’attribut type n’est pas obligatoire mais permet de préciser le type MIME du fichier image. Voici des exemples pour du PNG, du GIF et du SVG :

<link rel="shortcut icon" type="image/png" href="/chemin/du/favicon.png">
<link rel="shortcut icon" type="image/gif" href="/chemin/du/favicon.gif">
<link rel="shortcut icon" type="image/svg+xml" href="/chemin/du/favicon.svg">

Dans l’attribut href vous devez indiquer l’URL du favicon. Il peut s’agir d’un chemin d’accès relatif (/smile.png) ou absolu (https://example.com/smile.png). Toutefois, il doit se trouver sur le même domaine que la page d’accueil.

Le format favicon pour Apple iOS et Chrome Android

Il est conseillé d’ajouter aussi une ligne spécialement pour les appareils iOS et Android, suivant ce format :

<link rel="apple-touch-icon" href="/chemin/du/favicon.png">

L’image sera utilisée quand l’utilisateur l’ajouter à son écran d’accueil. Attention, cette icône est plus large que l’image utilisée en favicon. Par exemple, Chrome va chercher l’image la plus proche de la taille 128×128 pixels.

Favicon dans les SERP Google et impact SEO

Je vais maintenant détailler ce qui concerne le référencement naturel sur Google…

Les consignes de Google

Google fournit quelques explications et consignes (source), voici ce qu’il faut respecter pour que votre favicon s’affiche dans les pages de résultats :

1 Le fichier du favicon et la page d’accueil doivent être autorisés au crawl (pas de blocage de Googlebot dans le fichier robots.txt)

2 L’URL du favicon doit renvoyer un code 200 (ce qui signifie que l’image est accessible sur votre serveur)

3 L’URL du favicon doit être stable, elle ne doit pas être modifiée « fréquemment ». C’est également mon conseil pour les URL

4 L’image doit respecter les consignes générales du format favicon. La particularité pour Google est que la taille doit être un multiple de 48×48 (pas plus petite que ça).

5 Votre favicon doit représenter visuellement la marque de votre site

6 L’image de votre favicon ne doit pas être inappropriée ; il faut par exemple éviter tout symbole de pornographie ou de haine (croix gammée ou autres). Inutile de copier le « Ad » que Google utilise pour les annonces, c’est jugé inapproprié… Si ce type d’image est découvert dans un favicon, Google le remplacera par une icône par défaut.

Autres conseils techniques

Google ne l’a pas forcément indiqué explicitement, mais d’après mon expérience :

  • Il suffit d’indiquer le favicon dans le code HTML de votre page d’accueil : pour une page interne, Google se base sur le favicon déclaré dans la page d’accueil (du même sous-domaine). Pour ma part, je trouve plus logique de le déclarer dans chaque page.
  • Faites attention aux sous-domaines : chacun peut avoir son favicon
  • Si vous avez une version mobile sur URL distinctes (par exemple m.example.com) alors il faut définir votre favicon du site mobile avec une URL sur le site mobile (par exemple m.example.com/favicon.png)

Impact SEO

Le favicon n’a a priori aucun impact SEO : ce n’est pas un critère pris en compte dans le classement (« ranking factor »). En tout cas Google ne l’a jamais indiqué ou même laissé entendre.

C’est logique !

Mais il y a sans doute bien un impact sur le CTR (taux de clic). En effet, l’internaute peut être incité (ou dissuadé, c’est selon) de cliquer sur un résultat grâce (ou à cause) du favicon et de la marque associée.

Comment vérifier le favicon identifié par Google ?

Bien entendu, vous pouvez faire une recherche sur Google (mobile) pour faire ressortir votre site. Comme Google gère un favicon pour chaque sous-domaine, le plus simple me semble de faire une requête du type :

Vous pouvez aussi aller sur l’URL suivante (en remplaçant le lien par ce qu’il faut pour votre nom de domaine), c’est apparemment celle utilisée par Google :

https://www.google.com/s2/favicons?sz=32&domain=www.webrankinfo.com

Vous pouvez changer la taille du favicon en modifiant la valeur du paramètre sz.

Pour automatiser cette vérification pour le site en cours de consultation dans votre navigateur, utilisez ce bookmarklet :

javascript:void(window.open(%27https://www.google.com/s2/favicons?sz=32&domain=%27+window.location.hostname,%27_blank%27));
Découvrez ma liste : les meilleurs bookmarklets SEO

Comment choisir un favicon efficace ?

Voyez cette possibilité comme un moyen de promouvoir la marque associée à votre site. Le fait que les internautes puissent remarquer le symbole de votre marque dans les SERP est un moyen de renforcer votre branding.

Ne laissez donc pas le favicon par défaut de votre CMS ou du thème que vous avez acheté.

N’oubliez pas de définir votre favicon. En cas d’absence, votre site ne se démarquera pas dans les SERP.

Faites donc des tests pour vous assurer que votre favicon affiché dans Google soit bien reconnaissable, que l’on puisse immédiatement l’associer à votre marque / votre site.

  • l’image doit être nette : attention à ne pas créer une image 48×48 px à partir d’une image 16×16, car elle serait floue. A l’inverse, ne créez pas le favicon à partir d’une image trop grande (votre logo) sans la retoucher, elle ne serait pas adaptée.
  • les couleurs doivent être vives et contrastées, reprenant votre charte graphique
  • si votre logo ou votre nom est trop long, mettez un seul signe graphique distinctif, ou une seule lettre

Et sur desktop ?

Pour l’instant, le favicon ne s’affiche que sur les SERP mobiles. Google n’a pas encore indiqué s’ils seraient également affichés sur ordinateur ou tablette.

Google va-t-il supprimer les favicons ?

C’est bien possible ! Pour l’instant c’est en place, mais avec Google il faut s’attendre à tout… surtout si ça peut favoriser ses revenus publicitaires.

J’ai peur également qu’il y ait trop d’abus de la part d’éditeurs de sites cherchant tous les moyens possibles d’attirer l’attention sur leurs sites. Dans certains cas ils seront repérés, mais pas dans 100%. Je m’attends par exemple à voir un site qui utilise l’image de marque d’un tiers sans son accord, afin de profiter de sa notoriété ou même pour se faire passer pour un site officiel.

Cet article vous a-t-il plu ?

Note : 4.4 (16 votes)
Cliquez pour voter !

Laisser un commentaire

Remarques :

  • Si vous souhaitez poser une question ou détailler un problème technique, il ne faut pas utiliser le formulaire ci-dessous qui est réservé aux avis. Posez votre question directement dans le forum Gmail de WebRankInfo. L'inscription est gratuite et immédiate.

  • En postant un avis, vous acceptez les CGU du site WebRankInfo. Si votre avis ne respecte pas ces règles, il pourra être refusé. Si vous indiquez votre adresse email, vous serez informé dès que votre avis aura été validé (ou refusé...) ; votre adresse ne sera pas utilisée pour vous envoyer des mailings et ne sera pas revendue ou cédée à des tiers.

6 commentaires

x5francois

Pour info, sauf erreur de ma part, depuis quelques mois, Google n’affiche plus 1000 résultats maintenant, mais seulement 300 maximum. Parfois il affiche plus de 3 pages dans les liens de pagination, mais si on clique sur le 4è, par exemple, la page sur laquelle on tombe est vide.

Répondre
Olivier Duffez

En effet, et ça fait très longtemps en fait. Mais ça ne doit pas gêner grand monde…

Répondre
Adrien Croville (SAS EROAD)

Ce n’est pas trop tôt car c’est bien pratique, et tous les navigateurs l’utilisent déjà dans les onglets.

Répondre
Ivan

Bonjour, et merci pour cet article !
Combien Google met-il de temps pour prendre en compte dans ses serp une image nouvellement soumise ?
D’autre part certains Framework (type « Avada » pour ne pas le nommer) proposent une section pour uploader les favico mais les tailles indiquées ne sont pas raccord avec votre article :
16px x 16px / 57px x 57px / 114px x 114px / 72px x 72px / 144px x 144px; Rien que çà !

Répondre
sebjoe

Les favicon s’affichent maintenant sur desktop également !!

Répondre
rick

Je ne vois pas de favicon sur desktop, peut-être avez-vous eu droit à un test de google…

Répondre