Blog Tool Box

Mettre en place une favicon

Une favicon est une petite icône associée à un site web et qui apparait à coté de la barre d’adresse, dans l’onglet de la page et dans les favoris.

En avez vous une ?
Bien sur cela ne va pas « révolutionner  » votre blog mais néanmoins, cela lui rajoutera un petit plus qui fera que vos lecteurs le retrouveront plus facilement dans leurs favoris et pendant de leurs séance de surf.

Favicon dans un onglet

Une favicon ça fait 16x16px sous un format .ico idéalement, car seul le format .ico est accepté par Internet Explorer au contraire de Mozilla FireFox qui accepte n’importe quel format de favicon.

Comment créer une favicon ?
Adobe Photoshop, bien qu’il soit un excellent logiciel ne permet pas l’import ou l’export de fichiers ico. Pas de panique, il existe un petit plugin qui donnera à Photoshop la capacité de travailler des fichier ico.

Si vous avez déjà votre image mais qui n’a pas la bonne résolution ni le bon format, il suffira d’envoyer celle-ci sur FavIcon qui vous réalisera en instant la conversion. Ce site web génèrera votre favicon et même une version gif animé.

Il vous suffit maintenant déposer le fichier favicon.ico à la racine de votre espace web et de rajouter cette petite ligne entre les balises <head> et </head> de votre header :
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Et voila, votre blog possède maintenant sa favicon qui lui ajoutera une petite pointe d’originalité.

  • lomig

    salut,
    merci pour ce mode d’emploi simple et clair. Je fonce dessiner des favicon pour mes blogs…
    à bientôt !

  • 16 Them All

    Je connaissais cette « astuce » qui ajoute un petit plus original à un site.

    Ton favicon vient du site Famfamfam non ?

  • Max

    Exact, ma favicon est tirée du pack « Silk Icon » de chez famfamfam.com

  • Alexis Chatougri

    Perso j’ai créé ma favicon sur photoshop mais sans utiliser de plugin ou autre: j’ai simplement créé un fichier .png que j’ai renommé en .ico ensuite, et ça marche correctement. :-)
    Du coup cet article me fait me demander si le fait de ne pas avoir un .ico « pur » est susceptible de poser problème ? J’ai l’impression que non ?

  • Anon

    Après avoir galéré plusieurs jours pour ce favicon, j’ai finalement réussi. Je ne sais pas si c’est du fait qu’il manquait (type= »image/x-icon »), pourtant j’ai bien fait comme il est expliqué sur la plupart des sites, en tout cas merci.