Favicons

Un favicon (favorite icon) est une petite icône, définie par le concepteur d'une page internet, qui va apparaître à différents endroits du navigateur, par exemple :

dans la barre d'adresse (avant l'adresse du site)
dans l'onglet et le marque-page (avant le titre de la page)
divers raccourcis et favoris

Un favicon peut-être une image fixe ou animée.

1 - Réalisation d'un favicon

Les favicons peuvent être réalisés en différents formats :

Le format ico est propre à microsoft, dont le navigateur, ne reconnait d'ailleurs que ce format
Le format png permet de réaliser des images au format libre et fond transparent
Le format gif animé permet de réaliser des images animées.
.....

De nombreux sites sur internet proposent de transformer des images en favicon. Par exemple :

Réalisation d'images au format ico : www.favicon-generator.org/about/
Réalisation d'images au format ico et gif animé : http://favicon.htmlkit.com/favicon/

Il est également possible d'utiliser un logiciel tel que imagemagick pour réaliser certaines de ces transformations, en adaptant le format de l'image et sa résolution (16x16 ou 32x32).

Exemple 1 : redimensionnement d'une image en changeant le format :

convert -resize 32x32 image.jpeg favicon.png

Exemple 2 : redimensionnement d'une image animée gif

convert -resize 32x32 image_animée.gif favicon.gif

2 - Prise en compte du favicon

La méthode recommandée pour faire prendre en compte un favicon est d'introduire un lien entre les balises <head> et </head> de la page html. Du fait que tous les navigateurs ne reconnaissent pas tous les formats, une solution est d'ajouter une ligne par format, en choisissant l'ordre des formats de façon que le format "le plus intéressant" soit le dernier dans la liste.

La première ligne ci-dessous est destiné à Internet Explorer et le format ico :

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

La seconde ligne est destinée à une image fixe au format png :

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

La troisième ligne est destinée à une image animée au format gif :

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

Finalement, ces trois lignes sont introduites dans le "header" de la page:

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <title>Exemple de favicons</title>
  <link rel="stylesheet" href="style.css" type="text/css">
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
  <link rel="icon" type="image/png" href="favicon.png" />
  <link rel="icon" type="image/gif" href="animated_favicon.gif">
</head>
<body>
</body>
</html>

Mettre les favicons à la racine du site est (a été?) également recommandé.

3 - Tests

Les tests doivent s'effectuer avec l'affichage en mode serveur (local ou distant), l'affichage en mode direct du type file://chemin/vers/fichier ne permet pas d'afficher les flavicons.

J'ai obtenu les résultats suivants en fonction des navigateurs (et de leurs versions sans doute):

Internet Explorer : non testé
Seamonkey : le favicon animé apparaît dans la barre d'adresse et dans l'onglet - le marque page utilise l'image fixe au format png
Iceweasel : le favicon animé apparaît dans l'onglet - le marque page utilise une image fixe du favicon animé - aucune image n'apparait dans la barre d'adresse
Chromium : l'image fixe au format "png" apparaît dans l'onglet et est utilisé par le marque-page - aucune image n'apparaît dans la barre d'adresse

Dans certaines conditions, les favicons n'apparaissent pas au premier essai. Une solution peut-être :

de vider les historiques et caches du navigateur et de relancer le navigateur
en cas de test sur un serveur local, d'alterner l'affichage à partir de http://localhost et de http://127.0.1.1