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 et desktop. 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 en test depuis le 22/08/2019 et de façon officielle depuis le 13/01/2020
  • 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.

Favicon dans les SERP

Sur mobile

C'est en place depuis mai 2019 sur mobile. 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

Sur ordinateur

Voici un aperçu sur ordinateur ("desktop") lors d'un test de Google en août 2019 :

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

Le format testé sur mobile est généralisé sur tous les appareils (y compris ordinateur) depuis le 13 janvier 2020 (source). Voici à quoi ça ressemble :

favicon SERP Google desktop officiel janvier 2020
En janvier 2020, Google officialise la généralisation de l'affichage avec favicon, y compris 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. Le .ico est 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 48x48 pixels ou tout autre multiple plus grand (par exemple 96x96 ou 144x144). 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 16x16 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 128x128 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 48x48 (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 48x48 px à partir d'une image 16x16, 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

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.2 (23 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.

16 commentaires

Nicolas Chevallier

Pour info les favicon sont ensuite retraités et stockés par Google avant affichage. Ils sont compressés et servis en PNG en ligne encodé en base64 et en taille 32x32.
Pour l'instant pas d'intérêt pour les webmasters à proposer un favicon au format SVG pour améliorer la qualité d'affichage...

Répondre
Olivier Duffez

Merci pour la précision Nicolas

Répondre
graphicstyle

Bonjour, mon favicon a disparu des résultats de recherche, il est pourtant bien présent dans l'onglet du navigateur. J'ai aussi fait le test du lien de votre article et le faveicon est bien identifié. Pourriez-vous m'aider ? Voici le lien de mon site https://www.graphicstyle.fr/

Répondre
Pierre

Bonjour,
C'est curieux,

ce jour (24 octobre 2019) je constate qu'il y a des favicons dans les SERPS sur Deskstop avec Firefox mais pas avec Chrome ou Safari ??? Une explication ? Merci ,

Pierre

Répondre
Olivier Duffez

Google fait des tests... Il peut afficher les favicons sur desktop dans une session de Chrome et pas en navigation privée, ou avec un autre navigateur, ou l'inverse.

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
NantesWEB

Le temps que ça arrive en scooter à Nantes, je confirme. Les Favicons, une horreur perturbantes visuellement dans les résultats de recherche sont arrivés en Desktop.

Une horreur, car cela perturbe le champ visuel, on est parasité. Ca fait tellement les débuts du web, franchement je trouve que ça régresse. On a l'impression de revenir en arrière.

Répondre
sz

comment les supprimer/bloquer?

Répondre
Olivier Duffez

Ce n'est pas prévu, mais une extension du navigateur doit pouvoir le faire...

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
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
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
Isa

Bonjour, quand on a changé son favicon (suite nouveau logo), comment faire pour que Google le prenne en compte dans le SERP ? alors qu'il est bien en compte dans le navigateur Chrome par exemple (onglet). Merci.

Répondre