Favicon : À Quoi Ça Sert Et Comment Optimiser Celui De Ton Site ?

optimiser favicon

Depuis 2019, sur mobile et sur desktop, Google a officialisé l’affichage du Favicon devant chaque résultat organique dans les SERPs. 

EDIT : l’affichage a tendance à varier du tout au tout ces dernières semaines, Google ayant testé la suppression des Favicons avant de revenir en arrière sur certaines SERP. A l’heure où j’écris cet article, depuis la Thaïlande les favicons ne sont pas encore de retour ! … A suivre !

Bien que cette icône n’ait à priori aucun impact sur le référencement naturel de tes pages, bien optimisée, elle pourrait avoir un effet direct sur ton CTR (ou taux de clics). 

Voici donc un guide complet expliquant toutes les astuces pour mettre en place un Favicon efficace et optimisé pour le moteur de recherche Google. 

Pourquoi utiliser un Favicon ? 

Du point de vue de l’internaute, l’utilisation du Favicon présente un avantage pratique. 

En effet, cette petite image lui permet :

  • d’identifier un blog ou un site Web lorsqu’il surfe entre plusieurs onglets sur son navigateur (Chrome ou Firefox) ;
  • de facilement se repérer dans sa barre de favoris (bookmarks).   

Pour toi, en tant que blogueur.se ou Web entrepreneur.e, l’usage du favicon est un moyen de promouvoir la marque qui est associée à ton blog ou à ton site internet.

Au cas où tu te poserais la question, le mot favicon est issu de la contraction de deux mots anglais : « favorite » et « icon ». En traduisant trivialement, on obtient quelque chose comme ça : « icône des favoris ».

À la base, un favicon, ça servait à illustrer les sites et blog épinglés dans la barre des favoris. 

Comment choisir le format d’image du favicon de ton blog ou de ton site Web ?  

Tu as le choix entre plusieurs types de formats d’images : PNG, SVG, GIF, JPG, etc. 

Toutefois, dans la liste des choix possibles en matière de formats d’images à utiliser pour le favicon, le JPG fait partie des formats les moins recommandés. Donc, il est préférable de l’éviter. 

Pour sa part,  le format GIF animé pour le Favicon est uniquement pris en compte par Firefox et Opera.

Quand on sait que Google Chrome détient à lui tout seul 59.75 % de parts de marché en France  (source : https://gs.statcounter.com/browser-market-share/all/france), il ne fait pas être un génie pour comprendre qu’il vaut mieux esquiver ce format. 

Note : privilégie les formats d’images PNG et SVG pour le choix de l’icône de ton domaine.  

Comment choisir la taille de l’icône de ton blog ou de ton site Web ? 

D’après Google, la taille de l’icône d’un blog ou d’un site internet doit ABSOLUMENT être un multiple d’un carré de 48 pixels.

Par exemple : 48 × 48 pixels, 96 × 96 pixels, 144 × 144 pixels, etc.

Dans les pages de résultats, les favicons affichés par Google sont du format 16 × 16 pixels. Compte tenu du fait que le géant américain se charge lui-même de redimensionner les visuelles fournies pour qu’elles correspondent à ses standards, il  n’est pas judicieux de lui fournir une image dont la taille est inférieure ou égale à cette résolution. 

Comme ils n’ont pas de taille prédéterminée, les fichiers SVG ne sont pas concernés par ces recommandations. 

Et comme on le verra un peu plus loin dans cet article, pour les navigateurs mobiles, tu devras également prévoir une image de taille plus grande.

Note : ne fournis pas toi-même une image de 16 × 16 pixels.

Quelles sont les consignes de Google en matière de favicon ? 

Voici la liste exhaustive des directives prescrites par le moteur de recherche Google. 

Évidemment, pour que le symbole graphique de ton blog ou de ton site internet apparaisse dans les SERPs, tu dois les respectes à la lettre. 

  • Autorise l’exploration et l’indexation du fichier de ton favicon et de ta page d’accueil. En d’autres termes, n’utilise pas de blocage de Googlebot dans le fichier robots.txt.
  • Assure-toi que l’adresse internet (ou l’URL) du symbole graphique de ton domaine renvoie un code 200 (signifiant que l’image est accessible sur ton serveur).
  • Opte pour un favicon qui représente visuellement la marque de ton blog ou de ton site Web,  de manière à aider les internautes à identifier rapidement ce dernier lorsqu’ils naviguent dans les SERPs.
  • Veille à la stabilité de l’adresse internet de ton favicon. Évite de modifier son URL fréquemment.
  • Assure-toi que ton image respecte les consignes générales relatives au format du favicon (la taille doit être un multiple d’un carré de 48 pixels).
  • Évite les images inappropriées lors du choix de ton favicon. Pas de symbole à caractère pornographique ou haineux (croix gammées, par exemple). Google n’affiche pas les favicons jugés inadéquats.
  • Ne copie pas le « Ad » que Google utilise pour ces annonces. 

Si le géant américain ne valide pas le type d’image contenu dans ton favicon, il le remplacera par une icône par défaut pas forcément super esthétique !

Comment définir le Favicon de ton domaine ?

Pour intégrer l’image qui s’affichera devant tous les résultats de recherche Google correspondant à ton blog ou à ton site Web, il te suffit d’inclure une balise <link> dans l’entête HTML de ta page d’accueil (entre <head> et </head>). 

Pour le faire, applique machinalement la syntaxe ci-après : <link rel= »shortcut icon » type= »TYPE_MIME » href= »/chemin/du/favicon.png »>

L’attribut « rel » peut prendre la valeur de l’une des chaînes suivantes :

  • « icon » ;
  • « shortcut icon » ;
  • « apple-touch-icon » ;
  • « apple-touch-icon-precomposed ». 

L’attribut « type » n’est pas indispensable. Par conséquent, tu peux également utiliser la syntaxe suivante : <link rel= »shortcut icon » href= »/chemin/du/favicon.ico »> 

Néanmoins, pour définir ton favicon, il est conseillé de préciser le type MIME de ton fichier image. 

Exemples :

  • PNG : <link rel= »shortcut icon » type= »image/png » href= »/chemin/du/favicon.png »>
  • SVG : <link rel= »shortcut icon » type= »image/svg+xml » href= »/chemin/du/favicon.svg »>

Au niveau de l’attribut « href », assure-toi de renseigner la bonne URL du favicon de ton blog ou de ton site internet. Bien entendue, il peut s’agir d’un chemin d’accès :

Quoi qu’il en soit, veille enfin à ce que ce chemin d’accès se trouve sur le même domaine que ta page d’accueil.

Google recherchera et mettra ton favicon à jour chaque fois qu’il explorera ta home page. 

Si tu modifies l’icône de ton domaine tout en souhaitant en informer Google, tu peux demander l’indexation de ta page d’accueil. Cependant, retiens que l’affichage des mises à jour dans les résultats de recherche peut prendre un certain temps : quelques jours ou plusieurs semaines.

Note qu’il est aussi possible d’intégrer l’icône de ton domaine en passant par un générateur de favicon. 

C’est  quoi le format du favicon pour Apple iOS et Chrome Android ? 

Comme indiqué 2 sections plus haut, il est également recommandé de prévoir une image plus grande pour les navigateurs mobiles. 

En effet, quand les utilisateurs ajoutent un raccourci sur leurs écrans d’accueil, c’est cette image qui est utilisée.  

Il te faut donc ajouter une ligne spécifique pour les supports iOS et Android, en suivant le formalisme ci-dessous : <link rel= »apple-touch-icon » href= »/chemin/du/favicon.png »>

La taille de l’icône raccourci tourne autour de 128 × 128 pixels.

Le favicon a-t-il un impact sur le positionnement de tes pages dans les SERPs ?

Officiellement, le favicon n’a aucun impact sur le référencement organique de tes pages dans les résultats de recherche Google.

Toutefois, parce qu’il présente un intérêt pratique pour les utilisateurs, le favicon à certainement un impact sur ton CTR (ou taux de clic). 

En plus d’accrocher le regard des internautes, il renvoie une image de sérieux et inspire la confiance. C’est idéal pour améliorer ton image de marque. 

Comment optimiser le symbole graphique de ton blog ou de te site Web ?

Bien entendu, pour profiter pleinement des avantages qu’offre le favicon, le choix de l’image de celui-ci a toute son importance. 

Il est donc déconseillé de laisser Google afficher un favicon par défaut : celui de ton CMS ou de ton thème. 

Pour définir un favicon efficace, tiens principalement compte de 3 critères :  

  • La qualité : au premier coup d’œil, l’internaute doit être captivé par ton favicon. Privilégie donc une image  nette et facilement reconnaissable.
  • La pertinence : préfère un visuel qui sera immédiatement associé à la marque de ton blog ou de ton site Web.
  • L’originalité : pour te démarquer des autres domaines qui apparaissent dans les SERPs. 

Évite, par exemple, de créer une image  96 × 96 pixels à partir d’une image 16 × 16 pixels. Pas besoin de te faire un dessin, la qualité de cette dernière serait on ne peut plus dégradée. 

De même, ne crée pas l’icône de ton blog ou de ton site internet à partir d’une image trop grande (ton logo par exemple). Pour qu’elle soit adaptée, tu dois au préalable la retoucher.  

Ton logo est trop complexe pour apparaître en miniature ? Utilise un logo simplifié. 

En ce qui concerne les couleurs, il est préférable qu’elles soient vives et contrastées, en lien avec ta charte graphique. 

Maintenant que tu sais comment déclarer et optimiser ton favicon, voyons comment vérifier qu’il s’affiche bien dans les SERPs Google. 

Comment vérifier que ton favicon apparait bien dans les pages de résultats de Google ?

Pour tester l’icône identifiée par Google, la méthode la plus fiable (et la plus simple, d’ailleurs) consiste à effectuer une recherche sur le moteur de recherche américain. 

En utilisant des mots-clés bien précis, tu réussiras à faire ressortir une page de ton domaine. 

Si non, tu peux également passé par une URL fournie par Google : https://www.google.com/s2/favicons?sz=32&domain=www.ton-nom-de-domaine.com

Exemple : https://www.google.com/s2/favicons?sz=32&domain=www.dotmarket.eu/index.html     

Tu peux changer la taille du favicon en changeant la valeur du paramètre « sz ». 

Exemple : https://www.google.com/s2/favicons?sz=34&domain=www.dotmarket.eu/index.html     

Si tu souhaites automatiser cette vérification pour un blog ou un site en cours de consultation dans ton navigateur, utilise le bookmarklet suivant : javascript:void (window.open (%27https://www.google.com/s2/favicons?sz=32&domain=%27+window.location.hostname,%27_blank%27));

Ce qu’il fallait retenir sur le favicon 

Bien qu’il ne fasse pas officiellement partie des 200 critères de classement dans les pages de résultats de recherche Google, le favicon aide les internautes à rapidement identifier ton blog ou ton site Web dans les SERPs. 

Aussi, il pourrait avoir un impact direct sur ton CTR (ou taux de clics). 

Lors du choix de l’image qui servira d’icône à ton domaine, veille donc à respecter les conseils d’optimisation et les consignes de Google !

About the author

Kévin JOURDAN

Editeur de site internet, blogger (sur Kjourdan.com), consultant SEO, conférencier & co-fondateur de l'agence de RP Digitale & Netlinking OnAcceleration, Kévin a développé La Markerplace pour réunir investisseurs et vendeurs de business en ligne de qualité. Un endroit de rencontre créé à la hauteur de ses standards et à l'image de la façon dont il aime travailler : efficace, fiable et humain !