RootsLabs

Si je vous demande le nom de cette petite image qui représente votre marque, votre projet ou votre société dans les navigateurs, vous allez sûrement me donner comme réponse : FAVICON. Dans cet article, nous allons faire le tour des navigateurs et de certains systèmes pour voir ce qu’ils attendent comme favicon et le rendu.

Navigateurs & Favicon

Internet Explorer

Le navigateur cher à tout développeur web est une exception car ce qu’il attend comme favicon est un fichier icône d’extension ICO : favicon.ico.
Cette icône devra contenir plusieurs formats de votre logo :

• 16×16
• 24×24
• 32×32
• 64×64

Ensuite, au niveau de code HTML, l’intégration se fera comme cela :

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

Source : Microsoft MSDN

Autres navigateurs

Les autres navigateurs attendent une image de type PNG : favicon.png, mais peuvent souvent se débrouiller avec le fichier favicon.ico.
Le format, par défaut, est de 16×16.
Mais il y a des exceptions :

• Safari pour MacOS : 32×32
• Google TV : 96×96
• Opera Speed Dial (version 12 à 15) : 160×160
• Opera Coast : 228×228

Pour le code HTML :

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160" />
<link rel="icon" type="image/png" href="/favicon-228x228.png" sizes="228x228" />

Source : Google Developers
Source : Opera
Source : Opera Coast

Mobiles & Favicon

Google Chrome Mobile

Avec la version mobile de Google Chrome (à partir de la version M31 Beta), on reste sur du format PNG mais dans une taille de 196×196.

Pour le code HTML :

<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196" />

Source : Google Developers

iOS

Apple fait la différence en utilisant un attribut rel de type « apple-touch-icon ». Il lui faut une image de type PNG.
Les différentes tailles sont :

• iPhone non-Retina (iOS6 ou inférieur) : 57×57
• iPhone non-Retina (iOS7) : 60×60
• iPad non-Retina (iOS6 ou inférieur) : 72×72
• iPad non-Retina (iOS7) : 76×76
• iPhone Retina (iOS6 ou inférieur) : 114×114
• iPhone Retina (iOS7) : 120×120
• iPad Retina (iOS6 ou inférieur) : 144×144
• iPad Retina (iOS7) : 152×152

Pour le code HTML :

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />

Source : Apple Developer

Système d’exploitation & Favicon

Windows 8.0 et IE 10

Contrairement à IE 11 et son fichier browserconfig.xml, IE 10 demande des balises META et utilise un fichier PNG de taille 144×144.

Pour le code HTML :

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

Source : Article du Blog MSDN sur ces balises META
Source : Documentation MSDN sur ces balises META

Windows 8.1 et IE 11

L’équivalent Metro de l’attribut « apple-touch-icon » est la tuile MS (a.k.a. MSTile). Il lui faut définir deux choses la couleur principale via la clé « msapplication-TileColor » et la favicon via la clé « msapplication-TileImage ».

IE 11 recherche un fichier browserconfig.xml à la racine du site en plus des balises META. Ce fichier permet de définir plusieurs paramètres dont d’autres favicons :

• square70x70logo : Tuile de petite taille
• square150x150logo : Tuile de moyenne taille
• square310x310logo : Tuile de grande taille
• wide310x150logo : Tuile en mode 16/9
• TileColor : Couleur de fond de la tuile

Voici un exemple de fichier browserconfig.xml :

<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <TileColor>#000000</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Si vous ne souhaitez pas utiliser le nom de fichier browserconfig.xml, il faut le redéfinir via une balise META :

<meta name="msapplication-config" content="ieconfig.xml" />

Source : MSDN

Conclusion

Le monde des favicon est vaste, mais j’espère que cette carte vous aidera à vous diriger et y trouver votre chemin.