Le favicon d’un site c’est un peu comme l’écusson d’une équipe de foot… si vous n’en n’avez pas il sera difficile pour vos clients de vous reconnaître. C’est pour ça qu’il faut que vous définissiez une identité « forte » sur votre favicon.
Beaucoup de Prestashop n’ont pas de favicon
Chaque jour je vois défiler beaucoup de sites Prestashop et je peux confirmer que beaucoup n’ont pas de favicon ou alors parfois ils ont même laissé le favicon par défaut (aie). La bonne nouvelle c’est que justement comme beaucoup de sites ne l’ont pas fait, si vous pensez à faire ce changement vous bénéficiez d’un avantage visuel sur vos concurrents.
Les emplacements stratégiques du favicon
A première vue je dirais qu’il y a 3 emplacements stratégiques pour le favicon, la 1ère c’est dans l’onglet du navigateur on a la miniature en haut à gauche, ensuite dans la recherche instantanée / historique de navigation et aussi dans la liste des résultats de recherche Google. Cet élément n’est donc pas à négliger, car il est vu un grand nombre de fois… mais ce qui est fou, c’est ce que je vais vous dire au paragraphe suivant.
Le favicon est « ROI » absolu
Il faut savoir que le favicon c’est l’élément le plus « vu » de votre site, cela est même plus « vu » que l’ensemble de votre site et de vos pages. Comment ça se fait ? Et bien dans Google quand les internautes font des recherches, ils voient votre site dans la liste, mais ne cliquent pas forcément dessus… Cela veut dire que peut-être votre favicon est vu 2x plus souvent que le trafic que vous générez sur votre boutique. Vous comprenez mieux pourquoi il faut l’optimiser ?
Le but du favicon ? Ralentir & attirer l’oeil
Comme je l’explique dans le tutoriel, tous les favicons ne se valent pas… certaines marques « connues » n’ont pas besoin de faire un favicon incroyable, parce que leur logo est très populaire. En revanche, pour les PME / TPE classiques, il est important d’avoir un favicon avec un fond dominant pour que la couleur puisse occuper un maximum l’espace (voyez le comme un espace pub à remplir). Certains favicons sont frêles et peu visibles et n’incitent pas l’oeil à s’arrêter sur le résultat.
La méthode qui marche à tous les coups
Parfois pour les entreprises il est compliqué à faire un « bon » favicon, leur logo ne s’y prête pas… trop de couleurs, trop complexe… ou vous ne trouvez pas une icône miniature adaptée. Pour cela je conseille une méthode basique d’utiliser simplement 1 ou 2 lettres de votre entreprise et de combiner cela avec un fond uni. Oui c’est très basique, mais ça reste assez souvent pertinent, la lecture est très visible et le fond dominant permet de toujours attirer l’oeil… Après bien sûr tout est une question de goût… le design c’est souvent un débat sans fin.
Résumé de la vidéo : Le favicon peut capter des visiteurs et aide à vous identifier
- Pour commencer je vous montre les emplacements où peut potentiellement s’afficher le favicon.
- Une des grandes questions c’est aussi comment « résumer » votre logo en 16 pixels, essayez-vous à cet exercice amusant…
- Ensuite, on va tous faire les artistes en dessinant à main levée dans Favicon.cc et on vivra aussi le fameux effet « Insta VS reality ».
- La méthode aussi plus facile est d’utiliser un convertisseur d’image qui va la convertir directement en favicon, exemple avec ce site.
- Faut-il absolument utiliser que le fichier « .ico » ? Actuellement je pense que c’est suffisant, car c’est le standard… mais certains supports peuvent bénéficier d’optimisations en utilisant des fichiers en différents formats.
Bonjour Germain,
C’est drôle car j’étais en train de travailler sur une problématique de favicon avec ma version de Prestashop (1.7.2.4), puisque les favicons que vous montrez dans les résultats des recherches Google, mon favicon n’était pas visible – seul le favicon standard de Google y était (petit globe gris clair).
J’ai donc fait des cherches, et j’ai finalement ajouté les lignes de code ci-dessous dans le « block » des icones, dans le fichier head.tpl – puis ajouté les correspondances dans les dossiers respectifs.
Hier, je ne voyais toujours pas mon favicon dans les recherches Google, puisque j’avais encore et toujours le favicon de Google, mais aujourd’hui, je ne vois plus aucun favicon dans les résultats Google, d’aucun sites Internet ! Bizarre, bizarre !
Ni sur Firefox, ni sur Chrome, seulement Explorer a encore ces favicons… (j’ai nettoyé les Caches…, mais peut-être est-ce seulement chez moi !)
Enfin, au final, je partage mon expérience car dans mes recherches à ce sujet, j’ai trouvé plusieurs sites qui expliquent le problème – de là les lignes de code sus-citées, et certains sites qui vérifient les icones et favicons. En voici un…
https://realfavicongenerator.net/
Si quelqu’un a une idée du pourquoi je n’ai pas mon favicon dans les recherches Google, je suis preneur (j’ai bien-sûr déjà mon favicon dans l’Admin).
Cordialement,
Eric
Prestashop 1.7.2.4
Thème actif : classic
Bonjour,
Je crois que récemment Google a fait à nouveau des changements dans les SERP et l’affichage n’est plus pareil… De mon côté les favicons ont disparu de la recherche Desktop (mais c’est peut-être temporaire, ils vont revenir) : https://www.theverge.com/2020/1/17/21070871/google-favicon-search-icons-links-brands
A bientôt !
Juste au moment où je me penchais sur ton tuto… je reçois un tweet…
https://twitter.com/gaurangalat/status/1220787158585397250?s=21
PS: ça fait environs une semaine que je « customise » mon site grâce à toi. Merci de mettre tes connaissances au service des amateurs débutants. Tout est tellement clair. Un vrai plaisir.
Ah je ne deviens pas fou alors 😉
Hello,
Oui bonne remarque (super la mention Twitter) il semble que Google soit revenu en arrière sur l’affichage du favicon… mais sur mobile par contre, ça fonctionne toujours.
A bientôt !