Ajouter un favicon à votre site Web

Qu'est-ce qu'un favicon ?

Quand on navigue sur pleins de sites Web en parallèle, on atteint vite une dizaine d'onglets ouverts. Pour pouvoir les différencier rapidement, on se fit à la petite image présente dans chaque onglet : c'est le favicon.

Le favicon d'un site Web peut également être affiché dans les résultats de certains moteurs de recherche (DuckDuckGo, Google mobile, Qwant), ou apparaître dans les marque-pages et autres favoris des navigateurs.

Créer et adapter un favicon

Avant de pouvoir ajouter un favicon à son site Web, il faut déjà le concevoir et l'adapter.

Je vous conseille tout d'abord de le créer de façon vectorielle, puis de l'exporter dans le format SVG. Pour cela, vous pouvez utiliser le logiciel Illustrator (payant) ou Inkscape (gratuit et libre). Si vous ne vous sentez pas l'âme d'un artiste, des sites Web comme IconFinder ou Flaticon peuvent vous permettre d'obtenir gratuitement de nombreux favicons.

Vient ensuite le temps de l'adaptation du favicon. En effet, le format SVG n'étant pas supporté par tous les navigateurs (Internet Explorer, Safari), il faudra en plus l'exporter dans le format PNG à la taille 32×32 pixels.

Pour complexifier un peu la chose, il faut savoir qu'Apple utilise un système particulier pour gérer les icônes des sites Web épinglés sur l'écran d'accueil de ses produits. Pour satisfaire la marque à la pomme, vous devrez en plus générer une icône au format PNG de taille 180×180 pixels. Je vous recommande de laisser un espace blanc d'au moins 20 pixels sur chacun des côtés de votre image, croyez-moi, son rendu n'en sera que meilleur.

Ajouter le favicon à votre site Web

Pour que votre site Web puisse arborer fièrement son favicon : il ne vous reste plus qu'à placer ces trois balises à l'intérieur de votre élément head (n'oubliez pas de modifier les valeurs associées aux attributs href par les chemins vers vos images) :

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="apple-touch-icon" type="image/png" href="/favicon-180x180.png">