Les plus belles choses viennent dans de petits écrins, exactement comme l’humble favicon (contraction de « favorite icon », icône favorite). Ces minuscules badges de marque accompagnent les navigateurs Web depuis l’époque d’Internet Explorer dans les années 1990, apparaissant dans les onglets de navigation et les vues de signets. Les favicons sont des rappels visuels qui aident les clients à associer votre site Web à l’identité de marque de votre entreprise.
Il est temps de dépasser l’icône générique du navigateur. En un rien de temps, vous pouvez créer un favicon qui marque les esprits (et aide les clients à naviguer dans une fenêtre de navigateur encombrée d’onglets).
Qu’est-ce qu’un favicon ?
Un favicon est une toute petite image qui apparaît à côté des titres de page dans les onglets des navigateurs Web, les barres de signets, les barres de favoris, les résultats de l’historique de navigation et les pages de résultats des moteurs de recherche.
Le favicon sert de signet visuel à votre site Web et aide les internautes à identifier facilement une page Web lorsqu’ils ont plusieurs onglets ouverts. Les favicons peuvent apparaître comme icônes de raccourci dans la barre des tâches lorsqu’un site Web est réduit. Quand les utilisateurs mettent votre site en signet, le favicon fait office d’icône de signet, facilitant la recherche du site parmi les autres pages sauvegardées.
Dans certains systèmes d’exploitation, le fait de glisser-déposer des URL depuis la fenêtre du navigateur vers le bureau crée des icônes de raccourci sur le bureau. Les favicons des navigateurs sont également souvent réutilisés comme icônes de raccourci.
Avantages à utiliser des favicons
- Augmenter le CTR
- Développer la notoriété de marque
- Améliorer l’expérience utilisateur et le temps de visite
Un favicon n’améliorera pas par magie le classement SEO de votre site Web, mais le fait d’en ajouter un, avec d’autres améliorations de design UX, peut contribuer à accroître la convivialité de votre site Web. En plus de cela, le favicon joue aussi d’autres rôles bénéfiques eu égard aux performances de votre site :
Augmenter le CTR
Google et les autres moteurs de recherche affichent les favicons dans les résultats de recherche. Un favicon accrocheur ou facilement reconnaissable peut renforcer votre reconnaissance de marque, rendant plus probable la visite de votre site Web par les internautes. Cela augmente votre taux de clic (CTR, click-through rate), qui est l’une des métriques e-commerce importantes pour le SEO.
Développer la notoriété de marque
Lorsqu’un favicon renforce le logo de votre marque, il agit comme une publicité gratuite dans la barre de signets de l’utilisateur, sur l’onglet de votre site Web et sur les pages de résultats des moteurs de recherche (SERP, search engine result page), ce qui peut accroître la notoriété de marque.
Améliorer l’expérience utilisateur et le temps de visite
Un favicon instantanément reconnaissable peut augmenter les chances qu’un utilisateur mette votre page Web en signet, comportement qu’un moteur de recherche comme Google reconnaît comme un signal positif. Cette petite amélioration de l’expérience utilisateur encourage les visites répétées, augmentant ainsi le trafic de votre site Web et le temps de visite (durée qu’un utilisateur passe sur une page Web avant de retourner aux SERP).
Directives pour créer un favicon pour votre site Web
Un bon favicon respecte des exigences particulières de taille et de format de fichier :
Choisir la bonne taille
La taille idéale pour un favicon est de 16 pixels sur 16 pixels, bien que certains favicons soient conçus en 32 pixels sur 32 pixels ou 48 pixels sur 48 pixels. La taille 16 sur 16 est prise en charge dans tous les affichages de navigateurs Web : barre d’adresse, onglets ou vues de signets. C’est le choix le plus sûr.
Choisir un format de fichier compatible
Le format de fichier d’origine joue un rôle crucial dans la qualité de conversion d’une image en favicon. Les formats de fichier les plus courants pour créer un favicon sont les formats PNG et ICO. Les fichiers PNG assurent une compression de données sans perte et une totale transparence, donc la qualité d’image ne souffrira pas lors du redimensionnement. Les fichiers ICO, utilisés dans l’explorateur Windows, contiennent une ou plusieurs images à différentes tailles et profondeurs de couleur, et peuvent donc être bien redimensionnés. Le format SVG n’est pas aussi bien pris en charge par les navigateurs, mais il se charge rapidement et est infiniment redimensionnable. Évitez les formats tels que JPEG, qui perdent des données d’image lors de la réduction.
Envisager un favicon animé
Les GIF animés ou fichiers Javascript ajoutent du dynamisme, mais ils ont des limitations, notamment en matière de compatibilité avec les navigateurs. Testez votre favicon animé sur plusieurs navigateurs, car ce qui semble parfait sur Google Chrome pourrait ne pas fonctionner sur un autre navigateur.
Générateurs de favicon populaires
Vous pouvez utiliser un générateur de favicon en ligne pour créer un favicon personnalisé qui reflète votre identité de marque. Voici quelques options populaires :
- Favicon.io [en anglais] vous permet de créer un favicon à partir d’un fichier image, d’un lien ou de texte et de le convertir en différents formats. Téléchargez les fichiers convertis, placez-les dans le répertoire racine de votre site Web, copiez les balises de lien et collez-les dans la balise head de votre page HTML.
- RealFaviconGenerator [en anglais] est une API interactive qui vous permet de spécifier comment elle doit traiter l’image maîtresse pour générer le favicon.
- Favicon Generator [en anglais] peut créer des favicons plateforme par plateforme, vous permettant de voir comment les designs apparaissent sur différentes plateformes et navigateurs.
- Favicon.ico & App Icon Generator [en anglais] de vous permet de télécharger une image existante et de la convertir au format ICO ou de parcourir les designs dans la galerie d’icônes.
Comment ajouter un favicon au code HTML
Une fois que vous avez créé le favicon de votre site, vous devrez le télécharger sur votre site Web et ajouter du code pour que les navigateurs et applications Web puissent l’afficher.
Un pointeur vers le favicon apparaît comme une ligne de code dans la section <head> du fichier HTML du site Web. Les navigateurs lisent les instructions dans la balise head pour trouver le favicon et l’afficher. Supposons que votre fichier favicon soit un fichier PNG nommé « brandXicon.png ». Ajoutez simplement cette ligne à l’intérieur de la balise <head> </head> :
<link rel="icon" type="image/png" href="/brandXicon.png">
Le favicon peut apparaître dans n’importe quel répertoire du site. Dans l’exemple, il est contenu dans le répertoire racine du site, un emplacement courant. Vérifiez que le chemin du fichier est exact.
Il est également possible d’avoir plus d’une taille de favicon et de toutes les charger. Vous aurez besoin d’une ligne de code pour chaque taille, toutes à l’intérieur de la balise <head> </head>. Donnez à chaque taille un nom de fichier unique et ajoutez un attribut « sizes » au code, comme ceci :
<link rel="icon" type="image/png" sizes="16x16" href="/brandXicon16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/brandXicon32x32.png">
Comment ajouter un favicon à un site Web Shopify
Si vous avez un site Web Shopify, vous pouvez facilement ajouter un favicon sans aucun codage nécessaire :
1. Dans un navigateur Web de bureau, allez dans le panneau d’administration de votre boutique en ligne.
2. Sélectionnez Thèmes, puis Personnaliser pour ouvrir l’éditeur de thème.
3. Cliquez sur Paramètres du thème. Cherchez l’icône d’engrenage.
4. Sélectionnez Favicon (dans certains thèmes, cela s’appelle « Logo »).
5. Sélectionnez votre image depuis la Bibliothèque de la boutique ou téléchargez-en une nouvelle.
6. Si l’option est disponible, modifiez le « Texte alternatif » du favicon à des fins d’accessibilité. Ce texte apparaîtra quand un utilisateur survolera le favicon.
7. Sauvegardez votre travail et testez les performances du favicon sur différents navigateurs.
Pour plus d’informations sur l’ajout de favicons depuis un iPhone ou un appareil Android, consultez le sujet d’aide Shopify correspondant.
Comment ajouter un favicon sur WordPress
Si votre boutique en ligne est un site Web WordPress, voici un guide étape par étape pour ajouter un favicon :
1. Allez dans le tableau de bord WordPress et cliquez sur Apparence.
2. Cliquez sur Personnaliser pour afficher une liste d’options.
3. Cliquez sur Identité du site. Cela contrôle des éléments comme le titre, la ligne de signature et le logo.
4. Dans la section Icône du site, cliquez sur Sélectionner l’icône du site pour télécharger la nouvelle image favicon.
5. Cliquez sur Publier pour mettre en ligne.
6. Testez l’apparence du favicon dans divers navigateurs Web.
Comment ajouter un favicon sur Wix
Un site Web Wix possède un favicon par défaut, mais les abonnés au forfait Premium peuvent le personnaliser. Pour changer le favicon de votre site Wix, procédez comme suit :
1. Allez dans Paramètres dans le tableau de bord du site.
2. À côté de Favicon, cliquez sur Gérer.
3. Cliquez sur Télécharger une image ou sur Télécharger un média pour télécharger une image depuis votre ordinateur.
4. Cliquez sur Ajouter à la page. Prévisualisez l’apparence du favicon sur votre onglet de navigateur.
5. Cliquez sur Sauvegarder, puis sur Publier.
FAQ sur les favicons
Favicon et logo : quelle différence ?
Un favicon est une petite icône qui apparaît à côté du nom de page ou de l’adresse de votre site dans les résultats de recherche, les onglets de navigateur et les barres de signets pour aider les internautes à identifier vos pages. Quant aux logos, ils représentent une marque dans l’ensemble du paysage marketing. Les favicons de la plupart des marques partagent des éléments de design avec leurs logos, et ils peuvent même être identiques si le logo est suffisamment simple.
Un exemple de favicon ?
Un favicon apparaît comme l’icône URL d’un site Web dans les barres d’adresse ou comme icône d’onglet dans le navigateur Web. Il aide les utilisateurs à identifier visuellement le site Web. Par exemple, le favicon de Shopify utilise le sac de shopping avec un « S » du logo.
Existe-t-il des outils pour concevoir des favicons ?
Oui, il existe de nombreux outils qui peuvent vous aider à concevoir un favicon pour votre site Web. Certains d’entre eux sont même gratuits. Comme exemples de générateurs en ligne, on peut notamment citer Favicon.io et RealFavIconGenerator.
