Qu'est-ce qu'un "favicon" ?

Vous désirez tout savoir sur les favicons ?

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", le favicon 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 32x32 ou 16x16 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 pour changer ou créer votre favicon :

Vous me contactez et je vous le dessine et vous le mets dans le bon format ! ;-)
Vous pouvez en trouver des tout-faits et gratuits sur la toile, notamment sur favicon.fr
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 !)
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.

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.

URL rétrolien (trackback) pour cet article

Trackbacks/Pingbacks: 0

écrire commentaire

2 Commentaires

#1
voyage-ecosse (dimanche, 27 septembre 2009 09:55)

Sympa cet article.
Par contre, je rajouterais deux autres possibilités:
- utiliser un service d'édition en ligne, pour créer un favicon pixel par pixel (pas toujours extra pour faire un truc de pro).
- utiliser un outil qui transforme automatiquement une image existante en une petite icône. Personnellement j'ai utilisé le service http://www.html-kit.com/favicon/ pour transformer le drapeau de l'Écosse en un jolie favicon. :)
Excellente continuation.
#2
Aurélie Maronnat (lundi, 28 septembre 2009 07:49)

Merci pour votre commentaire ! J'ajoute le lien tout de suite à l'article. Bien qu'il soit en anglais, ce site à l'air bien pratique, effectivement !