Icône des favoris (favicon)

Une particularité d’Explorer (Windows uniquement, à l’époque de la rédaction de ce document) permet la personnalisation de l’icône affiché dans la liste des Favoris et dans le champ URL de ce navigateur.

Cette icône doit être au format ICO. Ce format n’est pas un BMP. Même si ce dernier est parfois correctement interprété, il vaut mieux utiliser un éditeur approprié ou un filtre sous Photoshop, tel IconBuilder (IconFactory) ou celui présent sur telegraphics.com.au (dont une version qui ne pèse que 27 ko.).

Il existe également un site Internet permettant la génération en ligne de votre favicon.ico : http://www.html-kit.com/e/favicon.cgi. Un vrai bijou !

L’ICO peut contenir plusieurs icones, à des tailles et des palettes "couleur" différentes. Mais pour l’icône de vos pages WEB, il conviendra de recherche le format le mieux adapté pour ne pas surcharger le téléchargement tout en conservant la qualité désirée. La taille conseillée de l’icône est 16 x 16 pixels, en 16 couleurs, mais le résultat dans ce format est parfois frustrant. D’ailleurs, bien souvent, on rencontrera sur la toile un 32 x 32 plus encourageant.

Explorer semble être tatillon. Certains nomment leur icone « favicon.ico ». Il en résulte une grande collection de fichiers portant ce nom en cache et parfois un affichage aléatoire qui oblige à jongler avec le cache local du navigateur, en supprimant le fichier en question dans les fichiers temporaires, le tout accompagné de redémarrage de l’application. Le mieux est de lui trouver un nom original, celui de votre site par exemple.

Certains moteurs viennent également chercher « favicon.ico » à la racine du site. Placez votre icône en conservant le nom « favicon.ico » vous évitera au mieux les messages d’erreur 404 et allégera ainsi les journaux (logs).

Une fois la petite icône réalisée, insérez la ligne de code HTML appropriée dans l’en-tête de vos pages WEB :

<link rel="shortcut icon" href="nom_de_votre_icone.ico">

Pour faire apparaître l’icône dans la barre URL du navigateur, il faut parfois rafraîchir l’URL : dans le champ éponyme, cliquez sur l’icône à gauche de l’URL, maintenez appuyé, pressez la touche majuscule (shift), déplacez légèrement la souris et relâchez.

Documentation complémentaire : Cursussites, Iconarchive, IconFactory, MSDN, Favicon.com, Atoute.org.