Créez un favicon pour votre site Web

Cette semaine découvrons un petit plus : les favicons. Il s’agit de pictogrammes personnalisés qui s’affichent à gauche du nom des sites dans vos Favoris et de leur URL dans votre barre d’adresse. Suivez le guide SVM.

1 Le principe du favicon

Initié au départ par Microsoft pour son navigateur Internet Explorer, et standardisé ensuite pour tous les navigateurs, le favicon s’est largement répandu sur la Toile. Ce terme est formé de la contraction des mots “favori” et “icône” (icon, en anglais). Comme son nom l’indique, un favicon est une image qui sera liée aux sites que les internautes vont placer dans leurs Favoris. Il est à noter que ce favicon accompagne aussi l’URL du site en cours de visite dans la barre d’adresse du navigateur. Outre une touche esthétique et une marque de fabrique de votre site, le favicon est un outil qui améliore la visibilité de votre page personnelle dans la liste de Favoris de vos visiteurs.

2 Méthode à l’ancienne

Traditionnellement, voici les règles qu’il fallait respecter pour créer
son favicon :
  l’image doit être au format bitmap et tenir dans un carré de 16 x 16 pixels ;
  l’image doit utiliser une palette maximale de 256 couleurs ;
  l’image doit être enregistrée sous le nom et l’extension favicon.ico ;
  le fichier du favicon doit être placé à la racine de votre site Web, c’est-à-dire au même endroit que l’index principal de votre site perso.

Une petite explication sur le format de fichier .ico : il s’agit ni plus ni moins que du format BMP, le format d’image de Windows. Vous pouvez donc réaliser votre favicon avec n’importe quel logiciel graphique (même Paint, livré avec Windows, fait l’affaire). Concrètement, une fois le fichier BMP enregistré, renommez-le en favicon.ico. Lorsque vous aurez placé votre fichier favicon.ico à la racine de votre site, il sera automatiquement repéré par le navigateur Internet Explorer et se placera
aux bons endroits.

3 Nouvelle méthode : le respect des standards

La méthode précédente a le mérite d’être simple, même très simple, mais elle n’est pas suffisante. Pour accroître la compatibilité avec tous les navigateurs, il faudra ajouter du code HTML sur toutes les pages qui composent le site, ou au moins sur l’index et les rubriques principales.
Ainsi, ajoutez entre les balises Head des pages concernées la ligne suivante :
<link rel="shortcut icon" type="image/x-icon" href="http://www.monsite.com/favicon.ico">
Une fois cette ligne de commande saisie, comme d’habitude, renvoyez ces pages, via votre logiciel FTP favori (une fois encore nous vous conseillons l’excellent logiciel libre FileZilla), sur l’hébergement de votre site.

4 Hors Internet Explorer

Le point délicat avec les favicons, c’est qu’Internet Explorer 5 et 6 ne reconnaissent que le type de fichier .ico et que, parallèlement, d’autres navigateurs (Firefox en particulier) utilisent d’autres types de favicons standardisés avec une syntaxe HTML, légèrement différente. IE7, lui, regroupe l’ensemble des standards.
Ainsi, pour que le favicon fonctionne aussi sous Firefox, il vous faudra ajouter dans l’en-tête, en plus de la ligne saisie à l’étape 3 (pour IE 5 et 6), une seconde ligne du type :
<link rel="icon" type="image/png" href="http://www.monsite.com/favicon.png" />
Notez que pour ce qui est de l’attribut type, il est possible d’utiliser d’autres types d’images : image/png, image/gif, ou encore image/jpeg. Il faut bien sûr que le fichier image du favicon soit enregistré à
ce même format.

Favicons : l’épreuve par l’exemple

  Si 16 x 16 pixels vous semble une taille trop petite pour réaliser votre œuvre, vous pouvez fabriquer votre image en 32 x 32 pixels.
  Comme on l’a vu, certains navigateurs permettent d’utiliser le format d’image Gif. Ce qui vous offre la possibilité de placer sur votre site des favicons animés (à utiliser avec modération !).
  Enfin, si vous êtes à cours d’inspiration, allez faire un tour sur le site www.favicon.fr qui vous livrera une foule d’idées et de favicons classés par thèmes, ainsi que des logiciels libres pour fabriquer vos icônes (rubrique Liens en bas à gauche).

Comments

[thierry]

bonjours
je voudrais faire comme ton site avoir un favicon mais comme toi il ne fonctionne pas sous IE mais bien sous FF tu aurais une idée pour que ca fonctionne
merci

[Jean Michel]

Bonsoir  thierry merci pour ton passage IE ne prend pas en charge l'affichage des favicons seul Firefox gére cette fonction passe un bon week end