Favicon : l’icône qui fait la différence

Exemples de favicon

Favicon ?

Un favicon est l’icône symbolisant un site web qui s’affiche dans un navigateur au niveau de la barre d’adresse, de l’onglet, des favoris. S’il n’est pas indispensable au bon fonctionnement d’un site, sa présence sécurise l’internaute qui y retrouve souvent le logo de l’entreprise.

C’est un gage de qualité dans la réalisation du site, et sur ce point les cordonniers sont parfois les plus mal chaussés …

Préférez-vous ceci ?

Favicons absents sur les onglets du navigateurs

 

 

Ou cela ?

Exemples de Favicon de qualité

 

 

La lisibilité est nettement optimisée dans les derniers exemples …

Elle qualifie l’identité visuelle du site qui sera alors plus facilement repérable dans les favoris notamment.

Quels critères de qualité pour un favicon ?

Exemples de faviconCe mot-valise est né de la contraction des mots anglais « favorites » et « icon » dont les équivalents en français sont « marque-pages/favoris » et « icône ».

Des exigences techniques

La taille de cette icône est impérativement de 16 × 16 pixels ou 32 × 32 pixels.

L’image doit être en 256 couleurs au format gif, jpg, ou png. Le format animé MNG est également accepté.

L’extension est ensuite renommée en « .ico ».

Une identité graphique

La qualité du favicon n’est pas liée qu’à l’exigence technique décrite ci-dessus, mais c’est aussi :

  • la cohérence avec l’identité visuelle de l’entreprise et du site
  • la simplicité pour rendre le favicon lisible :
      • de 1 à 3 lettres maximum
      • une reprise du logo très simplifié, ou une image spécifique sobre
      • une ou deux couleurs vives

     

Favicons visuels affichés dans les onglets

 

 

Sur l’image ci-dessus, on peut noter :

  • une ou deux lettres
  • un drapeau pour un site institutionnel
  • une forme simple / logo
  • une forme simple et une lettre

Il faut être attentif à l’originalité du favicon, pour se différencier de logos connus, même dans le cas de secteurs d’activité différents.

Exemple de Favicons similaires

 

Installer le favicon

La première étape consiste à envoyer l’image sur le serveur du site web, à la racine. Par défaut les principaux navigateurs (Internet Explorer, Firefox, Google Chrome, Opera ou encore Safari) vérifient si une image en « .ico » ou « favicon.ico » existe à la racine du site.

Le code ci-dessous est ensuite à placer dans la balise <HEAD> du fichier d’en-tête :

<LINK REL=«SHORTCUT ICON» href=«favicon.ico»>

Il est aussi possible d’intégrer un favicon directement via le template utilisé, avec WordPress par exemple.

On trouve de nombreuses ressources en ligne pour créer un favicon à partir d’une image ou pour les installer.
http://www.infowebmaster.fr/tutoriel/creer-installer-favicon en est un exemple.

Les vérifications

Attention à la cohérence entre un site et ses sous-domaines. Si le favicon est le plus souvent présent sur les grands sites, il est parfois oublié sur d’autres sites du même domaine comme en témoigne l’illustration ci-dessous.

FW2

 

 

La mise en place de  favicon proposée par les template WordPress n’affiche pas toujours correctement le favicon dans tous les navigateurs, d’où l’intérêt de placer ce code directement dans le fichier d’en-tête.

Et la nécessité de tester l’affichage du favicon avec différents navigateurs.