Accueil > Tutoriels pour Webmasters > Créer et installer un favicon

Créer et installer un favicon

Le favicon est une petite icône sur les sites web, qui se retrouve juste à côté de la barre où il y a la barre d'URL (voir la capture d'écran ci-dessous). Cette petite image donne une identité visuelle à un site pour être retrouvée plus facilement dans les favoris. Ce petit tutoriel explique comment créer et mettre une telle image sur un site web.

Format accepté

En général les sites web choisissent le format ico, png ou gif. Malheureusement, tous les navigateurs ne gèrent pas tous ces formats. Les vieilles versions d'internet explorer affichent uniquement les images au format ico. De même, la dimension d'un favicon peut être de 16*16 pixels ou de 32*32 pixels, mais pour internet explorer il faut se contenter d'une image au format 16*16.
Le favicon peut avoir l'opportunité d'être animé (image GIF).

Créer le favicon

Il y a plusieurs manières de créer un favicon. Deux techniques vont être présentées.

Transformer une image en favicon

Il existe plusieurs ressources en ligne pour créer un favicon à partir d'une image ou à créer à partir d'un éditeur spécifique. Les liens suivants sont des outils en ligne gratuits pour cet usage:

La plupart de ces sites permettent d'envoyer une image et de la transformer automatiquement en favicon.

Utiliser un logiciel

Il est possible de créer un favicon à partir d'un logiciel de graphisme tel que Gimp. L'idéal est d'utiliser une image au format PNG ou ICO avec une dimension de 16*16px. Un tutoriel indiqué "réduire le poids des images" explique comment redimensionner une image avec Gimp.

Installer le favicon

La première étape consiste à envoyer l'image sur le site web.
Par défaut les navigateurs célèbrent tel que Firefox, Google Chrome, Opera ou encore Safari vérifient si une image existe sous le nom "favicon.ico" à la racine d'un site. De cette façon, même si le site n'a pas fait de lien vers le favicon, le navigateur est en mesure de l'afficher. Toutefois, pour les autres navigateurs et logiciels en tout genre qui peuvent reprendre cette petite icône, il faut utiliser un code particulier. Le code ci-dessous est à utiliser:

&lt;link rel="icon" href="favicon.ico" /&gt;

Ou celui-ci:

&lt;link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /&gt;

En utilisant une image d'un format autre que "ico" il faut utiliser le code suivant, mais l'adapter selon le format de l'image:

Format PNG: modifier type par "image/png"
Format GIF: modifier type par "image/gif"
Format JPEG: modifier type par "image/jpeg"

Finalement, le code doit être inséré sur les pages en s'assurant de deux choses:

Placer le code entre les balises <head> et </head>
Adapter l'adresse de href s'il le faut

Puis, il ne reste plus qu'à tester le résultat.

Information: il faut s'assurer de rafraichir la page web de votre site au cas où la page utilise un cache.