MoRia

Les favicons sont les petites images que vous trouvez à côté de l’adresse (URL) des sites que vous visitez, dans la barre d’adresse de votre navigateur, dans les onglets ou favoris.

Je vous décris ici comment animer cette vignette et faire en sorte que cela reste compatible avec les navigateurs qui ne supportent pas les favicons animés comme Internet Explorer par exemple.

• Il vous faut tout d’abords créer votre animation. Votre image doit avoir une taille de 16 x 16 px. Vous pouvez utiliser Photoshop, FireWorks, ImageReady ou tout autre logiciel vous permettant de créer un GIF animé.
  Pour créer un GIF animé dans Photoshop CS3 par exemple, allez dans la palette Animation et cliquez sur Convertir en animation d’images pour avoir la bonne interface. Ensuite créez votre animation image par image en n’oubliant pas de régler l’intervalle entre les images (0.1 seconde est idéal pour une animation fluide) et sélectionnez également si vous désirez que l’animation joue “Toujours”, ou un nombre de fois déterminé.
  Sauvegardez votre favicon animé au format GIF, dans Enregistrer pour le web…

• Il vous faut maintenant également sauvegarder votre favicon au format ICO. Celui-ci sera statique et sera le favicon par défaut lorsqu’un navigateur ne supportera pas l’animation. Veillez donc à sauvegarder l’image qui vous convient. Par défaut Photoshop ne permet pas de sauvegarder au format ICO, mais vous trouverez à cette adresse http://www.telegraphics.com.au/sw/ un plugin gratuit mac/pc qui vous ajoutera cette fonctionnalité.

• Vous avez maintenant 2 fichiers GIF et ICO de 16 x 16 px. Il ne vous reste plus qu’à les uploader à la racine de votre site web et d’inclure les 2 lignes de code suivant dans le head de votre page d’index:

<link rel=”shortcut icon” href=”favicon.ico”>
<link rel=”shortcut icon” href=”favicon.gif” type=”image/gif”>

Mots clés Technorati : favicon animé , animated favicon , tutoriel , tutorial , favicon , animé , animated , ico format

Posts similaires

• Pas de posts similaires