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 
