Le fichier favicon(.ico)

Ces "icônes de pages web" ou "favorites icon" apparaissent sur les navigateurs partout où se trouve l'adresse du site : favoris, historique, barre d'adresse, onglets, etc.

L'histoire de ces icônes est toute récente et a subit une évolution. C'est pourquoi il coexiste aujourd'hui plusieurs techniques.

1) Le favicon.ico à la racine du site

Méthode historique de l'inventeur du favicon, Microsoft, depuis IE 5.

Format du fichier

Obligatoirement le format ICO (critiqué pour ne pas être un "format standard").

Il existe des logiciels dédiés à la création de tels fichiers. On peut en créer un d'une manière plus rustique : créer un fichier .bmp avec Paint, (image de 16 x 16 pixels en bitmap 16 couleurs.) puis le renommer en .ico. Mais un vrai fichier .ico comprend plusieurs images (16 x 16 et 32 x 32 px ; 16 et 256 couleurs).

Nom et place du fichier

Obligatoirement favicon.ico et obligatoirement dans le répertoire racine du site.
Soit : http://www.domaine.org/favicon.ico

Code dans la page web :

Aucun.

Avantage : Permet d'ajouter un favicon à un site sans le retoucher.

Inconvénient : Faute de code dans la page indiquant s'il y a ou pas un favicon pour le site, le navigateur le demande systématiquement au serveur web, d'où, en absence du fichier, génération d'une erreur 404, visible sur les Logs. Ce procédé a été critiqué comme s'apparentant à une méthode de déni de service.

2) Balise <link...> mais persistance du format .ico

Seconde méthode historique de l'inventeur du favicon.

Format du fichier

Comme ci-dessus.

Nom et place du fichier

Libres, grâce à la balise LINK, hormis l'extension .ico liée au format.

Code dans la page web :

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

Avantage : liberté de placer et nommer le fichier.

Inconvénient : fichier limité au format ICO.

3) Utilisation des formats standards

Méthode qui n'est hélas reconnue que par les navigateurs modernes, pas par IE.

Format du fichier

Une grande variété de formats est utilisable, y compris en images animées (GIF animé, MNG) !

Dimensions : 16 x 16 ou 32 x 32 pixels mais sans limitation du nombre de couleurs.

Mais, en pratique, les différents navigateurs ne savent pas tous les utiliser :

Internet Explorer ne connaît que le format ICO (non standard).

Mozilla utilise les formats : ICO, JPEG, GIF, PNG, BMP, MNG, XBM.

Nom et place du fichier

Libres, grâce à la balise LINK.

Code dans la page web :

<link rel="icon" type="image/png"
 href="chemin/mon-icone.png" />

Remarque 1 : la valeur de l'attribut rel n'est plus shortcut icon mais icon.

Remarque 2 : il faut adapter le type au format effectivement utilisé :

image/png, image/jpeg, image/gif, image/x-icon, video/x-mng, etc.

Avantage : grand choix de formats.

Inconvénient : le navigateur le plus répandu, IE, n'utilisera pas cette balise link.

Comment faire ?

Pour bénéficier des possibilités de la méthode 3, non reconnue par IE, tout en affichant quand même un favicon avec IE.

<link rel="shortcut icon" type="image/x-icon"
 href="chemin/mon-icone.ico" />
<link rel="icon" type="image/png"
 href="chemin/mon-icone.png" />

Face à ces 2 balises, IE ne comprenant pas la dernière utilisera la première, mais un navigateur moderne, qui comprend les 2, utilisera la dernière rencontrée.