La favicon, une icône pour votre site

Vous avez sûrement remarqué une petite image dans la barre d'URL de votre navigateur lorsque vous consultez certains sites.
Il s'agit là de la favicon, nous allons voir ici comment faire pour utiliser cette icône.

En plus de s'afficher à coté de l'URL, l'image s'affiche aussi dans le marque-page et les onglets, permettant ainsi à votre site de ressortir de la liste.

Mais comment fait-on pour avoir ça, vous demandez-vous ?

Ce n'est pas très compliqué vous verrez.

En théorie, il suffit simplement d'ajouter une image au bon format sur votre site et de la lier à l'aide de la bonne balise (x)html.

Je dis "en théorie" car la méthode n'est pas la même pour Internet Explorer et les autres navigateurs. Microsoft ne respectant pas les normes (une fois de plus).

L'image

Pour les navigateurs qui respectent les normes

Les images peuvent-être de plusieurs types différents (en tout cas pour les navigateurs qui respectent les normes, tous sauf Internet Explorer).
Ainsi, vous pouvez avoir une favicon en gif, jpeg, png et bien d'autre... vous pouvez même si vous le désirez utiliser une image animée.

Elles doivent seulement être au dimension 16x16 ou 32x32 pixels, bien que les navigateurs modernes afficheront aussi des images ayant d'autres dimensions.

Pour Internet Explorer

IE n'affiche que les images au format .ICO, il vous faudra donc recouvrir a une quelconque manipulation pour obtenir une icône valable.

Sachez tout de même qu'il existe des outils qui vous faciliterons la vie pour la création de vos favicon, nous les détaillerons plus tard.

Lier votre image à la page

Ici aussi, cela se fera différemment selon les navigateurs, toujours pour la même raison.

Selon les normes

Il suffit d'utiliser la balise link dans la partie head de vos pages (entre et ).

Si vous travaillez en xhtml, le code suivant sera utilisé :

<link rel="icon" type="image/jpeg" href="/favicon.jpg" />

(Dans cet exemple, l'image est au format jpeg est se situe à la racine du serveur)

Bien entendu, l'attribut type correspond au type MIME de l'image :
- image/png: image PNG.
- image/gif: image GIF.
- image/jpeg: image JPG.

Le cas Internet Explorer

Il faudra utiliser une variante du code précédent pour lier l'image au format .ICO à vos pages :

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

(Ce code est lui aussi à placer dans la partie head de vos pages)

Notez que vous pouvez utiliser les deux méthodes afin d'avoir une image quelque soit le navigateur utilisé.
Dans ce cas, préférez signaler en premier l'icône pour IE suivit de celle pour les autres navigateurs

Un peu d'aide ?

Je vous l'avais dis plus tôt, il existe des outils pour nous faciliter la création de nos favicon.

Voilà, vous savez tout à propos de ces petites images.
Vous n'avez plus d'excuse maintenant, je ne veux plus voir vos sites sans favicon :p

comments powered by Disqus