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.html-kit.com/favicon/
  • http://www.favicon.fr/
  • http://www.favicon.co.uk/
  • http://www.favicon.hu/
  • http://tools.dynamicdrive.com/favicon/
  • http://favikon.com/

Pour la plupart des navigateurs

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).

Pour Internet Explorer

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.

Pour créer une favicon animée ou générer simplement un fichier ICO

Cet outil vous permettra non-seulement de générer un fichier ICO facilement mais aussi d'animer votre favicon et de faire défiler du texte si vous le souhaitez.

Cliquez sur le bouton Parcourir... et choisissez une image se trouvant sur votre ordinateur.

Vous pouvez aussi rajouter du texte qui défilera après votre icône, cela générera automatiquement une icône animée.

Enfin, il est également possible de générer une icône animée sans texte en cochant la case Animated Favicon : c'est alors le favicon en lui-même qui semble défiler.

Validez ensuite en cliquant sur le bouton Generate Favicon.ico

Vous aurez ensuite un aperçu de votre favicon.

Il vous suffit alors de télécharger le fichier zippé sur votre ordinateur.

Après avoir décompressé le fichier téléchargé, copier le fichier favicon.ico vers votre site.

Si vous avez téléchargé une icône animée, le fichier ZIP contiendra également un dossier Extra qui contient votre favicon animée, copiez alors animated_favion1.gif vers votre site.

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/icone_ie.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.

Si votre icône est animée (GIF)

Insérez la balise suivante :

<link rel="icon" href="/images/animated_favicon1.gif" type="image/gif">

Notes

• Si vous utilisez une icône dans un format standard mais aussi une autre au format ico, évitez de placer cette dernière à la racine : les navigateurs l'afficheront si ils ne trouvent pas l'image au format png.

A voir

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