Une favicon pour votre site

« Icône d’URL » ou « icône de favoris », la favicon est la petite image qui s’affiche à côté de l’URL dans la barre d’adresse de votre navigateur et à côté du nom du site dans vos listes de favoris ou sur les onglets.

Petit détail superflu, mais tout de même recommandé comme bonne pratique N°29, la favicon donne un repère visuel permettant d’identifier rapidemment un site parmi les nombreux onglets ou favoris.

Comment réaliser la favicon ?

Ce qu’il faut savoir : cette icône doit absolument être en 256 couleurs pour une taille de 16 x 16 ou 32 x 32 pixels. Toutefois, pour un affichage correct de la favicon sur tous les systèmes et dans tous les contextes, elle doit être « au moins proposée au format 32 x 32 pixels » (cf. : bonne pratique N°30).

Comme vous vous en doutez, il est assez diffile de faire tenir un graphisme léché dans un si petit format. Optez pour des images simples, un logo, une ou deux lettres.
La favicon est en fait un avatar de site : elle doit reflèter votre site, de façon à ce que l’internaute puisse aisément associer l’icône au site. Sa couleur dominante sera donc identique à celle du site.
Si vous avez un logo, il est logique de l’utiliser pour fabriquer l’icône. Le réduire au bon format ne suffit pas toujours, et il faut souvent le retoucher pour qu’il demeure visuellement signifiant, net et non pas flou. Il doit tenir dans ce format carré. Évitez les zones vides, transparentes : il est dommage de ne pas utiliser tous les pixels d’une si petite surface.

Il existe de nombreux tutoriels en ligne qui aident à créer une icône d’URL. Si vous trouverez même un éditeur de favicon en ligne, et des sites tels que Favicon France qui mettent à disposition des centaines d’icônes gratuites.

Comment installer la favicon ?

Une fois votre icône terminée, enregistrez-là au format de votre choix, et placez son fichier via FTP sur votre site. Insérez ensuite ce code dans le head de chaque page :

Remarquez l’attribut type qui contient le « type » ou « Mime Type » de l’image. Les plus courants sont : « image/jpg », « image/png », « image/gif », selon le format de fichier de votre icône (les navigateurs modernes supportent différents formats de favicon, y compris animé).

Tout se gâte avec IE...

Pour afficher aussi votre favicon dans Internet Explorer, vous devez la convertir au format propriétaire de Microsoft, ico, qui est le seul supporté par ce navigateur.

Si vous ne disposez pas d’utilitaire de conversion d’images (tel que GraphicConverter pour Mac), vous pouvez utiliser les générateurs de favicon en ligne, où l’on uploade son fichier, pour le transformer au bon format, sur ces sites : dynamicdrive.com et html-kit.com et dagondesign.com.

Renommez le fichier en favicon.ico, placez-le à la racine de votre site, et ajoutez ce code dans le head de chaque page :

Paradoxalement, on préfère souvent cette seconde approche, qui est non respectueuse des standards, mais supportée par la majorité des navigateurs.