Qu’est-ce qu’une favicon ?
La favicon est la petite icone qui apparaît dans la barre d’adresse devant l’URL des sites. Elle apparaît également dans le menu des favoris / marques-pages. Enfin, pour les utilisateurs d’onglets, elle apparaît sur chaque onglets.
La favicon dans la barre d’adresse – Elle participe ainsi à l’identité visuel du site et contribue donc à sa mémorisation et son identification
La favicon dans la liste des favoris
La favicon dans les onglets – La favicon est un repère particulièrement agréable dans l’utilisation des onglets. Elle permet de rapidement retrouver le site que l’on recherche (visuelement identique aux autres autrement)Pourquoi avoir une favicon sur son site ?
La favicon est un élément supplémentaire qui va participer à l’identité du site. Elle est un facteur supplémentaire qui fait qu’on identifie et mémorise le site ; un peu comme un mini-logo.
Ce petit élément visuel permet également de plus rapidement repérer le site qu’on recherche dans une liste (les favoris, ou les onglets notamment).
Enfin, d’un point de vue purement pratique, avoir une favicon permet de limiter les logs d’erreur : en effet, certains navigateurs la recherche automatiquement à la visite d’un site ; c’est autant d’erreurs 404 créées.
Comment fabriquer une favicon ?
Afin de pouvoir s’adapter, une favicon doit être créée au moins au format 32 x32 pixels, d’après la Bonne Pratique Opquast n°30. Mais c’est au format 16×16 pixels qu’elle s’affiche la pluspart du temps. Il faut donc prévoir que l’icône soit toujours « lisible » et que l’image soit propre dans ces deux tailles. Une favicon peut également être prévue en 48 x 48 pixels.
Une favicon peut être une image de différents formats : jpg, gif, png, bmp, mng, xbm et ico. Parmis ces formats, seul le .ico n’est pas reconnu par les standards. Néanmoins, il reste nécéssaire car … c’est le seul compris par Internet Explorer ! Les navigateurs standards comprennent l’ensemble des formats.
Il est à noter que certains de ces formats permettent une animation (voir sont un format vidéo !). L’icône peut donc ne pas être figée. Il faut pourtant en user avec parcimonie : en effet, les animations en boucles peuvent être désagréables et perturber la lecture d’un site ; elles peuvent agacer.
Pour créer l’image de chacun de ces formats, vous pouvez utiliser votre éditeur graphique habituel. Néanmoins, pour le .ico, il existe des outils en ligne très pratiques, comme le très bon FavIcon from Pics. Il suffit de préparer une image au format gif, jpg, png, ico ou bmp (en 32 x 32 pixels) et l’outil génère une icône multi-format (32 x 32 et 16 x 16 pixels).
Le code pour insérer une favicon
Pour insérer votre favicon, vous devez :
- placer l’image à la racine de votre site ;
- placer le code d’appel à l’image sur votre page index.
Là encore, il y a le code standard compris par les navigateurs standard … et le code pour Internet Explorer. Ainsi, si vous voulez insérer les deux cas, utilisez le code ci-dessous :
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /><!-- pour IE -->Internet Explorer lit la première déclaration et l’applique. Il ne tient pas compte de la deuxième qu’il ne comprend pas. Les navigateurs standards vont lire et comprendre la première déclaration, puis la deuxième. Ils appliqueront celle qui arrive en dernier.
<link rel="icon" type="image/png" href="/favicon.png" /><!-- pour les navigateurs standards -->
A lire :
- Opquast – Bonnes Pratiques – Rubrique icone de favori : Le code source des pages contient un appel valide à une icône de favori ; L’icône de favori est au moins proposée au format 32 x 32 pixels
- Icônes de pages web, la favicon.ico