amazon.com
Lorsque l'on visite un site Internet à travers un navigateur web tel que Google Chrome ou Mozilla Firefox, Safari ou Opera, on peut s'apercevoir que l'on voit une petite icône affichée dans l'onglet correspondant.
Est-ce que cette image est utilisée pour le SEO ? À quoi cette icône sert-elle vraiment ? Est-ce que ce type d’icônes est utile pour une entreprise ?
Dans cet article complet rédigé par Super Webmaster, vous serez incollable sur le sujet. Découvrez le favicon en détail !
Le mot favicon est la fusion entre deux mots anglais, "favorite" et "icon" que l'on peut traduire en français " icône de favoris".
Il faut savoir que tous les navigateurs web possèdent une fonctionnalité pour créer sa propre liste de marque-pages.
C’est une liste de liens (url) que l’on préfère. Ces liens préférés sont aussi appelés “signets” et “raccourcis”.
Comme le disait le philosophe Confucius, une image vaux mille mots, un favicon est une petite icône qui permet de trouver facilement et en un seul coup d'œil, le lien d'un site web situé la liste des liens mis en favoris.
Il est possible de créer plusieurs listes de liens dans différents dossiers et de les classer dans un dossier ou sous-dossier.
Toutes ces listes sont enregistrées dans les paramètres d’un navigateur web grâce à un fichier contenant la liste des liens enregistrés, localement sur un ordinateur.
Le nombre de fichiers dépend du nombre de navigateurs installés sur un ordinateur.
Un favicon est très pratique pour trouver rapidement un lien (link en anglais) situé dans une longue liste.
Pour informations, le favicon de chaque site est visible dans la barre de favoris. Cette barre peut être activée dans les options de votre browser.
Le favicon fait partie intégrante d’une image de marque d’un site web. Cet élément visuel a tout de même un petit impact non-négligeable sur le référencement naturel “SEO” d’un site internet, mais c'est indirect.
Les algorithmes des moteurs de recherche tels que Google, Yahoo, et Bing prennent en compte l’expérience utilisateur "UX" ou "UX Design".
C’est-à-dire que chaque élément que compose un site web doit pouvoir faciliter les recherches d’un internaute.
Une image, une photo ou un pictogramme attire beaucoup plus l’attention de l’œil humain que de longs textes.
La mission première de Google est de proposer des réponses pertinentes aux recherches qu’effectuent les utilisateurs sur son moteur, de manière rapide.
Depuis le mois de Mai 2019, Google affiche les favicons des sites sur ses pages de résultats de recherche sur mobile, puis sur ordinateur le 13 Janvier 2020.
Un webmaster ou une agence web qui crée des sites Internet avec des favicons, permet à ses mêmes sites d’attirer des visiteurs lorsqu’ils consultent les pages de résultats de recherche de Google (SERP). On peut parler d’augmentation de taux de clics (CTR).
C’est un détail qui ne faut pas oublier et qui contribue positivement à l’expérience de recherche des internautes.
Cette icône fait partie intégrante de la charte graphique d’un site web.
Oui, un favicon permet d’améliorer indirectement le référencement naturel d’un site web.
Il existe plusieurs possibilités pour créer un favicon. Un graphiste peut s’aider d’un logiciel de retouche photo tel que Photoshop, Gimp et autres créer et éditer un favicon.
Il existe également des générateurs de favicon en ligne gratuits. Vous pouvez vous servir de votre logo pour créer vos icônes.
Certains navigateur web acceptent plusieurs formats d’image entre le png, le jpg, gif (pour Firefox et Opera uniquement), svg ou encore le format en ico.
À savoir: Le navigateur Internet Explorer en version 6,7,8 et 9 supporte uniquement le format en ico. En général, il n’est plus nécessaire d’utiliser ce format propriétaire.
Un favicon peut être créé en plusieurs taille, il est fortement recommandé que la hauteur et la largeur aient la même taille. Le favicon doit être carré.
Il faut respecter certaines règles en matière de design.
Les tailles idéales d’un favicon selon le navigateur web. Les unités de mesure représentent des tailles en pixels:
Edge : Microsoft préconise que la hauteur et la largeur des favicons soient de 16x16, 32x32 et 48x48.
Apple : Recommande d’utiliser une dimension de 180x180 pixels.
Pour faire plus simple, la taille d’un favicon doit être de 48×48 pixels ou tout autre multiple plus grand (par exemple 96×96 ou 144×144 ou 192x192).
Cette règle ne s’applique pas aux images ayant un format en SVG puisqu’elles n’ont pas de taille prédéterminée.
Il existe plusieurs générateurs de favicons gratuits en ligne pour la création de ces fameuses icônes, voici les bonnes adresses de Super Webmaster.
Vous pouvez télécharger votre propre image, vous pouvez également vous servir de votre logo.
Les sites listés ci-dessous redimensionnent automatiquement l’image que vous avez choisi de transformer en favicon.
Il n’a jamais été aussi simple de convertir une image png ou jpg en favicon. Un conseil, votre favicon doit respecter votre “branding, plus précisément, votre image de marque, il peut être en noir et blanc, ou posséder plusieurs couleurs:
Vous pouvez contacter votre webmaster ou un graphiste qui se fera certainement un plaisir de mettre en place un favicon sur votre site web.
C’est une opération qui peut prendre du temps si votre site est codé en HTML.
Compter une heure de temps environ, le temps de créer un favicon et l’installer sur votre site.
Un webdesigner, ou tout autre professionnel pourrait vous prendre entre 50 euros à 150 euros pour cette opération. Prenez le temps de comparer les offres.
Afin d'ajouter un favicon sur votre site fait avec le CMS Wordpress, suivez les étapes du tutoriel ci-dessous :
<link rel="shortcut icon" href="http://www.votresite.com/images/favicon.ico">
Remplacez l’url par votre nom de domaine. Pensez à enregistrer après avoir inséré le code.
La balise “Link” est utilisée pour lier les feuilles de style CSS.
L’attribut “Rel” placé sur un balise , et définit la nature de la relation établie entre deux ressources.
Le terme “shortcut icon” c’est la valeur à ajouter dans l’attribut rel pour que ce soit affiché sur Google Chrome.
Pour finir, c’est quoi href ? En html cela veut dire “ Hypertext REFerence”.
Pour faire simple, cela indique c’est un lien qu’il va falloir insérer et qui va rediriger vers une autre page.
La solution la plus facile pour ajouter un favicon sur une boutique en ligne faite avec Prestashop, c’est de vous connecter grâce à votre compte FTP.
Puis de remplacer le fichier favicon.ico présent dans le dossier « image » de votre site, par votre propre favicon.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
Dans la balise rel il faudra ajouter "apple touch icon precomposed" sizes="76x76" et dans le href "apple touch icon 76x76 precomposed.png"
Dans la balise rel il faudra ajouter "apple touch icon precomposed" sizes="120x120" et dans le href "apple touch icon 120x120 precomposed.png">
Dans la balise rel il faudra ajouter "apple touch icon precomposed" sizes="152x152" et dans le href "apple touch icon 152x152 precomposed.png">
Désormais, maintenant que vous avez installé votre joli favicon rempli de belles couleurs sur votre site, les internautes pourront voir votre icône dans l’onglet de leur navigateur.
Cela ne fonctionne pas uniquement sur la page d’accueil, ça fonctionne sur toutes les pages.
Ce favicon est un détail qui n’impacte pas directement le référencement naturel, il impacte l'expérience utilisateur.
Mais, gardez à l’esprit que, plus l'expérience des internautes est bonne, plus votre référencement sera bon.
Vous pouvez mettre varier les favicons selon les pages, mais ce n’est pas conseillé pour l’image de marque d’une entreprise.
Chers Lecteurs, et chers confrères webmasters, vous pouvez participer en laissant un commentaire ci-dessous.
Déposez un like ou partagez si vous êtes plutôt d’accord avec cet article "un favicon c'est quoi ?"
" Super Webmaster aide les entrepreneurs à mieux vendre leurs produits et services par le biais d'articles concernant les techniques de vente. En plus de créer des sites Internet vitrine pour les PME/TPE, nous apportons notre savoir-faire et notre passion afin de rendre les sites web que nous développons beaucoup plus séduisants et vendeurs. Bonne lecture sur le blog de Super Webmaster ! "
Commentaires ()