La favicon, c’est le détail qui va vous crédibiliser. A faire pour au moins développer votre marque.
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 :
Voici un aperçu sur ordinateur :
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));
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.