Comment créer le favicon

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

 


39427

Kit graphique exclusif réalisé par
Le Monde de Ti Voglio Bene 2006 2008 © Tous droits réservés.