Blog
Informations sur le favicon

Partager

a tons of random favicons J'ai été en charge de mettre des favicons compatibles avec les principaux navigateurs et devices du moment pour le site public de BigInt.

J’ai alors réalisé que je ne connaissais pas grand-chose sur le sujet. Pour moi, le favicon était simplement une image 16x16 nommée "favicon.ico" à la racine ou un simple lien dans à l'intérieur de la balise head :

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

L’affreuse vérité, c’est que les favorite icons se sont bien étoffés ces dernières années. Nous allons voir ce qu’il est nécessaire de comprendre pour les utiliser au mieux :

Format du fichier

Internet Explorer (< 11) ne gère pas le format PNG. Nous devons donc inclure le fichier au format .ico à la racine de notre site.
Ce fichier peut (et doit idéalement) contenir plusieurs PNG, qui seront utiliser en fonction des contextes d’affichage :

  • Une image 16x16 pour la barre d’adresse
  • Une image 24x24 pour les sites epinglés avec IE9 et Windows 7
  • Une image 32x32 pour les onglets et le boutton dans la barre des tâches
  • Une image 64x64 pour les écrans retina

Les autres navigateurs gèrent parfaitement les fichiers PNG mais il n’est pas possible d’inclure plusieurs résolutions dans un même PNG. On doit donc multiplier les fichiers :

	<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196" />
	<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
	<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
	<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />

Disséquons un peu le tag "link" :

  • L’attribut rel accepte la valeur "icon" pour tous les navigateurs sauf IE (version 6 à 10) pour lesquels il faut utiliser "shortcut icon". Néanmoins, comme l’explique Jonathan T. Neal, cela pose des soucis de comptabilité avec Chrome et Opéra. Le mieux est de ne pas utiliser "shortcut icon" et de placer le fichier .ico à la racine.
  • L’attribut type n’est pas vraiment important. C’est le mime type envoyé par le serveur qui prime.
  • L’attribut href indique bien sur l’emplacement du fichier (préférez les liens absolus).
  • L’attribut size est utile pour spécifier les résolutions cibles.

Gotta catch them all Malheureusement pour nous les développeurs/intégrateurs, ll existe énormément de résolutions à supporter. Cela est dû à la multiplication des devices (pc, téléphones, TV et bientôt iWatch), la taille des différents écrans, les différents navigateurs sur le marché (Chrome, FF, IE) et aux délires syntaxiques propriétaires de Microsoft et Apple.

Voici la liste des résolutions à supporter en plus de celles décrites précédemment :

Google

  • 96x96 (Google TV)
  • 196x196 (Chrome Android v31+)

Apple

Pour supporter tous les devices apples (avec écran retina ou non, avant ou après iOS6) :

  • 57x57
  • 60x60
  • 72x72
  • 76x76
  • 114x114
  • 120x20
  • 144x144
  • 152x152

IE10 Metro :

Lorsque les utilisateurs de Windows 8 décident d’épingler un site à leur écran d’accueil, ces icones sont à la taille 144*144. Il est également possible de spécifier la couleur du carreau.

Pour cela, on utilise les deux balises méta suivantes :

<meta name="msapplication-TileColor" content="#2b5797" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />

IE11

Avec la dernière version de son navigateur, Microsoft a introduit le fichier "browserconfig.xml".
Ce fichier XML permet, entre autre, de customiser l’apparence de votre site lorsqu’il est épinglé et l’apparence des notifications.
La documentation complète est disponible sur le site de Microsoft.

Pour le site public, notre fichier est :

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <TileColor>#2b5797</TileColor>
    </tile>
  </msapplication>
</browserconfig>

On donne le chemin vers les 4 différents types d’images supportés par IE11 et la couleur du titre sur l’interface métro.
Je vous recommande d’ajouter ce fichier pour 2 raisons :

  • Le fait de mettre ces options de configuration dans un fichier spécifique vous économisera quelques octets dans vos pages HTML (seul IE11 chargera ces données supplémentaires).
  • IE11 cherchera de toute façon à charger ce fichier. Des erreurs 404 seront donc générées sur votre serveur si le fichier n’est pas présent.

Touch Icons (iOS et Android)

La base

Les "Touch Icons" sont les icônes présentes vos téléphones portables et vos tablettes. Si les touch icon ne sont pas présentes, une miniature est générée à partir d'une capture d'écran de votre site. Ainsi, en épinglant le blog de BigInt depuis un Ipad ou un Nexus, on obtenait : Sans touch icon Maintenant, on obtient : Sans touch icon La façon la plus simple pour proposer un tel rendu est d’utiliser l’attribut rel :

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

Et oui, Apple ne voulait pas de se contenter de la valeur "icon" spécifier par le HTML mais à préférer définir une syntaxe propritaire.
Depuis la version 2.1, Android supporte cette syntaxe. Néanmoins, à partir de la version de chrome 31 pour Android, vous pouvez utiliser la syntaxe recommandé par l'HTML5 :

<link rel="icon" sizes="160x160" href="favicon-160x160.png">

Si cette syntaxe n'est pas présente, Chrome se rabattra sur la syntaxe Apple.

Particularités : precomposed

Lorsque vous spécifiez un touch icon pour iOS. Le système d’exploitation ajoute des effets visuels à votre icône :

  • Des bords arrondis
  • Un effet glossy
  • Une ombre portée

Si vous ne voulez pas de tous ces effets supplémentaires ou si votre icône les incorpore déjà, vous pouvez suffixer votre fichier avec "-precomposed" pour dire à iOS de ne pas toucher à votre icone.

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

Néanmoins, depuis iOS 7, le suffixe precomposed est devenu deprecated et les effets ne sont plus ajoutés par défaut.

Générer vos favicons

Vous l’aurez compris, pour faire les choses bien et être exhaustif, il faut supporter de nombreuses tailles et formats de favicons.
C’est une opération chronophage qui n’apporte pas une énorme valeur ajoutée. Alors plutôt que gaspiller le temps de votre intégrateur, utilisez un générateur de favicon.

J’ai testé plusieurs outils (scripts et sites internet) et celui-ci apparaît comme le plus concluant et le plus simple d’utilisation :

  1. Vous uploadez votre image d’origine.
  2. L’outil génère tous les favicons nécessaires et le snippet HTML à inclure dans vos pages.
  3. Vous uploadez ces fichiers sur votre serveur et intégrer le bout de code HTML dans votre balise .

(l’outil ne génère pas les tailles spécifiques à Opera mais vu le nombre d’utilisateur consultant le site sur Opera ce n’était pas un problème pour nous).

Résultat

Sur le site public, j’ai ajouté le bout de code suivant dans la balise head :

	<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
	<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
	<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png" />
	<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
	<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
	<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
	<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196" />
	<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160" />
	<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
	<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
	<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
	<meta name="msapplication-TileColor" content="#2b5797" />
	<meta name="msapplication-TileImage" content="/mstile-144x144.png" />

Ces fichiers se trouvent à la racine du site avec en plus les fichiers favicon.ico, favicon.png et browserconfig.xml

comments powered by Disqus