Pas de site de qualité sans favicon !
Un favicon est un des éléments indispensables pour un site Internet de qualité. Découvons cette petite image aux grandes conséquences.
Non, favicon n'est pas le dernier néologisme à la mode pour en mettre plein la vue aux clients. Et pourtant, on ne mesure pas assez l'importance des quelques dizaines de minutes nécessaires à sa mise en place sur votre site !
Favicon : Les présentations
Vous l'avez probablement reconnu, l'icône des favoris, de son petit nom favicon, est la petite image qui représente un site Internet et qui est reprise à plusieurs endroits au sein des navigateur.
Tout d'abord, sur les navigateurs supportant la navigation par onglets (autant dire tous aujourd'hui), le favicon est utilisé pour représenter votre site comme sur l'image ci-dessus. Non seulement cela participe au renforcement de votre identité visuelle, mais surtout, cela améliore l'ergonomie de votre site.
Il est ainsi très simple d'identifier les pages de votre site parmi tous les onglets ouverts. Cela est d'autant plus utile lorsque de nombreux onglets sont ouverts. Beaucoup de navigateurs font ainsi disparaître tous le texte contenu dans l'onglet pour ne plus présenter que les favicons des pages ouvertes, comme dans Google Chrome :
Ou une toute petite partie du texte parfois inintelligible comme sur Firefox :
Les favicons sont également utilisés dans les favoris (ou les marques pages selon le navigateur), sur les téléphones mobiles, sur certains sites grâce à des plugins (SimplePie, Favicons 2.0) ou encore sur les nombreuses applications web de type page d'accueil personnalisable ou lecteur de flux (Netvibes, iGoogle etc...).
La mise en place
Créer un favicon est assez simple techniquement, mais pas graphiquement. Il est nécessaire de miniaturiser votre logo et d'en faire une image de 16x16 pixels. Tous les logos ne se prêtent pas facilement à cette miniaturisation extrême, mais avec de l'expérience, on finit par y parvenir.
Le meilleur format pour un favicon est le PNG avec transparence graduelle (canal alpha). Pour déclarer le favicon, il suffit d'ajouter cette ligne entre les balises <head> de votre site :
<link rel="icon" type="image/png" href="images/favicon.png" />
Cependant, tous les navigateurs ne reconnaissent pas cette méthode ni les PNG avec canal alpha, c'est pourquoi vous devez également prévoir une version nommée favion.ico et déposée simplement à la racine de votre site.
En ce qui nous concerne, nous utilisons Gimp qui permet de manipuler des PNG avec canal alpha et aussi d'enregistrer vos favicons au format .ico simplement.
Un bien pour les performances
Aussi incroyable que cela puisse paraître, créer un favicon est aussi un bien en terme de performance. En effet, l'accès à votre site implique une vérification de la présence du fichier favicon.ico. Si votre site ne le propose pas, c'est une requête vaine pour votre serveur (erreur 404). De plus une requête retournant une erreur 404 ne devrait pas être mis en cache selon la spécification HTTP ce qui fait qu'un site proposant un favicon utilisera moins de ressources pour afficher ce dernier qu'un site qui n'en possède pas. Dingue n'est-ce pas ? Et encore, on ne tient pas compte ici de toutes les implémentations bancales qui font qu'à chaque requête, une requête pour un favicon est également faîte...
Bref, tout tend à vous suggérer qu'un favicon n'est pas un accessoire pour votre site, mais bien une fonctionnalité qu'il est urgent d'ajouter !
Publié par Nicolas Froidure le Mercredi 25 Janvier 2012 à 12:00:00