Accueil > Boîtes à outils > Tutoriels > Vos sites web > Mettre un favicon

Mettre un favicon

Mais c’est quoi un favicon

Ce sont des images qui apparaissent à gauche de la barre d’url de certains navigateurs Internet.
Tous les navigateurs de la famille Mozilla le font, sur toutes les plateformes.
Internet Explorer l’affiche à condition d’avoir mis la page dans les favoris.

Et d’un point de vue concret

Le favicon est une image de type icône (*.ico) qui doit mesurer 16X16 pixels et être en 16 couleurs.
Le fichier, nommé favicon.ico, doit être mis à la racine du site.
Ceci est valable pour Internet Explorer.
Dans la famille Mozilla, on accepte les fichiers placés n’importe où, appelés n’importe comment et de plusieurs types gif, png, ico.
Voici 2 exemples :
- une icône 32X32 et True Colors (16,7 Millions (24 BitsPerPixel) en réalité, 1023 couleurs et qui s’appelle Regis.ico.

favicon 32x32 (ZIP - 3.1 ko)
favicon 32x32


- un fichier gif contenant une animation.

GIF - 2.5 ko
favicon gif animé
Un fichier gif contenant une animation pour un favicon


Naturellement, pas la peine d’essayer d’afficher ces 2 trucs avec Internet Explorer !

Comment on fait alors ?

Dans la partie head de la page html, on doit trouver cette ligne :

et, on peut préciser le type du fichier :

En fait, dans href vous mettez le nom du fichier.

Un bémol, sinon ce serait trop beau

Vous savez que chaque navigateur a sa manière de fonctionner, des fois n’en fait qu’à sa tête...

Donc en ce qui nous concerne :
- IE n’affiche ces favicon’s que si le site est bookmarqué
- La famille des Mozilla l’affiche dès que le fichier favicon.ico est présent à la racine du site (ou même du répertoire)

Et pour finir quelques liens pour la création des favicon

Editeur d’icones pour Windows :
- MicroAngelo : la rolls mais c’est payant

Editeur d’icones sous Mac
- Iconographer

Convertisseur d’images pour Windows :
- Irfanview

Convertisseur d’images pour MacOS :
- Graphic converter

Manipulation d’icones en plugin pour photoshop
- ICOformat & ICObundle

Générateur de favicon en ligne
- Chami.com

Exemples de favicon’s réussis :
- http://www.deltatangobravo.com/arch...

Et enfin le made in Total Open Source sous Linux :
- http://djax.linuxbourg.ch/blog/?p=60


Tutoriel issu de http://faqs-forum.ouvaton.org, retouché par Nico