Personnaliser l'icône favoris

Personnaliser l'icône favoris

Une préférence qui attire l'œil

Les icônes personnalisées des favoris (ou marques-pages pour Mozilla) ont du succès et c'est bien normal. Elles permettent de se distinguer des autres liens et c'est un moyen agréable de pouvoir se repérer d'un coup d'œil quand on a une longue liste de favoris. Le favicon est la contraction de « favori » et « icon ».

Apparue avec la version 5 d'Internet Explorer, elle n'est vraiment pas difficile à mettre en place sur son site web. Il suffit d'avoir l'image et de créer un lien dans le code HTML vers l'icône.

Quelques règles à respecter

La taille de l'image doit être de 16x16 pixels ou 32x32 pixels. Dans le dernier cas, la taille sera réduite de moitié automatiquement. Le nombre de couleurs ne doit pas dépasser 16 couleurs.

Internet Explorer n'accepte que le format .ico mais ce n'est certainement pas un modèle à suivre. D'autres formats d'image, comme le .gif, jpg, .png sont affichés correctement avec tous les autres navigateurs qui respectent les standards du web.

Remarque

Un fichier .ico n'est autre qu'une image bitmap (.bmp) généré par Windows. Un fichier favicon.bmp renommé par favicon.ico est correct. Par contre cela ne fonctionne pas avec les autres formats graphiques comme le gif ou le jpg.

Où trouver les icônes ?

Vous dessinez vous-même l'icône dans un logiciel de traitement d'image ou spécialisé dans les icônes comme Icon Workshop qui permettent de travailler au pixel près.
Vous réduisez une image, photo, dessin pour obtenir une taille de 16 pixels de côté. Le résultat final est souvent décevant.
Vous cherchez des images gratuites sur internet. Ou téléchargez un lot complet d'icônes (zip, 16,3 Mo).

Créer la liaison

Vous avez maintenant votre icône de 16 pixels sur 16 pixels. Il va falloir faire la liaison entre la page html et le fichier image. Deux possibilités, soit vous ne juré que par Internet Explorer, soit vous préférez une méthode plus propre et universelle.

Internet Explorer - La méthode la plus simple c'est d'ajouter l'image dans le dossier racine du serveur, c'est-à-dire à l'endroit où se trouve votre index.html. L'image doit impérativement porter le nom de favicon.ico sinon ça ne marche pas.

Une autre méthode consiste à insérer une ligne de code dans balise <head>. Dans ce cas, il faudra le faire pour toutes vos pages. L'intérêt, c'est qu'il est possible d'ajouter des icônes différentes en fonction des pages.

<head>
<title>Le titre de ma page</title>
<link rel="shortcut icon" href="http://www.site.com/favicon.ico">
</head>

L'image peut alors porter n'importe quel nom et même se trouver sur un autre site du moment que l'adresse est correcte. Le lien de l'image doit être absolu (comme dans l'exemple ci-dessus) sinon il ne sera visible que dans vos favoris et pas dans la barre d'adresse.

Mozilla et consort - Le code à insérer est pratiquement identique mais à l'avantage d'être conforme aux normes. Malheureusement, Internet Explorer ne comprend que ce qu'il veut bien et n'en tiendra pas compte.

<head>
<title>Le titre de ma page</title>
<link rel="icon" type="image/png" href="http://www.site.com/image.png">
</head>

Remarquez le type informe le navigateur du type de document (une image) et son format (pgn). Une icône au format gif porte l'indication type="image/gif" et type="image/x-icon" pour un fichier .ico. N'oubliez pas d'envoyer votre image sur le serveur et au bon endroit.

Astuces

Il arrive parfois que l'icône ne s'affiche pas ou une autre icône plus ancienne squatte les lieux. Dans ce cas, fermez les fenêtres de votre navigateur, ouvrez-le à nouveau et supprimez le cache. Tout devrait rentrer dans l'ordre.

Les images animées sont à déconseiller car si elles attirent l'attention de l'internaute, elles ont tendance à agacer très vite. Le gif animé ci-contre vient du site CDmon.

Réalisé le 26 mars 2006.