Qu’est-ce qu’un favicon : dé­fi­ni­tion et exemples

L’im­por­tance des favicons pour les sites Web concerne bien plus que le design. Ces petites icônes sont très utiles à la na­vi­ga­tion sur Internet et ont des effets positifs sur le ré­fé­ren­ce­ment.

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 na­vi­ga­teur. Ces icônes per­met­tent de garder une bonne vue d’ensemble, même lorsque plusieurs sites Web sont ouverts à la fois. Elles se pré­sen­tent sous la forme d’un simple logo pour pouvoir être fa­ci­le­ment et clai­re­ment at­tri­buées à des sites Web. Par dé­fi­ni­tion, le favicon est donc une sorte de repère per­met­tant d’améliorer la vi­si­bi­lité 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 so­phis­ti­qués et détaillés ne peuvent souvent pas être re­pré­sen­tés cor­rec­te­ment. Dans ce cas, il est re­com­mandé de sim­pli­fier le logo.

Un favicon est parfois également appelé « fa­vo­ri­cône », terme venant de la con­trac­tion de « favori » et « icône ». La sig­ni­fi­ca­tion se laisse donc déjà deviner par son nom : il s’agit d’une « icône pour les favoris ». Ces petites images n’ap­pa­rais­sent pas seulement dans les onglets du na­vi­ga­teur, mais aussi dans les marque-pages, où l’on en­re­gistre ses sites Web favoris. On trouve également des favicons sous forme d’icônes d’ap­pli­ca­tions, dans les menus de recherche ou dans l’his­to­rique de na­vi­ga­tion.

Avoir un favicon adapté à son site Web est in­té­res­sant sur dif­fé­rents points :

• Pour plus de pro­fes­sion­na­lisme : le favicon fait partie in­té­grante d’un site Web. Il renforce la confiance des visiteurs et montre qu’une im­por­tance est donnée aux détails et à la con­vi­via­lité. Bien que la plupart des gens ne pour­raient pas nommer ce qu’est exac­te­ment un favicon, ils re­mar­que­raient ra­pi­de­ment son absence.
• Pour être fa­ci­le­ment re­con­nais­sable : grâce à cette petite icône, les uti­li­sa­teurs peuvent retrouver plus ra­pi­de­ment 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’ap­pli­ca­tions.
• Pour renforcer l’image de marque : un bon logo assure la re­con­nais­sance de votre marque. La con­cep­tion du logo comme du favicon est donc une grande partie de l’image de votre en­tre­prise.

Le favicon a également une im­por­tance pour l’op­ti­mi­sa­tion des moteurs de recherche, tout du moins in­di­rec­te­ment. Certes, ces petites icônes n’in­fluen­cent pas di­rec­te­ment le clas­se­ment, mais un favicon adapté a tout de même un effet positif sur le SEO. Les raisons suivantes ex­pli­quent cet impact :

• Fonction de marque-page : le favicon sert de marque-page, en par­ti­cu­lier sur Chrome. Les sites Web qui utilisent cette fonction peuvent être plus fa­ci­le­ment trouvés et se placent donc en bonne place dans les résultats des moteurs de recherche. Ainsi, le trafic du site Web augmente.
• Con­vi­via­lité : la con­vi­via­lité d’un site Web a un impact direct sur son succès, et les favicons con­tri­buent à cet objectif. Les uti­li­sa­teurs préfèrent les pages qui suivent un concept bien défini, qui sont agréables et in­tui­tives à 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é­com­pen­sent par leur clas­se­ment.
• Vi­si­bi­lité : un favicon améliore la vi­si­bi­lité. Les uti­li­sa­teurs sont plus enclins à visiter un site Web pré­sen­tant 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 nom­breuses en­tre­prises utilisent également leur logo comme favicon, mais cela ne fonc­tionne que si celui-ci garde une bonne apparence en petite taille et en faible ré­so­lu­tion. 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’en­tre­prise. Il doit cor­res­pondre à 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 sur­char­gé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. Pri­vi­lé­giez les couleurs con­tras­tées, car elles attirent plus ra­pi­de­ment l’attention. N’oubliez toutefois pas que les dif­fé­rents na­vi­ga­teurs affichent les favicons de manière lé­gè­re­ment dif­fé­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 nor­ma­le­ment de 16 x 16, 32 x 32 ou 48 x 48 pixels, mais certains na­vi­ga­teurs peuvent différer :

En principe, les favicons peuvent être créées sous dif­fé­rents formats. Le plus courant est toutefois .ico, un format de fichier image qui permet dif­fé­rentes pro­fon­deurs de couleurs et ré­so­lu­tions pris en charge par la plupart des na­vi­ga­teurs. Autrement, les formats .png, .gif ou .svg peuvent également être utilisés. Ces trois formats ne sont cependant pas com­pa­tibles avec tous les na­vi­ga­teurs. Le format .jpg est certes possible, mais est contre-indiqué en raison de sa ré­so­lu­tion plus faible.

Le réseau social LinkedIn emprunte une voie dif­fé­rente et prouve que la première lettre ne doit pas né­ces­sai­re­ment être re­pré­sen­tée dans le favicon. Le « in » blanc sur fond bleu a réussi à se dis­tin­guer de ses con­cur­rents et est aujourd’hui un symbole fa­ci­le­ment re­con­nais­sable.

Dans les articles de notre Digital Guide, vous trouverez de nom­breuses in­for­ma­tions qui vous aideront à dé­ve­lop­per 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 ».