Ajouter une favicon à un site

Une favicon est une image qui s'affiche à gauche du nom du site, dans le champ d'URL du navigateur ainsi qu'à gauche des noms des sites dans le panneau de favoris.
Il s'agit classiquement d'un fichier graphique de 16 x 16 pixels, au format ICO de Windows, mais les navigateurs modernes reconnaissent des formats et des tailles différents.

Créer une favicon

Pour créer une favicon, j'utilise:

L'utilitaire paint fourni avec Windows (n'importe quel autre logiciel de dessin peut convenir).
L'image est sauvée au format BMP ou GIF.
J'utilise alors XnView pour la convertir au format ICO.

Utiliser un service en ligne

Ces services vous proposent de créer la favicon à partir d'un texte que vous tapez ou d'une image présente sur votre disque dur, qui est alors réduite à la taille voulue.

Antifavicon. Définir une favicon en ligne avec un texte.
HTML-kit, créer en ligne une favicon par réduction d'une image que vous fournissez.
Dynamic drive, utilise aussi une image.
Degraeve Favicon Generator. L'image plus haut est une image GIF téléchargée dans ce éditeur en ligne.
Favicon.cc. Outil de dessin en ligne.

Utiliser la favicon

Il suffit de placer l'icone à la racine du site web, donc dans le répertoire www, s'il existe, pour qu'elle s'affiche automatiquement dans la barre d'URL, et elle apparaitra aussi automatiquement dans les favoris lorsque l'on sélectionne le site.

Certains navigateurs ne reconnaissent pas la présence de la favicon? Essayez en ajouter la ligne suivante dans la section HEAD du code HTML de votre page d'accueil:

<link rel="shortcut icon" type="image/x-icon" href="http://www.scriptol.fr/favicon.ico" />

Remplacez scriptol.fr par le nom de domaine de votre site.

Autres formats

Les navigateurs récents peuvent reconnaitre les formats GIF ou PNG. Mais pour cela il faut ajouter une balise dans la section head de la page d'accueil qui indique le type avec le code suivant:

<link rel="icon" type="image/gif" href="http://www.scriptol.fr/favicon.gif" />

ou avec le format PNG:

<link rel="icon" type="image/png" href="http://www.scriptol.fr/favicon.png" />

Mêmes remarques que précédemment.