Rien de bien compliqué dans cette partie, je vous rassure
tout de suite . Si vous suivez bien mes conseils, vous ne
pouvez pas vous tromper ! Avant de commencer, sachez que ce
petit icône s'appelle un favicon, comme icône favori. Et oui,
ça ne s'invente pas : c'est spécialement utilisé pour les
favoris !
Tout
d'abord, ouvrez soit un éditeur d'images, quel qu'il soit.
Puisque l'on part de zéro, je vais utiliser Paint qui est
livré directement avec Windows, et vu que presque tout le
monde le posséde, je suis sur de n'oublier presque personne
. Sachez toutefois qu'il est beaucoup plus simple de faire
un favicon avec des logiciels plus élaborés, comme Photoshop,
ou Paint Shop Pro.
Donc,
ouvrez Paint. Une image blanche s'affiche. Réduisez-la pour
obtenir une image de 16 pixels sur 16 pixels. Pour cela, il
vous suffit d'aller dans le menu Image puis Attributs...,
et complétez les champs Largeur et Hauteur en indiquant 16.
Vérifiez
bien que la taille est bien indiquée en pixels et non en pouces
ou en centimètre !
D'autres
tailles sont aussi utilisées comme 32*32 ou 48*48, mais vérifiez
tout de même que le navigateur affiche correctement le favicon.
Vous
voilà donc avec votre superbe image blanche de 16 pixels par
16 pixels ! Rassurez-vous, on en va pas la laisser comme ça.
C'est même vous qui allez la réaliser. Laissez libre cour
à votre imagination, et créez un icône pour votre site. Si
vous n'avez pas d'imagination, vous pouvez toujours mettre
les initiales du nom de votre site.
N'utilisez
que 16 couleurs ! En effet, les fichiers .ico n'accepte que
16 couleurs. Il n'est donc pas conseillé d'utiliser des couleurs
personalisées.
Voilà
ce j'ai réalisé :
Une
fois votre superbe favicon réalisé, il va falloir l'enregistrer,
sinon on aurait fait tout ça pour rien ! Allez donc dans Fichier
et Enregister sous... 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 !
Voila
votre favicon est entiérement créé ! Rendez-vous dans la prochaine
sous-partie pour savoir ce que l'on va en faire !
Utiliser
le favicon
Maintenant
que vous avez créé votre icône, il va falloir en faire quelque
chose, non ? Et bien vous allez voir que ce n'est vraiment
pas compliqué, mais alors vraiment pas !
Il
existe plusieurs solutions d'insérer un favicon dans votre
site. La plus simple consiste juste à exporter le fichier
favicon.ico à la racine de votre site. Et normalement, magie
, votre favicon s'affiche dans tout votre site ! Le problème
de cette méthode, c'est qu'il n'est pas possible de faire
un favicon différents pour toutes les pages. Il existe donc
une autre méthode.
Une
balise à insérer
Voila,
tout est dans le titre, il vous faudra insérer une balise
META, c'est à dire entre les balises HEAD et /HEAD un certain
code pour que le favicon s'affiche. Mais la mauvaise nouvelle,
c'est qu'Internet Explorer (encore lui ) ne respecte pas les
standards du web, et qu'ils vous faudra faire deux lignes
différentes, pour les deux navigateurs.
Pour
les navigateurs qui respectent les standards
Il
y a un code tout simple à rentrer :
Code
: HTML
Pour
copier le code faite 2 clics gauche à l'intérieur
de la fenêtre
puis CTRL + C et ensuite CTRL + V pour le coller
Et
Internet Explorer ?
Comme
je l'ai dit plus haut, Internet Explorer ne respecte pas les
standards du web. Il vous faudra donc entrer un code différents
si vous voulez que votre favicon s'affiche sous Internet Explorer.
Code
: HTML
Pour
le copier le code faite 2 clics gauche à l'intérieur
de la fenêtre
puis CTRL
+ C et ensuite CTRL + V pour le coller
Voilà
vous aurez votre superbe favicon à coté de vôtre
adresse URL
Rien
de bien compliqué mais pas toujours évident
à mettre en place, si vous n'y arrivé pas faite
moi le savoir par mail et je me ferais un plaisir de vous
apporter mes connaissances
Comment créer le favicon 
