Icône des favoris (favicon)

© Christian PAULUS. Document créé le 14 janvier 2004 , mis à jour le 14 novembre 2011.

Ce sont nos choix qui montrent ce que nous sommes vraiment, beaucoup plus que nos aptitudes. Joanne Rowling

Accueil du site > Astuces > WEB > Icône des favoris (favicon)

WEB / favicon

Une particularité d’Explorer (Windows uniquement, à l’époque de la rédaction de ce document) permet la personnalisation de l’icône affiché dans la liste des Favoris et dans le champ URL de ce navigateur.

Le format ICO

Pour Internet Explorer, cette icône doit être au format ICO. Ce format n’est pas un BMP. Même si ce dernier est parfois correctement interprété, il vaut mieux utiliser un éditeur approprié ou un filtre sous Photoshop, tel IconBuilder (IconFactory) ou celui présent sur telegraphics.com.au (dont une version qui ne pèse que 27 ko.).

Il existe également un site Internet permettant la génération en ligne de votre favicon.ico : http://www.html-kit.com/e/favicon.cgi. Un vrai bijou !

L’ICO peut contenir plusieurs icones, à des tailles et des palettes "couleur" différentes. Mais pour l’icône de vos pages WEB, il conviendra de rechercher le format le mieux adapté pour ne pas surcharger le téléchargement tout en conservant la qualité désirée. La taille conseillée de l’icône est 16 x 16 pixels, en 16 couleurs, mais le résultat dans ce format est parfois frustrant. D’ailleurs, bien souvent, on rencontrera sur la toile un 32 x 32 plus encourageant.

Explorer semble être tatillon. Certains nomment leur icone « favicon.ico ». Il en résulte une grande collection de fichiers portant ce nom en cache et parfois un affichage aléatoire qui oblige à jongler avec le cache local du navigateur, en supprimant le fichier en question dans les fichiers temporaires, le tout accompagné de redémarrage de l’application. Le mieux est de lui trouver un nom original, celui de votre site par exemple.

Certains moteurs viennent également chercher « favicon.ico » à la racine du site. Placez votre icône en conservant le nom « favicon.ico » vous évitera au mieux les messages d’erreur 404 et allégera ainsi les journaux (logs).

Une fois la petite icône réalisée, insérez la ligne de code HTML appropriée dans l’en-tête de vos pages WEB :

<link rel="shortcut icon" href="nom_de_votre_icone.ico">

Et le format PNG

Firefox, Safari et Opera respectent le standard PNG. Il vous suffit de réaliser la version PNG de votre favicon et d’ajouter la ligne :

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

dans le head de votre code HTML.

Favicon dans les deux formats

Logiquement, votre favicon doit donc être réalisés dans les deux formats. Le code à placer dans le head devient alors :

<link rel="shortcut icon" href="nom_de_votre_icone.ico" />
<link rel="icon" type="image/png" href="nom_de_votre_icone.png" />

Voire optimisé :

<!--[if IE]>
  <link rel="shortcut icon" type="image/x-icon" href="nom_de_votre_icone.ico" />
<![endif]-->
<link rel="icon" type="image/png" href="nom_de_votre_icone.png" />

Si le nom de votre icône est différente de favicon, recopiez la version ICO sous le nom favicon.ico à la racine du site. Certains navigateurs recherchent automatiquement ce fichier, même si sa présence est précisée dans le head de votre fichier HTML.

Visualiser la favicon dans la barre d’adresse

Vérifiez d’abord votre favicon en la déposant au milieu d’une fenêtre de votre navigateur Internet.

Pour faire apparaître l’icône dans la barre URL du navigateur, il faut parfois rafraîchir l’URL : dans le champ éponyme, cliquez sur l’icône à gauche de l’URL, maintenez appuyé, pressez la touche majuscule (shift), déplacez légèrement la souris et relâchez. Mais la plupart du temps, vous serez obligé de passer par la case « Vider le cache ».

Favicon pour iPad, iPhone, iPod

Pour le monde à la pomme, la favicon se nomme apple-touch-icon. L’icone doit être au format carré de 57 pixels enregistré dans un fichier au format PNG (en réalité, on peut également utiliser les formats gif et jpg, mais png donne souvent de biens meilleurs résultats).

Si la taille recommandée est de 57 × 57 pixels, 72 x 72 pixels est recommandé pour iPad. Apple elle-même semble préférer 129 × 129 pixels.

Astuce : utiliser advpng (AdvanceComp) pour optimiser au maximum votre fichier PNG. Sous MacOSX, port info advancecomp sous terminal pour en savoir plus à ce propos.

Inutile de préparer les bords arrondis et l’effet glossy, l’IOS - le système - s’en occupe.

Et la phrase magique à ajouter dans le head de votre code HTML :

<link href="/apple-touch-icon.png" rel="apple-touch-icon" />

Installer les favicons pour mon CMS

Documentation complémentaire :

Plussoyez !

Répondre à cet article