picture picture
mars 19, 2008 Graphisme 5 Commentaires

Comment faire un favicon ?

c’est tout simple, et c’est nettement plus « classe » pour retrouver un site dans les favoris !

1ere étape : créer une icone, c’est à dire une petite image bipmap enregistrée avec l’extension .ico le bon format doit être 16px x 16px, ou mieux 32×32

Pour faire cela, il y a un tas de petits logiciels gratuits. Mon préféré est une extension de Photoshop appelée Icon Plugin qu’il suffit de décompresser dans le dossier C:\Program Files\Adobe\Adobe Photoshop CS[2 ou 3]\Modules externes\Formats de fichiers (il y a 2 fichiers : ICO.8bi et Png.8bi)

Ensuite on importe n’importe quelle image dans Photoshop, on la redimentionne à la bonne taille (32×32) et il suffit d’utiliser la commande « enregistrer sous… » qui comporte maintenant une option .ico dans la liste des format d’exports possibles.

Ce fichier est a renommer favicon.ico

2eme étape : on met en ligne favicon.ico sur la racine du serveur avec son client FTP favori (j’ai une petite préférence pour FlashFXP qui offre un tas de fonctions utiles) : le transfert est à faire en mode binaire (binary) et non en mode ascii (texte). En principe c’est fait automatiquement.

3eme étape : entre la balise <head> et </head> des fichers de son site, on insère simplement la ligne de code suivante :

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Ce code est valide W3C, les 3 formats acceptés pour les favicon sont .ico, .png (le favori des puristes !), ou .gif…

Pour visualiser votre travail, il vous faudra effacer l’ancien favori ainsi que les fichiers temporaires de votre ordinateur. Cependant si votre page comporte des frames, il se peut que cette technique ne fonctionne pas… mais les frames, c’est le moyen-âge, n’est-ce pas ? ;)

5 Responses to “Comment faire un favicon ?”

5 Commentaires

  1. chin dit :

    :bravo: information concise et précise. je vous remercie.

  2. Bruce GAO dit :

    :)) merci bcp!

  3. mich' dit :

    Très facile à faire, grâce à vous merci pour cette petite touche classe

    Mich’

  4. kates dit :

    Merci pour ce tuyau :bravo: ! C’est quand même pratique de n’avoir qu’un logiciel pour tout faire!

  5. loulou dit :

    :)) classieux ! Merci des détails, c’est simple et efficace

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: