Une favicon pour votre site

19 décembre 2005,
par Romy Têtue

Mots-clefs associés à cet article :

« Icône d’URL » ou « icône de favoris », la favicon est la petite image qui s’affiche à côté de l’URL dans la barre d’adresse de votre navigateur et à côté du nom du site dans vos listes de favoris ou sur les onglets.

Petit détail superflu, mais tout de même recommandé comme bonne pratique N°29, la favicon donne un repère visuel permettant d’identifier rapidement un site parmi les nombreux onglets ou favoris.

Comment réaliser la favicon ?

Ce qu’il faut savoir : cette icône doit absolument être en 256 couleurs pour une taille de 16 x 16 ou 32 x 32 pixels. Toutefois, pour un affichage correct de la favicon sur tous les systèmes et dans tous les contextes, elle doit être « au moins proposée au format 32 x 32 pixels » (cf. : bonne pratique N°30).

Comme vous vous en doutez, il est assez difficile de faire tenir un graphisme léché dans un si petit format. Optez pour des images simples, un logo, une ou deux lettres.
La favicon est en fait un avatar de site : elle doit refléter votre site, de façon à ce que l’internaute puisse aisément l’associer au site. Sa couleur dominante sera donc identique à celle du site.
Si vous avez un logo, il est logique de l’utiliser pour générer la favicon. Le réduire au bon format n’est pas toujours joli et il faut souvent le retoucher pour qu’il demeure visuellement signifiant, net et non pas flou. Il doit tenir dans ce format carré. Évitez les zones vides, transparentes : il est dommage de ne pas utiliser tous les pixels d’une si petite surface.

Il existe de nombreux tutoriels en ligne qui aident à créer une icône d’URL. Vous trouverez même un éditeur de favicon en ligne, et des sites tels que Favicon France qui mettent à disposition des centaines d’icônes gratuites.

Comment installer la favicon ?

Une fois votre icône terminée, enregistrez-là au format de votre choix, et placez son fichier via FTP sur votre site. Appelez ensuite ce code dans le head de chaque page :

<link rel="icon" type="image/png" href="votre-dossier/favicon.png" />

Remarquez l’attribut type qui contient le « type » ou « Mime Type » de l’image. Les plus courants sont : « image/jpg », « image/png », « image/gif », selon le format de fichier de votre icône (les navigateurs modernes supportent différents formats de favicon, y compris animé).

Tout se gâte avec IE…

Pour afficher aussi votre favicon dans Internet Explorer, vous devez la convertir au format propriétaire de Microsoft, .ico, qui est le seul supporté par ce navigateur.

Si vous ne disposez pas d’utilitaire de conversion, vous pouvez utiliser les générateurs de favicon en ligne, où télécharger son fichier, pour le transformer au bon format, sur ces sites : dynamicdrive.com et html-kit.com et dagondesign.com.

Renommez le fichier résultant en favicon.ico, placez-le à la racine de votre site, et ajoutez ce code dans le head de chaque page :

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

Paradoxalement, cette seconde approche, bien que non respectueuse des standards, est souvent préférée car supportée par la majorité des navigateurs.

Vos commentaires

1. Le 15 juin 2008 à 23:51, par marc En réponse à : Une favicon pour votre site

je n’arrive pas à mettre ma favicon ! ;-) Pouvez-vous m’aider !? En fait je bute (c’est bête je sais..) sur le code à mettre sur chaque page...quelles pahes ? HTML ?
2. Le 16 juin 2008 à 09:00, par Romy Têtue En réponse à : Une favicon pour votre site

Le lien d’appel de la favicon se place dans chacune des pages HTML du site, dans l’entête de page, c’est-à-dire entre les balises <head>.
Lire d’abord : Apprendre le Html, structure d’une page html
3. Le 8 avril 2009 à 17:01, par gtcv En réponse à : Une favicon pour votre site

Bonjour super tes explications,

pour ma par j’ai mis ça sur ma page :
" head>
link rel="shortcut icon" type="image/x-icon" href="favicon.ico" / "
« avec les inferieur et superieur qui vont bien !! »

nickel sur firefoxe par contre rien sur IE
As tu une idéee
4. Le 23 décembre 2009 à 14:12, par Shnoulle En réponse à : Une favicon pour votre site
Salut,

Mis en application sur la dist de spip V2 (cf modeles/favicon.html) :).

Sinon, j’ai fait cette modif sur le squelette favicon.ico.html qui semble fonctionner
#HTTP_HEADER{"Content-Type: image/x-icon"} [(#INCLURE{favicon.ico}|sinon{#INCLURE{#LOGO_SITE_SPIP| |image_passe_partout{32,32} |image_recadre{32,32,center} |image_format{ico}|extraire_attribut{src}} |sinon{#INCLURE{spip.ico}}} )]
5. Le 8 mars 2010 à 10:34, par Dom En réponse à : Une favicon pour votre site

Sais-tu comment changer le favicon de l’espace privé de SPIP ? J’ai une quinzaine de sites à gérer et j’aimerais bien les distinguer un peu mieux dans mes signets.

Pour les sites encore en 1.9.2, il semble qu’il suffise de mettre le favicon dans /ecrire, mais en 2.0.10 ça ne marche pas. Une piste ?

Merci beaucoup !
6. Le 16 juin 2010 à 22:52, par Stéphan En réponse à : Une favicon pour votre site
Il manqurait un morceau de code pour les ipad et autres tablettes mac non ?
<link rel="apple-touch-icon" href="apple-touch-icon.png">
A ajouter dans SPIP2.2 ? ;)
7. Le 2 octobre 2011 à 17:46, par Cours de cuisine En réponse à : Une favicon pour votre site

Bonjour,
Merci pour les explications.
8. Le 3 juillet 2012 à 21:56, par Nathan Rosa En réponse à : Une favicon pour votre site

Bonjour,
J’ai réussi à mettre un favicon sur ma page d’accueil, mais des que je vais sur ma page contact, etc le favicon disparait donc comment est ce que l’on mettre un favicon sur toutes les pages de son site à part manuellement ?
9. Le 18 mai 2015 à 19:00, par Romy Têtue En réponse à : Une favicon pour votre site

Pour les utilisateurices de SPIP : la favicon est automatiquement générée par SPIP à partir du logo du site. Pour compléter avec les diverses touch icon pour terminaux tactiles, utilisez le petit plugin Favicon que je viens de partager lors de la dernière rencontre SPIP.