Tutoriel Icone

 

Vous verrez comment faire une icone pour votre site web.  Pour ce faire, il vous faut le logiciel Paint Shop Pro ou Photoshop. Si vous ne possédez pas ces programmes, je vous laisse ici un zip qui contient deux icones et vous aurez au moins le loisir de les utiliser pour votre site :)

Au lieu du traditionnel icone d'internet explorer

vous pourrez avoir une icone personnalisée qui apparaîtra dans la barre d'adresse des navigateurs et dans les favoris

D'abord, allez télécharger le plugin ''Windows Icon'' en cliquant ici. Placez-le avec vos filtres. Arrivé sur cette page, dans la partie intitulée ICO (Windows Icon) Format, choisissez "Free Download" pour Windows

Ouvrez votre PSP ou Photoshop et ouvrir une nouvelle image de 16x16 avec une couleur de fond de votre choix. Si vous prenez blanc comme arrière-plan, on croira à un effet de transparence puisque la barre d'adresse du navigateur (par défaut) est blanc.

Je vous montre deux façons de faire, vous choisirez ce que vous préférez.  Donc, j'ai ouvert une première image de 16x16 et j'y ai fait un dessin au pixel.  Zoomer pour avoir une grandeur qui vous conviendra afin de travailler.

Voici l'icone en taille réelle

L'autre choix consiste à prendre un dessin quelconque ou un tube et de sélectionner une partie puis de le redimensionner en 16x16.  Faites réglage, netteté pour garder le détail de l'image.  Ici j'ai pris l'oeil.

Vous êtes prêts à enregistrer votre icone.  Faites fichier, enregistrer sous... Dans type, déroulez et choisir Windows Icon. Votre fichier portera donc l'extension .ico

À ce stade, vous avez deux choix....

1- vous enregistrez l'icone sous le nom "favicon.ico" et vous le publier à la racine de votre site. Vous n'aurez donc rien d'autre à faire. L'icone apparaîtra pour TOUTES vos pages.

2- vous enregistrez l'icone sous le nom de votre choix (par exemple : cd03.ico) et vous lier une page spécifique à celle-ci. L'icone n'apparaîtra que sur cette page. Sur votre page, entre la section <head> et </head> vous devrez placer ce code :

<link rel name="Shortcut Icon" href="nom_du_favicon.ico">

-------------------

Publiez votre icone, ouvrez votre navigateur et ajoutez votre site en favoris, ça devrait fonctionner ;-)

Si vous n'arrivez pas à voir l'icone, essayer de supprimer vos cookies et fichiers temporaires.  Vous pouvez aussi placer un ? à la fin de votre adresse dans la barre d'adresse de votre navigateur..

Le favicon a été créé pour Internet Explorer et lui n'accepte que le format .ico tandis que d'autres navigateurs vont accepter du jpg, gif, etc.  En utilisant le format .ico on est certains qu'il sera interprété par tous les navigateurs. Je vois très bien les favicons dans Firefox mais dans IE, il a fallu que j'utilise un programme nommé ArbeFavIcon que vous pouvez télécharger ici : http://logitheque.com/fiche.asp?I=13488

J'espère que ce tutoriel vous a plu!

 

©Caro Graphic Tuts 2006