Afficher une icône favicon dans le navigateur

Astuce par (Eleveur de kiwiz, Strasbourg)
Mis à jour le . 28464 lectures.
Tags : xhtml, favicon, icone

Une favicon est une icône mise à disposition par un site Web pour enjoliver, en particulier dans les navigateurs Web, les endroits où ce site est mentionné. Cette icône pourra être utilisée dans la barre d'adresses ou de titre, les favoris (le terme est d'ailleurs un mot-valise né de la contraction de « favorites » et « icon »), les onglets, ou autres raccourcis. (source : Wikipedia)

Favicon

Pour avoir une favicon lisible par la plupart des navigateurs, il est préférable que cette image soit au format .ico. Il s'agit d'un format d'icône propriétaire de Windows, basé sur le BMP. Attention : il est possible que votre logiciel de graphisme habituel ne gère pas ce format, auquel cas ils vous faudra installer un logiciel spécifique pour le convertir, ou encore utiliser un service web proposant la conversion des formats d'image génériques au format .ico (pour ces derniers, voir dans les liens complémentaires ci-dessous).

Une fois votre fichier favicon.ico en ligne, il ne vous restera plus qu'à l'appeler depuis votre page. Voici le code à insérer entre les balises <head> et </head> de votre page :

<link rel="shortcut icon" href="favicon.ico" />

Les navigateurs modernes, y compris Mozilla, Opera, Chrome, Safari acceptent d'autres types de fichiers d'image comme le PNG qui est un format libre et compressé. Ces navigateurs acceptent également la valeur "icon" pour l'attribut rel. Enfin vous pouvez ajouter le type MIME du fichier image ce qui donne par exemple ceci :

<link rel="icon" type="image/png" href="logo.png" />

Cette méthode n'est pas réellement plus standard que la première car ni "icon" ni "shortcut icon" ne sont des valeurs de l'attribut rel reconnues par le W3C, bien qu'ils l'utilisent désormais dans leurs pages.

Il n'existe pas de type MIME officiel pour les fichiers .ico mais le type image/x-icon est très répandu et conforme au standard de formation des types MIME.

La plupart du temps les navigateurs récents vérifient la présence d'un fichier favicon.ico à la racine du site, dès le chargement d'une quelconque page de ce site (à tous niveaux de l'arborescence), même si aucune référence n'y est faite dans <head> grâce à <link>.

Ressources