Qu'est-ce qu'une favicon et comment en créer une?

Une favicon est une petite icône de 16x16 pixels qui a comme mission de représenter votre site web. C’est celle que vous voyez dans chaque onglet de votre navigateur et qui vous permet de vous repérer plus facilement lorsque vous avez plusieurs onglets ouverts. Si vous êtes comme nous, vous en avez toujours beaucoup trop d'ouverts!

Même si c’est dans les onglets ouverts que l’on retrouve le plus souvent les favicons, elles sont utilisées à plusieurs autres endroits ; notamment dans votre barre des favoris, dans l’historique de votre navigateur ou encore dans les résultats d’une recherche Google effectuée sur mobile.

Vous avez déjà un logo et vous pensez que vous pouvez l’utiliser tel quel comme favicon? Parfait! Il vous suffira de simplement le redimensionner à la bonne taille. Gardez toutefois en tête que votre favicon doit obligatoirement être au format carré et avoir le moins de détails possible puisqu’elle sera affichée en très petit.

Si vous n’avez pas encore de logo ou que vous avez besoin de le retravailler pour l’adapter à son petit format, voici trois façons simples pour en créer une:

Tel qu’indiqué dans l’introduction de cet article, la taille standard utilisée par les navigateurs internet est de 16x16 pixels. Toutefois, sur les écrans à haute résolution, votre favicon pourrait paraître pixelisée et il serait donc préférable d’au moins doubler sa dimension, soit 32x32 pixels. À noter que WordPress nécessite une taille de 512x512 pixels minimum.

Initialement introduite par le navigateur Internet Explorer de Microsoft, une favicon devait impérativement utiliser le format Windows ICO et devait absolument être nommée favicon.ico. Désormais, plusieurs formats peuvent être utilisés, dont voici les principaux:

Bien qu’une favicon soit de petite taille, il est important de prendre en compte certains points avant de vous lancer dans sa création, afin de tirer parti un maximum de celle-ci.

• Restez simple
  De par sa taille très petite, une favicon se doit de rester simple. Évitez donc de concevoir un design complexe rempli de détails car ils rendront votre icône difficilement lisible et mémorisable.

     À faire          À ne pas faire

• Utilisez votre identité visuelle
  Votre favicon représente votre marque, et à ce titre, elle doit donc refléter l’identité de votre entreprise. Il est même possible d’utiliser tout votre logo ou une partie, si ce dernier s’y prête. Par exemple, la favicon de Google représente un G avec les 4 couleurs caractéristiques de la marque, que l’on retrouve sur la majorité de ses produits et services. Le site YouTube quant à lui, reprend uniquement le bouton play rouge présent dans le logo du site et facilement reconnaissable.

        

• Pensez aussi au mode sombre
  De plus en plus de navigateurs et de systèmes d’exploitation permettent l’utilisation d’un mode sombre, rendant la barre d’onglet foncée plutôt que le traditionnel gris clair. Vous devez prendre en compte ce détail lors de la conception de votre favicon, car si vous souhaitez afficher par exemple un W noir sur fond transparent, les utilisateurs auront du mal à percevoir votre favicon sur un navigateur utilisant le mode sombre. Si vous tenez absolument à avoir une favicon avec une lettre ou une icône en noir, songez à ajouter un fond blanc, comme le fait Wikipédia.

     À faire         À ne pas faire

Selon la plateforme que vous utilisez pour gérer votre site internet, la façon de procéder pour ajouter une favicon sera différente. Voyons ensemble les 3 principales méthodes:

Depuis WordPress 4.3, vous avez la possibilité d’ajouter votre favicon depuis l’interface d’administration de WordPress.

Les plans Starter, Pro et Entreprise vous permettent de personnaliser votre favicon.