Les favicons

3 septembre 2009

Favicon d'Aurélie Maronnt, @-grapheuse C’est quoi un favicon ???

Un favicon, c’est une (toute) petite image (icône) qui représente l’identité visuelle d’un site Web. Un peu comme un logo, mais en plus simplifié. On la trouve dans la barre d’adresse d’un navigateur, dans l’onglet de navigation et dans la liste de nos favoris. Elle peut également servir de puce pour les textes d’énumération.

 

Le favicon se trouve juste devant le “http”.
 

A quoi ça sert ?

Outre le côté esthétique et “dans le coup”, elle permet surtout au visiteur d’un site Web de reconnaître facilement le site qu’il visite par cette petite marque distinctive, surtout s’il a plusieurs onglets de navigation ou de pages Web ouverts. Pour l’entreprise, ou le propriétaire du site Web, il permet de consolider son image de marque et de perfectionner sa panoplie d’outils de communication.

 

Techniquement…

Le favicon doit être en mode 256 couleurs et de taille 32×32 ou 16×16 pixels. Les extensions (format de fichier) possibles sont multiples (.png, .gif, etc.) mais Internet Explorer est quant à lui plus difficile que Firefox ou autre navigateur, et ne prend que le format “.ico”

 

J’en veux un !!!! Je fais comment ???

Vous avez 4 solutions :

  1. Vous me contactez et je vous le dessine et vous le mets dans le bon format !  ;-)
  2. Vous pouvez en trouver des tout-faits et gratuits sur la toile, notamment sur favicon.fr
  3. Vous le créez dans le bon format à partir d’une image existante que vous possédez (vérifiez les droits d’auteur le cas échéant !) grâce à des sites spécialisés comme http://www.html-kit.com/favicon/ (site en anglais). (Merci à Voyage-Ecosse pour ce lien !)
  4. Vous le dessinez vous-même. Si vous utilisez Photoshop, il vous faudra télécharger et installer les plug-in qui vont bien ! Vous pouvez les télécharger ici. Une fois téléchargés et décompressés, mettez-les dans le dossier des plug-in de votre version de Photoshop :
Procédure d'installation des Plug-in pour Photoshop. Procédure d’installation des Plug-in pour Photoshop.

 

 

Ensuite, vous pouvez ouvrir votre Photoshop (ou le fermer puis le rouvrir s’il était ouvert pendant l’installation), et enregistrer votre fichier en .ico grâce au menu “Fichier / enregistrer sous…. “. L’idéal étant de lui donner le nom suivant : “favicon.ico”.

 

Vous pouvez vous procurer d’autres plug-in gratuits pour faire vos favicons, notamment avec d’autres logiciels (Paint par exemple). En voici une liste pour les utilisateurs de Windows.

 

Enfin, il vous reste à l’installer sur votre site Web ! C’est un petit bout de code à mettre dans votre “Head” de votre site.

 

<LINK REL=”SHORTCUT ICON” href=”favicon.ico>

 

ou

 

<LINK REL=”SHORTCUT ICON” href=”http://www.VOTRE-SITE.com/favicon.ico”>

 

Publié par agrapheuse
Filed in Technique
Tags:, , , , , , ,
Laisser un Commentaire »
Suivre

Get every new post delivered to your Inbox.