Pourquoi chaque site Web a besoin d’un favicon et comment le faire correctement

Le favicon est une petite image carrée qui représente un site Web dans les navigateurs Web. Si vous jetez un œil à la barre d’adresse de votre navigateur en ce moment, je suis sûr que vous verrez plusieurs favicons, dont celle de SE Ranking. En règle générale, les favicons comportent un logo, la première lettre du nom de l’entreprise ou simplement une image qui reflète les spécificités du site Web qu’elle représente.

Les favicons nous aident à associer visuellement chaque onglet du navigateur à un certain site Web. Et si vous êtes comme moi et que vous avez tendance à garder des dizaines d’onglets ouverts simultanément, sans pouvoir finalement lire leurs noms, les favicons sont vos meilleurs amis qui facilitent grandement la recherche du site Web dont vous avez besoin.

Bien que les favicons puissent sembler petites et insignifiantes, en avoir une peut en fait faire une énorme différence en termes d’expérience utilisateur et de stratégie de marque en ligne. Dans cet article, nous découvrirons d’où viennent les favicons, quels types de favicons sont utilisés dans les navigateurs modernes et comment en créer un pour votre site Web.

D’Internet Explorer au SERP de Google

En 1999, le favicon a été introduit dans Internet Explorer pour aider les chercheurs à distinguer les pages Web mises en signet des autres. Et comme les pages mises en signet étaient (et sont probablement encore) appelées « Favoris » dans Internet Explorer, les mots « favori » et « icône » ont été mélangés pour créer un nouveau terme. 

1. De nos jours, les favicons s’affichent juste au-dessus de la barre d’adresse, que le site Web soit mis en signet ou non. Et dans la petite chance qu’un site Web n’ait pas de favicon, le navigateur affichera un symbole de navigateur générique.

2. En plus de la barre d’adresse, les favicons peuvent également être trouvées dans l’historique du navigateur.

3. Les pages marquées d’un signet seront également accompagnées d’un favicon, à la fois dans la barre de signets…

4. … et également sous « Autres signets ».

5. Depuis mai 2019, Google utilise des favicons dans le SERP mobile, et le SERP de bureau a également fait peau neuve début 2020.

Les favicons attirent l’attention des utilisateurs et renforcent la notoriété de la marque. Si les utilisateurs visitent plusieurs fois un site Web avec un favicon mémorable, ils le distingueront facilement des autres à l’avenir. Pensez à une marque célèbre avec laquelle vous interagissez quotidiennement, comme Facebook ou Twitter, vous devriez pouvoir facilement imaginer son favicon les yeux fermés.

Les favicons Facebook et Twitter ressemblent exactement à leurs logos respectifs. Alors, cela signifie-t-il que tout ce dont vous avez besoin pour un favicon est de minimiser l’image de votre logo et de la télécharger sur votre site Web ? Plongeons dans tous les détails techniques et parlons de ce qu’il faut pour créer un favicon.

Répondre aux exigences techniques

Maintenant, si vous voulez que vos favicons s’affichent correctement sur toutes sortes d’appareils, en bonne qualité et avec l’image que vous avez en tête, vous devez suivre les directives, les normes, les meilleures pratiques, tous les paramètres techniques des favicons.

Mais par où devez-vous commencer ? Commencez par choisir le bon format et la bonne taille de favicon.

Format d’icône de favori

À l’origine, toutes les favicons ont été créées sous forme de fichiers ICO, un format développé par Microsoft pour stocker les icônes des programmes Windows. Le plus grand avantage de ce format est qu’il peut stocker des images de différentes tailles dans un seul fichier.

Dans le passé, Internet Explorer ne prenait en charge que ce format de fichier, mais les navigateurs Web modernes vous permettent également d’utiliser des icônes PNG avec certains navigateurs prenant même en charge les favicons GIF, JPEG et SVG. La seule exception ici étant les versions antérieures d’Internet Explorer, telles que 10 et inférieures, elles ne sont compatibles qu’avec les fichiers ICO.

En règle générale, les favicons ICO sont désormais considérées comme un peu obsolètes et la plupart des sites Web ont aujourd’hui des favicons au format PNG. La raison en est la qualité de l’image : les favicons PNG sont bien mieux compatibles avec la plupart des navigateurs et des appareils modernes.

Les favicons dans les formats de fichiers SVG, GIF et JPEG ne sont pas très bons en termes de compatibilité avec les navigateurs. Cependant, cela peut changer à l’avenir. Le format SVG (Scalable Vector Images) peut devenir la nouvelle norme car son utilisation résoudra le problème de la création de plusieurs favicons de différentes tailles pour répondre à tous les appareils populaires. Ainsi, alors que seuls quelques navigateurs prennent actuellement en charge les favicons SVG, d’autres pourraient très bien rattraper leur retard bientôt.

Pour savoir quels formats de favicon sont pris en charge par différents navigateurs, consultez le site Web Can I Use. Ici, vous pouvez voir, par exemple, quelles versions de navigateur sont compatibles avec les favicons PNG et SVG.

Taille des favicons

Le favicon classique ne fait que 16х16 pixels. Certains navigateurs plus anciens utilisent encore de minuscules carrés, mais si vous voulez que votre favicon apparaisse bien sur les appareils modernes, vous devrez également créer des variantes de favicon avec une résolution plus élevée. Selon le type de système d’exploitation, vous devrez peut-être utiliser les tailles suivantes :

Alors, quelle taille de favicon est préférable ? Google recommande d’utiliser la plus grande résolution possible de 192 × 192. Récemment, certains webmasters ont reçu une lettre de Google les encourageant à utiliser des favicons haute résolution pour obtenir plus de clics. Pour le moment, Google étend simplement les favicons basse résolution existantes lorsqu’une plus grande taille est requise, comme pour l’écran d’accueil Android. En conséquence, toutes les images semblent floues et nuisent à l’expérience utilisateur.

Donc, si vous ne voulez pas perdre de clics, envisagez de « mettre à niveau » le favicon de votre site. Et voici quelques directives générales auxquelles vous devez vous conformer:

• Utilisez une icône carrée.
• Le favicon ne doit représenter que votre marque et ne doit pas contenir de symboles inappropriés (comme des croix gammées) – sinon Google ne l’affichera pas et utilisera le symbole générique de favicon à la place.
• Le fichier favicon doit être accessible aux robots d’exploration de Google.

Maintenant, comme l’attribut size a été introduit dans HTML5, vous pouvez également spécifier facilement plusieurs tailles d’une même icône. L’attribut vous permet de définir la largeur et la hauteur du favicon, et vous pouvez également spécifier plusieurs valeurs séparées par un espace:

<link rel=”icon” sizes=”<16>X<16>”>

<link rel=”icon” sizes=”<16>X<16>,<32>X<32>”>

Les paramètres techniques des favicons dépendent en grande partie des appareils ou des navigateurs qui les scannent. Pour cette raison, il existe des centaines de services en ligne qui peuvent vous aider à prendre en compte toutes les nuances et à créer des favicons au format et à la taille appropriés.

Tourner vers le Web pour obtenir de l’aide sur la création d’un favicon

Si jamais vous avez l’idée de simplement changer le nom de votre fichier de logo en favicon.ico, oubliez-le car cela ne fonctionne pas comme ça. Vous obtiendrez probablement de nombreuses erreurs lors de l’affichage de votre favicon dans différents navigateurs.

Cela peut-il être évité ?

Sûr. En fait, il existe plusieurs façons de créer un favicon de site Web, telles que:

1) Créez-le dans un éditeur graphique comme Photoshop en utilisant un plugin spécial Favicon.ico.

2) Rédigez-le dans des services en ligne spéciaux (par exemple, Katvin ou favicon.cc), puis téléchargez-le à partir de là dans un format approprié.

3) Utilisez une image existante de, par exemple, votre logo et téléchargez-la sur un générateur de favicon en ligne comme Favicon.io, Realfavicongenerator.net, etc.

4) Téléchargez des favicons prêts à l’emploi à partir de bases de données spéciales, telles que Findicons avec plus de 500 000 options parmi lesquelles choisir, et IconJ avec plus de 18 000 favicons.

Une fois que vous avez téléchargé le favicon généré, il ne vous reste plus qu’à l’ajouter à votre site.

Décorer votre site avec un favicon

Tout d’abord, téléchargez votre favicon dans le catalogue racine du site à l’aide d’un gestionnaire de fichiers tel que Filezilla. Ensuite, tout ce que vous avez à faire est d’insérer le morceau de code suivant dans la balise meta <head></head>:

<head>

  …

  <link rel=”icon” href=”https://yoursite.com/favicon.png” type=”image/x-icon”>

  <link rel=”shortcut icon” href=”https://yoursite.com/favicon.png” type=”image/x-icon”>

  …

</head>

Bon, maintenant que nous avons compris tous les principaux aspects techniques des favicons, passons à ce qui est considéré comme approprié dans la conception des favicons, et ce qui devrait être complètement effacé de votre mémoire. 

Simple ne veut pas dire pire dans la conception des favicons

Avant de partir en courant pour écrire votre prochaine idée de favicon, pourquoi ne pas jeter un œil aux résultats de recherche qui apparaissent pour vos mots-clés cibles ? A quoi ressemblent les favicons qu’ils ont ?

Et pendant que vous le ferez, posez-vous ces questions :

Votre favicon se démarque-t-il de la foule ? Peut-être que vos rivaux saupoudrent leurs favicons de couleur et, pour vous opposer à cela, vous pourriez opter pour un favicon en noir et blanc ou même quelque chose de conceptuellement différent à la place.

Un favicon GIF animé peut-il vous aider à être différent ? Ou s’agira-t-il simplement d’une horreur totale pour les chercheurs, créant un effet qui donnera (très probablement) l’impression que votre site Web n’a pas fini de se charger.

Comprenez-vous bien votre favicon lorsqu’il fait 16×16 pixels ? Faites de votre mieux pour ne pas avoir de petits détails dans votre favicon et n’essayez pas non plus d’y inclure toutes les couleurs imaginables.

Votre favicon est-il représentatif de votre niche et de votre site Web ? Parfois, vous pouvez simplement regarder la favicon d’une marque et comprendre immédiatement le type d’entreprise dans laquelle elle se trouve. D’autres fois, vous pouvez même reconnaître le style visuel exact de la marque et de son site Web dans la favicon.

Gardez à l’esprit qu’un bon favicon sera toujours clair, simple et mémorable.

Maintenant que vous savez comment créer un favicon magnifique et mémorable et l’ajouter à votre site Web, il est temps de déterminer s’il sera correctement affiché dans les moteurs de recherche. Allons voir de plus près !

Vérification de votre favicon pour les erreurs critiques

Le simple fait de googler votre site Web vous permettra de vérifier rapidement comment votre favicon est affiché dans la recherche ou vous pouvez utiliser cet exemple de lien pour n’afficher que le favicon de votre site : 

• http://www.google.com/s2/favicons?domain=mysite.com

Il existe également un autre moyen de vérifier l’apparence du favicon sur différents appareils : en utilisant des services en ligne spéciaux, tels que Realfaviconenerator.

Cependant, si votre favicon ne s’affiche pas correctement ou pas du tout sur Google pour une raison quelconque, commencez par vérifier les éléments suivants :

1. L’image graphique est-elle située dans le dossier racine de la ressource au format de fichier ICO, PNG ou GIF ?
2. Le code menant à l’image sur les pages de la ressource est-il écrit correctement ?
3. Le favicon est-il clair et unique ?
4. Un fichier favicon est-il accessible aux robots de recherche ?

Je tiens à souligner que le chemin d’accès à l’image a un impact direct sur la qualité de l’affichage du favicon. Si vous souhaitez supprimer ou modifier votre favicon de quelque manière que ce soit, il vous suffit de supprimer ou de modifier le fichier favicon.ico (JPEG, GIF, PNG).

De manière générale, même si vous faites tout correctement de votre côté, gardez à l’esprit que les moteurs de recherche mettent du temps à indexer les favicons. En fait, il y a tout un bot dédié qui ne fait que ça. Ce qu’il fait en fait, c’est qu’il télécharge des icônes de site Web sur son serveur, de sorte que l’indexation de votre image graphique peut prendre jusqu’à plusieurs semaines.

Pourquoi vous ne pouvez pas vous passer d’un favicon

Les favicons aident les sites Web à rester à flot dans le vaste océan de ressources en ligne, et les rendent plus attrayants et professionnels aux yeux des visiteurs.

Si vous avez besoin d’aide avec le vôtre, tournez-vous vers notre audit de site Web pour obtenir de l’aide. Entre autres choses, il peut effectuer une vérification technique complète de votre site Web, y compris la recherche de votre favicon.

Si vous êtes sûr d’avoir un favicon, mais que notre audit de site Web ne semble pas le voir, c’est qu’il y a un problème d’indexation ou que l’adresse de l’icône du site Web est incorrecte. Revoyez tout pour vous en assurer.

Vous savez comment on dit que le diable est dans les détails ? Eh bien, votre favicon est un tout petit détail qui peut affecter la perception du public de votre site et de votre marque, leur reconnaissance et même le volume de trafic généré par la recherche, alors ne le sous-estimez pas.

Pour résumer, ne plaisantez pas avec votre favicon car un bon favicon fait partie intégrante de votre marque et de la norme technique de votre site Web. Cela vaut vraiment la peine de chaque seconde que vous y investissez.