Bonjour à tous 😉

Depuis plusieurs années, beaucoup d'utilisateurs continuent d'utiliser des "favicons" non compatible sur certains navigateurs et certains appareils...

Une "favicon" est une icône informatique symbolisant un site web.

Ces icônes sont créées et utilisées par les concepteurs des sites internet. Les navigateurs web peuvent utiliser la "favicon" dans la barre d'adresse, les signets, les onglets ou encore les autres raccourcis.

Les "favicons" ont été créées pour pouvoir effectuer une recherche visuelle rapide afin de trouver le site Web dont vous avez besoin. De cette manière l’audience que l'on cible pourra nous trouver plus rapidement et simplement.

Les "favicons" ont fait récemment leur apparition dans la SERP de Google (sur la version mobile puis sur PC). Cette nouvelle fonctionnalité donne encore plus d’importance aux "favicons", qui vont sûrement avoir une influence sur le taux de clics des résultats naturels.

En effet, un internaute retiendra plus facilement notre "favicon" que le nom de domaine de notre site. Il sera plus enclin à recliquer sur la description d’un site si la "favicon" lui semble familier. A l’inverse, l’absence de "favicon" va également rendre notre site plutôt "invisible" et moins attractif, surtout parmi une liste de concurrents qui eux l’ont ajouté.

Gagner en visibilité sur les moteurs de recherche se traduit par de nombreuses petites optimisations, et l’ajout d’une "favicon" en fait partie. Il s’agit d’un élément à ne pas oublier lors de la création de notre site web.

Seulement voilà, beaucoup de développeurs web se contente uniquement de cette ligne de code :

<link rel="shortcut icon" type="image/x-icon" href="/favicon/favicon.ico" />

Aujoud'hui cette ligne de code n'est plus suffisante et votre "favicon" n'est donc pas compatible sur les autres appareils tels que les smartphones, tablettes...etc.

Pour la rendre compatible, un seul outil : Real Favicon Generator ! 😉

Real Favicon Generator est un outil gratuit en ligne permettant de vérifier et de générer des fichiers "favicon" pour son site web.

Bien plus complet que d'autres outils du même acabit, Real Favicon Generator ne se contente pas de la version ""favicon" de bureau" mais également des versions pour smartphones et tablettes iOS, Android et Windows Phone.

Ainsi, s'il manque certaines version ou tailles d'icones, ou que leur taille n'est pas correctement spécifiée, l'outil ne manquera pas de vous en faire part.

Une fois l'audit réalisé, Real Favicon Generator vous propose de concevoir l'ensemble des fichiers (ZIP) et vous livre le code HTML à copier dans vos pages.

Vous pouvez retrouver l'auteur de ce site sur AlsaCréations 😉

Comment ça marche ?

• Vous pouvez cliquez sur le bouton "Demo with a random image" pour avoir un aperçu des différentes options que propose Real Favicon Generator 😉
• Une fois que vous avez créer votre logo d'une taille de 260x260 (très important !), il vous suffit de l'uploader sur Real Favicon Generator en cliquant sur le bouton "Select your Favicon image"
• Ensuite, vous serez redirigé sur une page, permettant de vérifier le comportement de votre "favicon" sur les différents appareils et navigateurs avec plusieurs paramètres. Le site est en anglais, n'hésitez pas à utiliser DeepL si vous avez des doutes sur une ou plusieurs phrases 😉
• Une fois que vous avez terminé toutes les configurations possibles, cliquez sur le bouton "Generate your Favicons and HTML code". Le site génèrera les différents fichiers de votre "favicon" en fonction de vos paramètres 😉
• Il vous suffira maintenant de placer vos fichiers dans un dossier "favicon", que vous aurez créer, sur le serveur de votre site ou votre serveur local. Ainsi n'oubliez pas de modifier les chemins d'accès dans le code généré par Real Favicon Generator pour appeler les différents fichiers.
• Une fois que vous avez mis en place vos fichiers, il vous suffira de vous rendre à cette adresse et de mettre l'URL de votre site pour tester la compatibilité de votre "favicon" et vérifier les erreurs. S'il y a du rouge, des erreurs sont détectées... S'il y a du vert, c'est OK ! Vous ne pourrez pas effectuer le test si votre site est en local !

Si vous avez des questions, n'hésitez pas à les poser en commentaires !

Si vous avez besoin d'aide, créez un topic !

Bonne continuation sur Sitedudev !