Chaque site possède une icône qui vous permet de le repérer facilement dans vos favoris. Il est donc très utile d'en avoir une à son propre site pour le représenter. Mais comment faire ? C'est ce que vais vous expliquer simplement plus bas.
Tout d'abord, il faut savoir qu'il existe deux types de favicon : la favicon en .ico et la favicon en .png, mais quelle différence ? Lisez les sections ci-dessous pour faire votre choix entre les deux formats !
1 ) Le format PNG : respect des standards
Vous souhaitez créer un site respectueux des standards ? Je vous recommande très fortement d'utiliser ce format, le seul valide au niveau du W3C pour les favicons. Mais avant tout, sachez que si vous le choisissez, les utilisateurs d'Internet Explorer ne verront pas l'icône. Toutefois, tous les autres navigateurs tels que Firefox, Chrome, Opera, Konkeror, etc... fonctionneront avec.
- Etape 1 : création de la favicon
Enregistrez l'image souhaitée au format PNG, avec des dimensions de 16x16 ou de 32x32. Optez de préférence pour un fond transparent lorsqu'il y a des contours blancs.
- Etape 2 : mise en place sur le site
Dans votre code HTML, collez le code suivant, dans la balise "head", de préférence sous la balise "title" :
Dans le "href", mettez l'adresse de la favicon, de préférence en valeur absolue, si votre site est à la racine du serveur.
2) Le format ICO : compatibilité
La deuxième solution consiste à utiliser le format ICO pour avoir la compatibilité avec Internet Explorer. Cependant, le W3C ne valide pas ce format !
Etape 1 : création de la favicon
Comme pour le PNG, enregistrez l'image souhaitée en 16x16 ou 32x32 en .ico avec un logiciel comme Gimp, qui est gratuit.
Etape 2 : mise en place sur le site
Collez le code suivant entre les balises "head" sous la balise "title" :
Mettez enfin l'adresse de la favicon dans le "href".
