Les favicons émergent de nouveau dans les résultats de recherche de Google, si vous ne l’avez pas vu, cela est visible sur Google.com et en version mobile. Mais qu’est-ce qu’un favicon et comment cela peut-il s’installer sur votre site Internet ? C’est ce que nous voyons dans cet article.
Le favicon, de la définition à la petite histoire
Un favicon, sur le Web, cela prend la forme d’une image qui peut même selon les envies être animée (le .gif sur Firefox par exemple) et cela apparaît généralement dans votre navigateur, dans un onglet. On peut parler pour le définir d’une icône créée par les Webmasters pour personnaliser un site Internet dans les navigateurs Web comme Firefox, Google Chrome, Microsoft Edge ou encore Opéra.
Il est cohérent encore aujourd’hui de considérer que l’usage d’un favicon est prioritairement destiné aux navigateurs qui peuvent ainsi les faire apparaître dans la barre d’adresse, les onglets bien entendu, les signets ou encore certains raccourcis. Il a toutefois un intérêt du point de vue du référencement naturel (SEO) comme nous le voyons un peu plus loin.
Format du favicon
Si, à l’origine, le favicon devait avoir une image au format .ico, le PNG, le GIF ou encore le SWG sont parfaitement autorisés et fonctionnels d’ailleurs sur Edge. N’abusez pas en référencement de l’optimisation de vos SVG ! Pour le format du lien vers votre favicon, cela s’opère en HTML 5 avec l’attribut rel :
[pastacode lang=”markup” manual=”%3Clink%20rel%3D%22icon%22%20type%3D%22image%2Fpng%22%20href%3D%22monfavicon.png%22%3E” message=”link rel icon du favicon” highlight=”” provider=”manual”/]Pour le titre de l’image, vous l’appelez comme vous voulez. C’est plutôt sur la question de la taille qu’il faudra faire de multiples intégrations…
La taille d’un favicon est idéalement de 32×32 ou 16×16 pixels mais avec le mobile, il existe de nos jours d’autres standards pour l’affichage, Apple ayant ainsi des dimensions également particulières. Pour les versions IOS 1.1.3 et au-delà que l’on a sur Ipod, Iphone, Ipad, il y a ainsi le format :
[pastacode lang=”markup” manual=”%3Clink%20rel%3D%22apple-touch-icon%22%20…%3E” message=”link rel apple touch icon” highlight=”” provider=”manual”/]Et comme la taille peut varier grandement, il est généralement apprécié de faire quelque chose comme :
[pastacode lang=”markup” manual=”%3Clink%20rel%3D%22apple-touch-icon%22%20sizes%3D%2257×57%22%20href%3D%22https%3A%2F%2Fmonnomdedomaine.fr%2F…%2Fapple-touch-icon-57×57.png%22%3E%0A%3Clink%20rel%3D%22apple-touch-icon%22%20sizes%3D%2260×60%22%20href%3D%22https%3A%2F%2Fmonnomdedomaine.fr%2F…%2Fapple-touch-icon-60×60.png%22%3E%0A%3Clink%20rel%3D%22apple-touch-icon%22%20sizes%3D%2272×72%22%20href%3D%22https%3A%2F%2Fmonnomdedomaine.fr%2F…%2Fapple-touch-icon-72×72.png%22%3E%0A%3Clink%20rel%3D%22apple-touch-icon%22%20sizes%3D%2276×76%22%20href%3D%22https%3A%2F%2Fmonnomdedomaine.fr%2F…%2Fapple-touch-icon-76×76.png%22%3E%0A%3Clink%20rel%3D%22apple-touch-icon%22%20sizes%3D%22114×114%22%20href%3D%22https%3A%2F%2Fmonnomdedomaine.fr%2F…%2Fapple-touch-icon-114×114.png%22%3E%0A%3Clink%20rel%3D%22apple-touch-icon%22%20sizes%3D%22120×120%22%20href%3D%22https%3A%2F%2Fmonnomdedomaine.fr%2F…%2Fapple-touch-icon-120×120.png%22%3E%0A%3Clink%20rel%3D%22apple-touch-icon%22%20sizes%3D%22144×144%22%20href%3D%22https%3A%2F%2Fmonnomdedomaine.fr%2F…%2Fapple-touch-icon-144×144.png%22%3E%0A%3Clink%20rel%3D%22apple-touch-icon%22%20sizes%3D%22152×152%22%20href%3D%22https%3A%2F%2Fmonnomdedomaine.fr%2F…%2Fapple-touch-icon-152×152.png%22%3E%0A%3Clink%20rel%3D%22apple-touch-icon%22%20sizes%3D%22180×180%22%20href%3D%22https%3A%2F%2Fmonnomdedomaine.fr%2F…%2Fapple-touch-icon-180×180.png%22%3E” message=”Différentes tailles apple touch icon” highlight=”” provider=”manual”/]On parle alors de multirésolution. Ces “link rel” s’ajoutent assez vite entre les balises <head></head>. A noter que le chemin peut être absolu ou relatif, comme pour beaucoup de cas par ailleurs, c’est-à-dire avec le https:// ou simplement /monfavicon.png. par exemple.
Pour aller plus loin, il est possible aussi de proposer plusieurs valeurs rel, au-delà de “icon” ou “apple-touch-icon”, ce qui nous donne :
- icon
- shortcut icon
- apple-touch-icon
- apple-touch-icon-precomposed
Mais également plusieurs “type” pour le format des images. Le tout est que ce soit lisible par le moteur.
Pour le SEO ?
Je crois qu’il faut réellement décontextualiser l’impact en référencement du Favicon. Si c’est une bonne pratique Web, c’est avant tout pour mettre en avant la marque ou votre site Internet en général au travers des navigateurs. Abuser sur la couleur par exemple, c’est possible, mais probablement aussi spammy que le fait d’ajouter des signes distinctifs dans les meta descriptions et les balises title.
En tous les cas, il n’est pas inenvisageable d’avoir une pénalité manuelle sur ce genre de sur-optimisation ; Google nous précise qu’il faut une cohérence de l’image, une correspondance avec votre marque.
L’impact SEO doit être considéré avec modération, nous n’avons pas, sur plusieurs exemples, noté de réelles différences sur le plan des rankings depuis mai dernier. Par contre, il est indubitable que cela conforte votre marque et potentiellement le taux de clic (CTR) des internautes, notamment sur les marques reconnues.
Pour aller plus loin
Nous vous invitons également à réfléchir, au-delà de l’affichage strictement HTML du favicon, à votre logo affiché. Pour une meilleure interprétation de celui-ci dans les différents résultats de Google, songez à l’usage ici de microdata. Par exemple :
[pastacode lang=”markup” manual=”%3Cimg%20%3D%22logo%22%20src%3D%22..%2Fmedia%2Flogo.png%22%20alt%3D%22logo%20de%20mon%20entreprise%22%20%2F%3E” message=” logo (schema.org)” highlight=”” provider=”manual”/]C’est ici l’occasion de placer un attribut alt également et d’autres div comme une description. Ces éléments sont parfaitement utiles aux affichages à la fois sur mobile et desktop, quel que soit le navigateur puisque ici, c’est Google qui décide de les interpréter. Bref, enrichissez au maximum le code de données lisibles et compréhensibles pour les moteurs.
