Comment afficher les favicons dans les résultats de Google ?

Vous avez certainement remarqué la présence de favicons, ces icônes symbolisant un site sur internet ? Mais comment faire pour les afficher directement dans les résultats de recherche Google ? Bien qu'ils soient désormais disponibles sur mobile depuis un certain temps, les favicons sont actuellement testés dans leur version desktop et  sont un excellent moyen de vous démarquer de la concurrence. Découvrez dans cet article comment créer des favicons !

favicona-dlonie-2x

Vous découvrez dans cet article :

  • A quoi ressemble un favicon dans les résultats de recherche Google et comment faire pour le créer ?

  • Quelles sont les exigences techniques auxquelles vous devez répondre pour pouvoir afficher un favicon ?

  • Bonus - Comment changer la couleur de la barre d’adresse du navigateur ?

À l'aide de nos conseils dans cet article, vous pourrez utiliser des favicons pour  différencier votre site web de vos concurrents et le mettre en valeur.

Mais commençons par le début !

#1 À quoi ressemble un favicon dans les résultats de recherche de Google ?

L'année dernière, Google a ajouté les favicons dans ses résultats sur mobile. En ce qui concerne la conception du moteur de recherche, ce changement peut être considéré comme une percée importante.

Closeup of hands of young man in checkered shirt using mobile phone while his partners arguing

La décision a été prise pour les raisons suivantes :

  • Avec le nouveau design, l'image de marque des sites web devient plus visible. 

  • La nouvelle présentation de la page de résultats aide les internautes à mieux comprendre les informations affichées. 

  • Les internautes peuvent choisir plus facilement les sites auxquels ils font confiance.

Les annonces publicitaires dans les résultats sur mobile affichent le mot "annonce" au lieu d'un favicon à côté de l'URL du site.

La nouvelle conception des résultats sur mobile a été un véritable succès. C’est la raison pour laquelle, Google a commencé à tester les favicons dans les SERP (pages de résultats d’un moteur de recherche) sur desktop.

favicons_Google

Les favicons peuvent donc vraiment aider une marque à se démarquer de la concurrence.

Vous ne voudriez pas que votre site soit affiché avec une icône par défaut, n'est-ce pas ?

Alors voici comment créer votre propre favicon !  

💡Ce n'est pas facile, mais grâce à un bon classement dans les moteurs de recherche vous pouvez gagner en visibilité et trafic.
Améliorez votre référencement naturel avec
notre checklist spéciale !

Téléchargez notre checklist

#2 Comment créer un favicon ?

Les propriétaires de boutiques en ligne ou de sites web utilisent généralement le logo de leur entreprise comme favicon. Nous vous expliquons comment faire la même chose !

L'outil Favicon.io est très utile à cet effet.

favicon_io-sp-2x

Vous pouvez simplement placer le fichier avec votre logo dans l'outil et il générera automatiquement des favicons pour vous.

Regardez l'exemple avec le logo Trusted Shops dans le mode "aperçu" de la capture d'écran.

Dès que vous aurez téléchargé le fichier, vous trouverez des favicons prêts à l'emploi en plusieurs tailles (pixels) et formats différents dans l'archive ZIP :

favicony_folder-sp

Vous pouvez également créer votre propre favicon avec un texte personnalisé et une couleur de fond. Voici un exemple avec mes initiales (SB) :

inicjaly-favicon_io-2x

Comme vous pouvez voir, l'outil est très pratique et ne se limite pas à de simples fichiers d’images.

Un bon favicon peut aussi bien attirer l’attention des clients potentiels qu'une bonne stratégie marketing sur Instagram ! Avez-vous déjà pensé à collaborer avec des influenceurs pour toucher un public plus large et améliorer votre visibilité ? Nous vous recommandons notre article : Réussir sa stratégie marketing d’influence sur Instagram ! [exemples] 

#3 Quelles sont les exigences techniques pour l'affichage des favicons ?

Google a défini des consignes techniques pour la création d’un favicon. Concernant ce sujet, vous devez toujours garder à l’esprit une chose :

Si vous ne remplissez pas les conditions de Google, votre favicon ne sera pas affiché dans les résultats de recherche !

Cependant, n'oubliez pas que Google ne peut pas garantir que votre favicon sera affiché, même si vous répondez aux exigences techniques.

Mais bien que Google l'indique dans son manuel officiel, il est peu probable que cette situation se produise.

Alors voici les consignes techniques que Google a mises en place pour les favicons :

1. La page d'accueil et le fichier du favicon doivent être indexables

Cela signifie qu'ils doivent pouvoir être explorés par Google. Ils ne peuvent pas utiliser l’instruction noindex dans le fichier robots.txt (ou ailleurs). Si vous n'avez jamais modifié le fichier robots.txt, alors tout devrait fonctionner correctement !

2. Le favicon doit représenter visuellement la marque de votre site

Google exige que votre favicon soit unique et lié à votre site web. L'affichage de votre favicon dans les résultats de Google vise à permettre aux internautes d’identifier plus facilement le contenu qui les intéresse.

3. Le fichier du favicon doit avoir une taille et un format spécifiques

Bien que Google redimensionne automatiquement les favicons qu'il trouve au format 16 x 16 pixels, le moteur de recherche exige que les favicons des propriétaires de sites web aient un format de fichier plus grand.

Les favicons doivent être un multiple d’un carré de 48 pixels (48 x 48 pixels, 96 x 96 pixels, 144 x 144 pixels, etc.).

En principe, vous pouvez utiliser le favicon d’une taille de 512 x 512 pixels comme favicon principal défini dans le code HTML.

4. Disponibilité sous une URL spécifique

Votre favicon doit être trouvé avec une URL stable. Si vous modifiez l'URL, Google peut perdre le favicon dans votre index pendant un certain temps. Donc, ne modifiez pas l’URL fréquemment !

#4  Comment ajouter votre favicon à votre site web ?

Vous pouvez ajouter un favicon à votre site web en utilisant une balise dans le code HTML.

Pour une icône au format .ico :

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

Pour une icône au format .png :

<link rel="icon" type="image/png" href="favicon.png" />

Une balise doit être insérée dans la section <head>.

Vous pouvez également utiliser des instructions prêtes à l'emploi pour votre CMS :

#5 Bonus : Comment changer la couleur de votre navigateur pour correspondre à votre site ?

Les navigateurs mobiles permettent aux sites web de changer la couleur de la barre d’adresse en fonction de la couleur de votre marque. Cette possibilité permet d’accroître la notoriété de votre entreprise et d'être reconnu par vos clients potentiels.

Pour obtenir cet effet, vous devez insérer la balise suivante dans le code HTML :

<meta name="theme-color" content="#f73e3e" />

#f73e3e est le code couleur. Il changera en fonction de la couleur que vous voulez utiliser pour la barre d’adresse du navigateur. Il doit être indiqué au format HEX. Vous pouvez télécharger une couleur dans ce format sur la page HTML Colour Codes.

Insérez le code ci-dessus dans la section <head> de votre page, comme dans l'exemple suivant :

theme-color-2x

Conclusion

Nous vous avons montré comment ajouter un favicon à votre site web afin qu'il soit affiché sur les pages de résultats de Google. Un favicon permet d’augmenter la notoriété de votre marque. 

De bonnes photos produit sont essentielles pour convertir les visiteurs de votre boutique en clients. Téléchargez gratuitement notre checklist pour concevoir LA photo produit idéale ! 👇

checklist pour concevoir la photo produit idéale ecommerce

Traduit de l'article original : How Can You Add Favicons to Google Search Results?

0 Commentaires