Qu’est-ce qu’un favicon : définition et exemples

L’importance des favicons pour les sites Web concerne bien plus que le design. Ces petites icônes sont très utiles à la navigation sur Internet et ont des effets positifs sur le référencement.

Un favicon est la preuve que même une petite icône peut avoir un grand impact. En général, elle s’affiche à gauche dans l’onglet du navigateur. Ces icônes permettent de garder une bonne vue d’ensemble, même lorsque plusieurs sites Web sont ouverts à la fois. Elles se présentent sous la forme d’un simple logo pour pouvoir être facilement et clairement attribuées à des sites Web. Par définition, le favicon est donc une sorte de repère permettant d’améliorer la visibilité d’un site Web.

L’apparence du favicon dépend de la manière dont le site Web ou la marque est présenté. Comme le symbole lui-même ne fait que quelques pixels, les logos sophistiqués et détaillés ne peuvent souvent pas être représentés correctement. Dans ce cas, il est recommandé de simplifier le logo.

Un favicon est parfois également appelé « favoricône », terme venant de la contraction de « favori » et « icône ». La signification se laisse donc déjà deviner par son nom : il s’agit d’une « icône pour les favoris ». Ces petites images n’apparaissent pas seulement dans les onglets du navigateur, mais aussi dans les marque-pages, où l’on enregistre ses sites Web favoris. On trouve également des favicons sous forme d’icônes d’applications, dans les menus de recherche ou dans l’historique de navigation.

Avoir un favicon adapté à son site Web est intéressant sur différents points :

• Pour plus de professionnalisme : le favicon fait partie intégrante d’un site Web. Il renforce la confiance des visiteurs et montre qu’une importance est donnée aux détails et à la convivialité. Bien que la plupart des gens ne pourraient pas nommer ce qu’est exactement un favicon, ils remarqueraient rapidement son absence.
• Pour être facilement reconnaissable : grâce à cette petite icône, les utilisateurs peuvent retrouver plus rapidement votre site Web, même si plusieurs onglets sont ouverts en même temps. L’image permettra également à la marque de se démarquer dans les moteurs de recherche ou dans les listes d’applications.
• Pour renforcer l’image de marque : un bon logo assure la reconnaissance de votre marque. La conception du logo comme du favicon est donc une grande partie de l’image de votre entreprise.

Le favicon a également une importance pour l’optimisation des moteurs de recherche, tout du moins indirectement. Certes, ces petites icônes n’influencent pas directement le classement, mais un favicon adapté a tout de même un effet positif sur le SEO. Les raisons suivantes expliquent cet impact :

• Fonction de marque-page : le favicon sert de marque-page, en particulier sur Chrome. Les sites Web qui utilisent cette fonction peuvent être plus facilement trouvés et se placent donc en bonne place dans les résultats des moteurs de recherche. Ainsi, le trafic du site Web augmente.
• Convivialité : la convivialité d’un site Web a un impact direct sur son succès, et les favicons contribuent à cet objectif. Les utilisateurs préfèrent les pages qui suivent un concept bien défini, qui sont agréables et intuitives à utiliser. Les visiteurs s’attardent donc plus souvent et plus longtemps sur ces sites Web bien conçus, ce que les moteurs de recherche récompensent par leur classement.
• Visibilité : un favicon améliore la visibilité. Les utilisateurs sont plus enclins à visiter un site Web présentant une icône, d’autant plus qu’elle est également affichée dans les résultats de recherche.

Qu’est-ce qu’un bon favicon ? Il n’est pas possible de donner une réponse précise et unique sur ce point, car il faut toujours l’adapter à la marque et son design. De nombreuses entreprises utilisent également leur logo comme favicon, mais cela ne fonctionne que si celui-ci garde une bonne apparence en petite taille et en faible résolution. Voici toutefois quelques règles de base pour la création :

• Corporate Identity : un favicon réussi est toujours une icône à l’identité visuelle adaptée à l’image de l’entreprise. Il doit correspondre à ce qu’on appelle la Corporate Identity. Même s’il n’est pas possible d’utiliser son propre logo comme symbole, le motif choisi doit s’accorder au reste du design. C’est la seule façon de préserver le caractère unique de la marque.
• Moins on en fait, mieux c’est : les favicons sont très petites, c’est pourquoi les détails complexes sont à éviter. L’image ne doit pas être surchargée et être de bonne qualité. On peut rarement utiliser l’ensemble du nom du site Web, mais plutôt les initiales ou une icône simple.
• Couleurs : les couleurs utilisées doivent aussi s’accorder avec votre image de marque. Privilégiez les couleurs contrastées, car elles attirent plus rapidement l’attention. N’oubliez toutefois pas que les différents navigateurs affichent les favicons de manière légèrement différente. Les petites images peuvent par exemple être affichées en blanc ou en gris par certains moteurs de recherche.

Si vous souhaitez intégrer un favicon à votre site Web, vous devez également tenir compte de la taille de cette favicon. Celle-ci est normalement de 16 x 16, 32 x 32 ou 48 x 48 pixels, mais certains navigateurs peuvent différer :

En principe, les favicons peuvent être créées sous différents formats. Le plus courant est toutefois .ico, un format de fichier image qui permet différentes profondeurs de couleurs et résolutions pris en charge par la plupart des navigateurs. Autrement, les formats .png, .gif ou .svg peuvent également être utilisés. Ces trois formats ne sont cependant pas compatibles avec tous les navigateurs. Le format .jpg est certes possible, mais est contre-indiqué en raison de sa résolution plus faible.

Le réseau social LinkedIn emprunte une voie différente et prouve que la première lettre ne doit pas nécessairement être représentée dans le favicon. Le « in » blanc sur fond bleu a réussi à se distinguer de ses concurrents et est aujourd’hui un symbole facilement reconnaissable.

Dans les articles de notre Digital Guide, vous trouverez de nombreuses informations qui vous aideront à développer votre présence en ligne. Découvrez notamment des articles comme « Le guide de style : les concepts design pour votre site Web » ou « Favicon : WordPress propose trois façons de l’installer ».