1. Création des différents calques.

    L'image doit faire 32 × 32 pixels (ou 16 × 16 pixels).

    Favicone avec le GIMP

    Chaque calque représente une phase de l'animation finale, les calques étant lus dans l'ordre avec un délai constant entre chaque. Penser à enregistrer au format XCF : 

    Fichier > Enregistrer > favicon.xcf
  2. Enregistrement au format GIF animé. [2] 
    Fichier > Enregistrer sous... > favicon.gif
    Options à l'enregistrement 1 Options à l'enregistrement 2
  3. Insertion dans la page web. [3]

    Rajouter dans l'en-tête de la page, dans la section <head> : 

    <link rel="icon" type="image/gif" href="http://mathieu.images.free.fr/favicon/favicon.gif" />
  4. Le résultat.

    Et bien vous l'avez déjà sous les yeux depuis un moment (en tout cas pour les heureux utilisateurs de navigateurs respectueux des standards) !

    la favicone

[1] : Ce petit tutoriel n'aurait pas été possible sans l'aide de ces pages :
- Cette page pour la création de l'image GIF animée ;
- Cette page pour l'intégration des favicônes.

[2] : Le format GIF n'est pas un format encore soumis à brevet. Il existe son pendant libre (et amélioré !), le PNG et sa version animée, le MNG. Cependant, si le PNG est reconnu par la plupart des navigateurs et logiciels de dessin, ce n'est pas le cas du MNG et il est donc recommandé de rester avec un GIF animé...

[3] : Cette manière est la seule qui respecte les standards du web, mais n'est pas reconnue par Internet Explorer. Pour pallier à ce problème, il faudrait enregistrer un des calques au format .ico puis rajouter la ligne suivante dans la section <head> : 

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

Mais en plus de ne pas respecter les standards du web, cette façon de faire casse l'animation et on obtient alors une icône fixe. Je préfère dans ce cas me limiter à l'approche "standard", de toute façon les utilisateurs d'IE se fichent pas mal des icônes ;-).