La semaine dernière, un de mes collègues m’a posé une question qui m’a un peu surpris : un favicon, c’est quoi ? Et surtout, ça sert à quoi ?
Et comme je suis un blogueur réactif, avide de nouvelles idées de sujets d’articles, je me suis dit qu’il serait intéressant d’en faire une rapide brève sur Joptimise.
Je vous propose aujourd’hui de vous expliquer ce qu’est un favicon et son utilité. Puis, je vous livrerai plusieurs techniques pour créer un favicon efficace et le processus pour l’intégrer sur votre site (WordPress & Prestashop).
Un favicon, c’est quoi ?
Dans un premier temps, il est nécessaire que je vous explique ce qu’est un favicon ainsi que son rôle sur un site internet, que ce soit une boutique en ligne ou non.
Définition & traduction
Le mot favicon vient de la contraction de deux mots anglais : « favorite » et « icon ». On peut ainsi le traduire en français par l’ « icône des favoris ».
Ainsi, un favicon est l’icône affichée dans la barre des favoris d’un navigateur internet. Cette icône reprend généralement le logo du site ou un logo simplifié dans le cas où celui-ci est trop complexe pour apparaître en miniature.
A quoi ça sert ?
Le favicon sert surtout aux internautes pour leur permettre d’identifier rapidement votre site dans leur barre de favoris. C’est donc un élément d’UX design.
En effet, il est démontré depuis plusieurs années qu’une image attire plus l’œil d’un internaute qu’un texte. Il favorise ainsi la recherche de l’internaute lorsqu’il cherche à accéder à votre site depuis ses favoris.
A la manière d’un logo, le favicon est donc un élément visuel qui doit faire partie de la charte graphique d’une entreprise.
Comment créer un favicon ?
Maintenant que vous connaissez l’utilité d’un favicon, il est intéressant de savoir comment le créer : quel est son format ? Quelle dimension ? Faut-il utiliser le logo de son site ? Si non, comment générer un favicon à partir d’une image ? etc… Suivez le guide !
Quel est le format d’un Favicon ?
Parce que rien n’est jamais très simple lorsqu’il s’agit de design, les dimensions du favicon sont différentes en fonction des principaux navigateurs que sont Chrome, Firefox, IE ou encore Safari.
Par exemple, les formats recommandés par Microsoft pour ses navigateurs sont 16 x 16, 32 x 32 et 48 x 48. Apple, quant à lui, recommande que la dimension du favicon soit de 180 x 180.
Comment s’en sortir avec toutes ces dimensions ?
Si vous n’avez pas envie de vous prendre la tête, je vous conseille d’utiliser un générateur de favicon comme celui de ce site.
Il en existe plusieurs sur le marché qui ont l’avantage de vous fournir l’ensemble des formats réglementaires et attendus par les différents navigateurs.
La plupart vous propose d’uploadé votre image et en quelques clics seulement, vous pourrez télécharger votre image générée en favicon avec les différents formats.
Favorisez les images en format carré
Dernier conseil, si vous avez un logo qui est rectangulaire, je vous conseille de créer une version simplifiée de celui-ci en format carré.
En effet, comme vous avez pu le voir sur les différents exemples de dimensions, un favicon est un format carré. Ainsi, le rendu d’un logo rectangulaire en format carré sera de très mauvaise qualité.
Par exemple, chez ELEGIA, nous avons un logo classique et un logo dédié pour le favicon :
Logo spécial pour favicon
Comment installer un favicon ?
Ca y est, vous avez créé votre favicon et vous souhaitez désormais l’ajouter à votre site internet. Mais comment faire ? Pas de panique, c’est très simple. Voici la démarche à effectuer pour ajouter votre favicon sur un site WordPress ou sur tout autre site via du HTML.
WordPress
Pour intégrer un favicon sur un site WordPress, la solution la plus simple pour éviter d’utiliser un module, c’est d’uploader l’image que vous souhaitez utiliser comme favicon. Pensez bien à la renommer favicon.ico avant de la mettre en ligne.
Une fois l’image uploadée, ajoutez simplement le code suivant dans la section HEAD de votre thème via le chemin suivant: apparence > éditeur > Header.
<LINK REL=”SHORTCUT ICON” href=”https://www.votresite.com/images/favicon.ico”>
Prestashop
La solution la plus simple pour intégrer un favicon sur une boutique en ligne Prestashop est de vous rendre dans votre FTP et de remplacer le fichier favicon.ico présent dans le dossier “image” de votre site.
Comme pour WordPress, pensez-bien à renommer votre image par “favicon.ico”.
