Léonard de Vinci disait : « Les détails font la perfection, et la perfection n’est pas un détail ». Il n’y a rien de plus vrai, notamment lors de la créateur d’un site internet. C’est l’assemblage de plusieurs minis éléments qui permet de créer un outil harmonieux et fonctionnel. Si vous êtes déjà passé par l'étape générateur de logo, vous devez maintenant créer une favicon. Aussi petite soit-elle, cet élément a une importance capitale dans l’aspect général de votre site et l’impression laissée aux visiteurs.

Mais attendez, savez-vous ce qu’est une favicon ? Nous vous expliquons tout sur cet outil. À quoi sert-il, quelle taille doit-il faire et comment le créer pour votre site internet ?

Définition : qu’est-ce qu’une favicon ?

La favicon est une petite icône (de 16x16 pixels) utilisée sur les navigateurs web pour représenter un site internet. Souvent écrit « le favicon » au masculin. En effet, ce mot vient de l'abréviation de « favorite icon », ou icône favorite en français, c'est pourquoi le terme favicon est au féminin et non au masculin comme on l'entend fréquemment.

Elle s’affiche en haut à gauche dans la barre d’adresse, les signets, les onglets, les favoris ou encore l’historique de votre navigateur. C’est un outil visuel qui permet d’identifier votre site sur le Web.

Favicon sur un navigateur Web

Pourquoi avoir une favicon ?

Elles sont petites, mais ont toute leur importance. Malgré leur taille, les favicons sont essentielles. Elles améliorent l’expérience utilisateur, ont un impact positif sur votre référencement, jouent un rôle crucial dans le branding de votre marque et vous permettent de gagner en professionnalisme. Voyons cela plus en détails :

L’expérience utilisateur : la favicon est un élément visuel de votre site dont les visiteurs se souviennent. Grâce à elle, les internautes vous repèrent facilement sur la barre de navigateur, et cela, même lorsque vous avez une trentaine d’onglets ouverts en même temps.

Le référencement : bien que la favicon ne soit pas un critère pour classer votre site sur les moteurs de recherche, elle a un impact indirect sur votre référencement. En devenant un site de confiance, vos visiteurs passent plus de temps sur vos pages. Ce qui est un gage de qualité pour Google, qui saura comment vous récompenser.

L'image de marque : pour avoir une identité visuelle cohérente, il est important de ne rien laisser au hasard. La favicon est l’icône de votre site, il est donc normal qu’elle soit personnalisée à son image. Elle exprime votre style et votre tonalité au-delà du cadre strict de vos pages.

Le professionnalisme : la favicon vous permet d’être plus crédible auprès de votre cible. Elle donne un aspect fini et professionnel à votre site. Les visiteurs savent qu'ils se trouvent bien sur votre site internet et non ailleurs.

Comment créer une Favicon ?

Vous pouvez réaliser votre favicon de deux manières : soit en faisant appel à un graphiste professionnel, soit en la concevant vous-même grâce aux outils disponibles en ligne. Pour cela, vous devez déjà savoir comment créer un logo. Nous vous recommandons le Wix Logo Maker. Il vous permet de créer une favicon personnalisée et professionnelle qui reflète au mieux votre style et répond à vos besoins.

Taille

La taille optimale d’une favicon est de 16x16 pixels. C’est leur taille classique. Elles peuvent parfois s’afficher en plus grande dimension en fonction de leur utilisation :

32 x 32 : favicon de raccourci de la barre des tâches

96 x 96 : favicon de raccourci de bureau

180 x 180 : favicon Apple touch

Astuce : Découvrez notre outil pour redimensionner une image à la taille de votre choix.

Fichier

Le fichier idéal pour une favicon est le JPEG ou le PNG. Le SVG est un choix de plus en plus populaire, car de plus en plus de navigateurs commencent à le prendre en charge. Les navigateurs sont également en mesure d'afficher des favicons créés en tant que GIF mais leur petite taille les rend plus difficiles à voir. Vous souhaitez en savoir plus sur les différents formats d’images ? Consultez notre guide pour en savoir plus et apprendre à les utiliser.

Transparence

Si votre image a un fond transparent, assurez-vous d’enregistrer le fichier PNG en activant l’option de transparence.

Conseils pour réaliser une favicon

Plus votre icône est petite, plus vous devez la créer avec attention. Voici une liste d’astuces pour que votre favicon se fasse remarquer.

Simplicité

La favicon est une icône très petite. Elle doit donc être très simple. Évitez d’ajouter trop de détails et de créer un design complexe. Les textures ou les ombres rendront votre visuel difficile à lire. Optez à la place pour une image simple avec des aplats de couleurs pour être immédiatement reconnaissable.

La favicon d'Ilaria Bonardi, créatrice de bijoux et utilisatrice de Wix, est un excellent exemple de favicon simple, composé de trois points. Nous aimons également le plaisir excentrique de la favicon de Ducknology, le canard est adapté de leur logo, et représente tout ce qui rend ce site et la marque si unique.

Identité visuelle

Votre favicon doit refléter la personnalité de votre marque. Créez-la en utilisant la même charte graphique que pour le reste de votre site.

Pour le site Wix du graphiste Bhroovi, la favicon aux couleurs de l'arc-en-ciel s'inscrit dans la continuité du langage visuel coloré de leur site Web. La favicon d'eBay fusionne les couleurs de la marque avec une petite icône de sac à provisions, capturant parfaitement l'esprit du site avec une version abrégée du design de leur logo.

Texte

Le texte, ou plutôt, devrions-nous dire « l’absence de texte ». Si vous souhaitez ajouter des typographies, limitez-vous à trois caractères. Utiliser les initiales ou des abréviations est une bonne solution.

L’association Arte par exemple n’utilise que le A en favicon avec un arrière-plan vert fluo pour attirer notre attention. Red Fern, quant à eux, prennent le parti d'utiliser la feuille de leur logo plutôt que du texte pour plus de lisibilité.

Logo

Alors que certains logos peuvent très bien être utilisés en favicons, d’autres seront difficilement lisibles dans un espace aussi petit. Dans ce cas, il va falloir faire quelques ajustements. Google par exemple n’utilise que le G multicolore. L’utilisatrice de Wix Charlotte Mei reprend ses initiales en gardant le style de typographie utilisé dans son logo. Voici quelques twists faciles à faire pour harmoniser votre logo et votre favicon.

Couleur

La couleur d’arrière-plan de votre favicon changera en fonction du contexte et du navigateur web utilisé. Ce qui veut dire que vous devez créer un design qui s’affichera aussi bien sur du blanc, du gris ou du noir. Faites des tests avant de vous lancer.

Comment ajouter une favicon HTML ?

Si vous avez créé votre site avec un constructeur de sites Web, l'ajout de votre favicon en HTML n'est pas nécessaire. Cette étape ne s'applique qu'aux sites construits par un développeur. Voici comment insérer votre favicon dans l'en-tête du code pour qu'il s'affiche sur votre site Web :

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

Comment ajouter une favicon à votre site Wix

Les sites Wix viennent déjà avec une favicon générique. À vous ensuite de la personnaliser à l’image de votre entreprise. Pour cela, vous devez booster votre site avec un forfait Premium et connecter votre domaine.

Pour changer votre favicon :

1. Rendez-vous sur votre tableau de bord, cliquez sur Paramètres puis sur Infos générales.

2. Cliquez sur Gérer à côté de la ligne Favicon.

3. Cliquez sur Télécharger Image.

4. Cliquez sur Ajouter à la page. Vous verrez alors un aperçu de votre favicon sur la barre de navigation.

5. Cliquez sur Appliquer et Ta-da ! Votre site a désormais son propre favicon qui apparaîtra sur l’onglet de votre site lorsqu’il sera publié.

Tester votre favicon

Une fois que vous avez inséré votre favicon, pensez à vérifier son aspect dans tous les endroits où elle sera affichée. Lorsque vous faites cela, nous vous recommandons de passer en mode navigation privée, pour éviter les problèmes de mise en cache.

Vérifiez également la présence de votre favicon dans tous les endroits où un utilisateur de votre site pourrait la voir : le navigateur, l'onglet des signets, l'historique du navigateur et, si possible, dans les résultats de recherche également. Pas encore classé pour les mots-clés organiques ? Si votre site est indexé, il devrait être possible de le trouver dans les moteurs de recherche en recherchant le nom de votre entreprise ou de votre marque. Une fois que vous repérez votre favicon, vous savez qu'elle est correctement mise en œuvre.

C'est aussi le bon moment pour réfléchir à l'aspect de votre favicon. Sa conception visuelle finale parvient-elle à capturer l'essence de votre marque ? Si c'est le cas, votre favicon est prêt à être partagée avec le monde entier.

Vous avez déjà un site internet mais pas de logo pour votre favicon ? Utilisez notre créateur de logo !