507-image1-fr1265670615.jpg

Afficher un favicon facilite la gestion des favoris

Vous avez certainement remarqué la petite icône présente dans la barre d’adresse de votre navigateur lorsqu’un site est ouvert. Vous êtes en présence d’un favicon.
 
Le favicon est un mot qui vient de la contraction de deux mots anglais, favorite et icon. Votre œil est attiré par cette petite image qui identifie chaque site. C’est la petite touche esthétique qui personnalise la barre d’adresse, les onglets, les favoris et facilite ainsi visuellement leur gestion.
 
De plus en plus de sites l’utilisent.
 
Mes favoris personnels avec leurs favicons. Vous saurez tout de ma vie privée !
 
 
 
Les onglets ouverts pendant la rédaction de ce billet avec leurs favicons.
 
 
Si vous aussi vous souhaitez créer un favicon, voici comment faire. Plusieurs solutions existent.
En voici une parmi d’autre. Elle a été initiée par Microsoft utilisant des formats d’images non standards, fonctionnant avec Microsoft Internet Explorer et aussi avec d’autres navigateurs qui ont souhaité être compatibles par égard pour les utilisateurs :
 
  • Créez l’image qui identifie votre site avec un logiciel de retouche d’images (the Gimp, Photoshop, Fireworks…). Elle doit être d’une dimension de 16×16 pixels ou 32×32 pixels et enregistrez l’image créée de préférence en jpeg, png, gif
  • Renommer l’image créée en « favicon.ico »
  • Placer le fichier favicon.ico à la racine de votre site Internet
  • Insérer ce code entre les balises <head> et </head> de votre page : <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 
Il existe aussi des générateurs de favicons disponibles sur le Net.
 
L’autre mode de création de favicons est respectueux des standards du web, mais ne fonctionne pas encore avec Internet Explorer.
 
  • Créez votre image, placez la à la racine de votre site
  • Insérer ce code entre les balises <head> et </head> de votre page :
<link rel="icon" type="image/png" href="/img/logo.png" />
ou <link rel="icon" type="image/jpeg" href="/img/logo.jpg" />
ou <link rel="icon" type="image/gif" href="/img/logo.gif" />…
 
Le site de l’AFUL – Association Francophone des Utilisateurs de Logiciels Libres – précise que Mozilla supporte une très grande variété de formats d’image : PNG, MNG, JPEG, GIF, XBM, BMP, ICO. Alors que Microsoft Internet Explorer supporte uniquement le format d’image ICO.
 
Ouvrez maintenant votre site et admirez votre favicon présent dans la barre d’adresse. Maintenant, lorsque les internautes mettront votre site dans leurs favoris, ils auront un repère visuel pour le retrouver plus rapidement.
 
Il existe un validateur de favicon : Favicon Validator 

Auteur : Denis ALLARD

Denis ALLARD
Rédacteur Web sur le blog studiovitamine depuis 2009, j'ai pu mesurer l'évolution fulgurante du web, des nouvelles technologies, du e-commerce... Quand je n'écris pas pour le web, je me consacre à l'ergonomie, au référencement naturel et à la formation universitaire des futurs concepteurs de sites...

Commentaires Facebook

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *