Le petit tutorial d'aujourd'hui va vous apprendre à mettre une petite image à côté de l'url (et dans les favoris aussi). Le tutorial se copose de 3 étapes simples
.
I - Créer le favicon
Il n'y a rien de très compliqué dedans, soyez rassuré
. On appel cette petite image un favicon : mélange de "favori" et de "icône" tout simplement 
.
Pour creer l'image, ouvrez un éditeur d'images. Paint suffit très largement mais sachez que l'utilisation d'un logiciel tel que Photoshop ou Gimp reste conseillée.
Vous avez donc votre éditeur d'images ouvert. Ouvrez un espace de travail de 16 pixels par 16 pixels. Et oui ! On va faire un carré
. Il est possible d'utiliser d'autres taille comme 32*32 ou 48*48 (ce sont des multiples de 16...).
Maintenant, remplissez ce petit carré. C'est la partie la plus dur parce qu'il faut un peu d'imagination
. Mais attention : n'utilisez que 16 couleurs ! En effet, les fichiers .ico n'accepte que 16 couleurs. evitez tous ce qui est dégradé ou couleur personnalisée.
Une fois votre superbe favicon réalisé, il va falloir l'enregistrer, sinon on aurait fait tout ça pour rien ! Pour enregister votre oeuvre, nommez-la favicon.ico tout en veillant à changer le type de l'image en Bitmap 16 couleurs. Paint fera automatiquement la conversion en .ico.
Enregistrez bien le fichier sous favicon.ico, sinon ça ne fonctionnera pas !
II - Utiliser le favicon
Maintenant notre favicon est créé. On va l'inserer sur votre site.
Il existe plusieurs solutions d'insérer un favicon dans votre site. La plus simple consiste à placer le favicon.ico à la racine du ftp pour que l'image soit présente sur toutes les pages. Il y a tout de même un inconvenniant : on ne peut en mettre plusieurs différents. Il existe donc d'autres techniques
.
III - Le code Html
Il vous faudra insérer une balise META. Mais la mauvaise nouvelle, c'est qu'Internet Explorer ne respecte pas les standards du web. Il vous faudra faire deux lignes différentes, pour les deux navigateurs.
1 - Pour les navigateurs qui respectent les standards
Il y a un code tout simple à rentrer :
Code :
- Code: Tout sélectionner
<link rel="icon" type="image/png" href="favicon.png" />
rel : icon signifie que l'image en question est un icône
type : image/png définit l'objet comme une image au format png
href : favicon.png est simplement l'adresse de l'image
En effet, vous pouvez, pour les navigateurs récents, utiliser d'autres formats que le .png. Vous pouvez donc utiliser quatre types d'images :
le .gif le .jpg le .png le .ico mais il faudra entrer la code "image/x-icon"2 - Internet Explorer
Comme je vous l'ai expliqué, IE n'est pas un spécialiste dans les standarts de l'internet. Voila le morceau de code à mettre pour qu'IE mette le favicon.ico. Mais attention, Internet Explorer ne prend en compte que les .ico !
Code :
- Code: Tout sélectionner
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
3 - Faire un site compatible entre toutes les versions
Comme vous l'avez vu, cette histoire entre IE et les autres navigateurs n'est vraiment pas pratique
. Je vous propose tout de même un code qui devrait régler tous ces problèmes.Code :
- Code: Tout sélectionner
<link rel="icon" type="image/png" href="images/favicon.png" />
<!--[if IE]>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<![endif]-->
Votre favicon.ico est maintenant mise en place sur tous les navigateurs
.
A bientôt sur la banquise
.
