Dernière mise à jour :2008-07-24

informatique

Avec Mozilla, Internet Explorer et K'onqueror, vous pouvez maintenant avoir une petite icône au niveau de vos signets ou dans la barre d'adresse. Cela permet de faire ressortir votre site dans la liste, c'est plutôt bien pour les fréquentations. Son nom : favicon.ico.

C'est tout simple

Si vous avez les bons outils, c'est très simple, en fait le problème se résume à créer l'icône et à mettre le code HTML correspondant dans votre page web.

Vous pouvez trouver une série de freeware pour éditer vos icônes facilement sur Internet. Vous pouvez essayer IconArt de ConWare pour Windows. Si vous êtes sous Linux vous pouvez utiliser The Gimp ou si vous êtes sous KDE le petit KDEIconEditor vous tend les bras.

Bien entendu, pour éditer votre page HTML, votre éditeur de texte favori fera très bien l'affaire.

Le format des icônes

Le format des icônes dépend de votre navigateur. Un seul format est supporté par tous, c'est le ICO.

Recherchez les fichiers en .ico sur votre disque dur, vous ferez peut-être des trouvailles. Mais si vous utilisez un navigateur comme Mozilla, vous pouvez utiliser tous les formats d'images supportés par ce dernier. Ce qui donne les types JPEG, GIF, PNG, MNG, XBM, BMP et ICO. Vous verrez par la suite comment ne pas pénaliser les utilisateurs ayant un navigateur qui respecte les standards.

La taille des icônes. L'icône doit être format 16x16 ou 32x32.

Si vous piochez votre icône dans un programme que vous avez, attention à respecter le copyright. Vous ne pouvez pas toujours récupérer pour votre usage les icônes des programmes.

Je laisse vos talents d'artiste s'exprimer dans la création...

Le code HTML dans la page

Il existe deux manière d'informer le navigateur de l'existence d'une icône pour la page, une bonne et une mauvaise, je vous laisse trouver le navigateur qui ne supporte que la mauvaise.

Si on respecte les standards

Vous devez mettre le lien suivant dans votre page entre les balises et .

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

Remarquez le type qui contient le type ou Mime Type de l'image. Voici les types que vous pouvez utiliser pour les 4 classiques :

image/png: image PNG.
image/gif: image GIF.
image/jpeg: image JPEG.
image/x-icon: image de type icon, attention ce format n'est pas un format standard.

Si on ne respecte pas les standards

Et vous serez obligés de faire cela si vous voulez que Internet Explorer puisse utiliser l'icône.

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

Notez l'utilisation du type shortcut icon à la place de icon et l'obligation d'utiliser une image au format ICO.

Un peu de fun avec les standards

Et oui, avec les standards on peut faire mieux qu'avec les conduites propriétaires. Je vous conseille un petit tour sur le site hideout de Jakub 'jimmac' Steiner. Regardez l'icône de la page... et oui elle change !

Si on regarde un peu plus le code on trouve :

<link rel="icon" href="/programmation/images/favicon.mng" type="video/x-mng" />

Le type MNG c'est comme les gifs animés pour le PNG. Et oui, vous pouvez faire des icônes animés ! Bon alors maintenant comment supporter la brouette Internet Explorer, tout en proposant le top, pour les navigateurs supportant les standards. Voici la réponse :

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

Et voilà, en mettant après le lien pour Internet Explorer, le lien vers la version animée, vous avez le beurre et l'argent du beurre. Internet Explorer va prendre la première solution qu'il comprend et va laisser tomber le reste. Mozilla lui, va tout comprendre, mais ne va garder que la dernière déclaration, c'est à dire la version animée pour l'affichage.

Vous pouvez bien entendu utiliser directement un gif animé pour votre icône, mais c'est un format, même si utilisé partout, propriétaire. Comme les navigateurs qui supportent les gifs animés pour l'icône supportent aussi les MNG, autant suivre les standards. Le fichier MNG permet par ailleurs d'avoir plus de 256 couleurs dans votre icône.

Conclusion

A vous les commandes, créez de superbes icônes, et pourquoi pas, revenez ici parler de vos expériences !

Cet article n'aurait pas pu être enrichi sans l'aide de :

l'AFUL et son tutoriel pour la manière d'inclure une icône en respectant les standards ; la liste des tests de Mozilla pour sa liste des images supportées par le lézard cachée au milieu ; et la liste des types MIME.

Auteur : Loïc d'Anterroches

Copie autorisée

Version originale : Article sous Creative Commons récupéré sur - www.xhtml.net

Date de mise en ligne : 2005-04-29

Aucun commentaire pour l'instant.