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 de votre site :

  

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

Retour

Derniers articles

Principes du Design d'Interfaces

Pour notre première traduction d'article anglophone, nous avons choisit "Principles of User Interface Design" par Joshua Porter. Suite de l'article

Liens Responsive Design

Le responsive design continue de hanter le web. C'est le sujet n°1 sur le design/l'ergonomie de sites web actuellement. Voici un florilège de liens sur le thème. Suite de l'article

Foire aux liens avril 2012

Découvrez l'actualité de la qualité et du référencement de ce mois écoulé. Suite de l'article

Nous contacter

SARL Elitwork
10, rue Antoine DEQUEANT
62860 Oisy le Verger
Tél. : 03 21 59 62 24
E-mail

Restons en contact

Profitez de notre veille en choississant parmi les nombreux canaux de diffusion que nous vous proposons.

Nos outils

Tremplin Numérique : Agence web spécialisée en référencement SEO à Paris et partout en France.
BBComposer : Cet éditeur permet de rédiger du contenu de haute qualité pour vos sites Internet grâce au respect de la sémantique du HTML.
CanImage : Editez facilement vos images avant de les ajouter à votre site Internet directement à l'intérieur de Firefox.