Favicon - L'icône de votre site dans la barre d'adresse

Vous avez sûrement remarqué la présence d'une icône à gauche de l'URL dans la barre d'adresse de votre navigateur sur certains sites web ?

Pour mettre en place ce type d'icône sur votre propre site web il n'y a rien de plus simple.

Créer la favicon

Il y a plusieurs méthodes :

• Un logiciel de dessin (Gimp, pixia, inkscape...) (voir logiciels de graphisme)
• Un logiciel spécialisé (je conseille IconEdit32 ou encore IconWare)
• Un site web (qui transforme une image en favicon):
  • http://www.chami.com/html-kit/services/favicon/
  • http://www.favicon.fr/
  • http://www.favicon.co.uk/
  • http://www.favicon.hu/
  • http://tools.dynamicdrive.com/favicon/
  • http://favikon.com/

Si on respecte les standards

Il suffit dans un premier temps de créer une image au format png ou gif (formats standards, à utiliser).
(on peut également utiliser des formats plus rares, voir le lien en fin de page).
Vous pouvez choisir plusieurs dimensions, 16x16 ou 32x32 (en pixels).

Si on ne respecte pas les standards

Comme d'habitude, IE ne respecte pas les standards et n'utilise pas les images avec les bons formats.
Pour ce navigateur, il faut utiliser une image ou format ico (ou bmp renommée) (non standard, à éviter de préférence) , et de dimensions 16x16 pixels.

Mettre la favicon en ligne

Il faut ensuite déposer la favicon sur votre site, et indiquer son chemin via la balise link dans les balises d'en tête head.
Voici un exemple avec une image au format png :

<link rel="icon" type="image/png" href="/images/mafavicon.png" />

Selon le format, c'est l'attribut "type" qui change :

• Format png : image/png
• Format gif : image/gif
• Format jpeg (extension jpg ou jpeg) : image/jpeg

Et si vous avez une favicon qui ne respecte pas les standards, l'attribut "rel" change également :

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

Il est également possible de déposer un fichier favicon.ico à la racine du site pour que certains navigateurs l'utilisent automatiquement, mais ce n'est pas standard.

Notes

• Je ne trouve pas très utile de faire une favicon pour IE, étant donné qu'il ne l'utilise que pour les favoris.
• Si vous utilisez une icône dans un format standard et une autre au format ico, je vous déconseille de mettre cette dernière à la racine : les navigateurs l'afficheront si ils ne trouvent pas l'image au format png.
• On peut également utiliser une icone animée (voir le lien).

A voir

Explication et méthode en détails :
http://www.xhtml.net/xhtmlcss/favicon