Avec la récente mise à jour des résultats de recherche mobiles de Google et l’apparition du favicon directement en haut à droite de chaque résultat de recherche, l’optimisation du favicon peut désormais vous permettre d’optimiser votre CTR (taux de clic) dans les résultats naturels. Voici comment en créer un simplement avec un générateur gratuit en ligne.
Sommaire
Rappel : un favicon, qu’est ce que c’est ?
Le favicon est un icone (historiquement au format .ico) qui apparait dans les onglets des navigateurs à gauche du title de la page mais aussi depuis peu dans les résultats de recherche naturels de Google.
Comment savoir si son site dispose bien de toutes les variantes de favicons ?
Pour tester si vous avez bien configuré le favicon traditionnel et tous ses dérivés (icone iPhone, Microsoft, …) sur votre site, vous pouvez lancer un audit rapide ici : https://realfavicongenerator.net/favicon_checker
Une fois sur cette page, il vous suffit de rentrer l’URL de votre site puis de lancer le test.
Vous devriez ensuite avoir une page de résultats ressemblant à-peu-près à ça :
Dans notre cas, on voit qu’il nous manque deux types de dérivés du favicon mais que le favicon principal est bien disponible dans les dimensions recommandées.
Cet audit de favicon permet également de prévisualiser le favicon tel qu’il est actuellement configuré.
Quelles sont les recommandations de Google pour les favicons ?
Aperçu de l’emplacement des favicons dans les résultats de recherche de Google (sur smartphone)
Pour que votre favicon s’affiche au mieux sur les résultats de recherche de Google, ce dernier doit :
- Faire 48 x 48 pixels minimum (Google le redimensionne ensuite automatiquement)
- Etre au format .ico, .png ou .gif (pour disposer d’une compatibilité sur quasi tous les navigateurs)
- Pouvoir être crawlé par GoogleBot (pas de blocage via le robots.txt)
- Représenter la marque du site web (et pas autre chose)
- Etre intégré dans la balise <link rel= »icon » href= »urldufavicon »> dans le header de votre site avec l’URL menant à l’endroit où est hébergé le favicon
- Ne pas contenir d’image à caractère pornographique ou haineux (Google peut détecter automatiquement ce type d’images et les remplacer par une image par défaut)
Google se réserve le droit de ne pas afficher un favicon dans ses résultats de recherche si cela ne lui semble pas pertinent ou si ces consignes ne sont pas respectées.
Comment créer un favicon avec un générateur gratuit en ligne ?
Pour créer un favicon au format .ico et toutes les autres variantes de tailles et formats, il vous suffit d’utiliser un outil en ligne qui va faire quasiment tout le boulot de création à votre place. Voici comment ça marche :
- Rendez-vous sur cette page : https://realfavicongenerator.net/
- Insérer le logo (ou l’image) que vous souhaiter convertir en favicon en cliquant sur « Select your favicon picture » : le site recommande que cette image soit au moins au format carré dans une résolution de 270 x 270 pixels ou plus pour un meilleur rendu final
- A ce stade là, le générateur en ligne vous présentera un aperçu de toutes les versions de votre favicon et vous pourrez configurer et personnaliser quelques éléments
- Si vous n’avez pas la possibilité de placer les fichiers que l’outil va vous générer à la racine de votre site / serveur, il vous faudra alors définir le chemin (l’URL) où vos fichiers seront disponibles sur votre serveur (ex : https://www.leptidigital.fr/medias/favicons/) dans la section « Favicon Generator Options« .
- Une fois que tout est OK, cliquez ensuite sur « Generate your Favicons and HTML code » : vous obtiendrez ainsi le code HTML exact à copier-coller n’importe où dans le <head> de toutes les pages de votre site web ou blog et pourrez télécharger tous les fichiers à mettre à la racine de votre serveur (ou dans le dossier préalablement choisi).
Une fois le code html et les fichiers générés, il ne reste plus qu’à tout mettre sur le serveur et mettre le code dans le de chaque page de votre site (via le fichier header.php si vous êtes sur WordPress par exemple).
Si vous ne vous y connaissez pas un minimum, il est préférable de demander cela à votre développeur / webdesigner ou intégrateur. Cela ne leur prendra que quelques minutes.
👉 pour ceux que ça intéresse, voici un petit tutoriel pour modifier dynamiquement le title de vos pages lorsqu’elle passe en onglet inactif sur un navigateur.
Vous souhaitez recevoir nos meilleurs articles ?
En vous abonnant à la newsletter LEPTIDIGITAL, vous confirmez avoir pris connaissance de notre politique de confidentialité et de traitement des données (votre email ne sera jamais partagé et restera anonyme 😉 ).
