Afficher une icône favicon dans le navigateur

Astuce par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (214533 lectures)
Tags : 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="icon" href="favicon.ico" />

Les navigateurs modernes acceptent d'autres types de fichiers d'image comme le PNG qui est un format libre et compressé, mieux adapté au web. 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" />

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