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="./media/f80b43f6.favicon-16x16.png" data-original-source="http://www.planet-libre.org/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="./media/b450ca38.favicon-32x32.png" data-original-source="http://www.planet-libre.org/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="./media/2b268605.favicon-96x96.png" data-original-source="http://www.planet-libre.org/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="./media/d8250d83.favicon-160x160.png" data-original-source="http://www.planet-libre.org/favicon-160x160.png" sizes="160x160" />
<link rel="icon" type="image/png" href="./media/1333f341.favicon-228x228.png" data-original-source="http://www.planet-libre.org/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="./media/c63d2371.favicon-196x196.png" data-original-source="http://www.planet-libre.org/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="./media/6085af44.apple-touch-icon-57x57.png" data-original-source="http://www.planet-libre.org/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="./media/81af6d9c.apple-touch-icon-60x60.png" data-original-source="http://www.planet-libre.org/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="./media/4ca35aca.apple-touch-icon-72x72.png" data-original-source="http://www.planet-libre.org/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="./media/6a9b9bba.apple-touch-icon-76x76.png" data-original-source="http://www.planet-libre.org/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="./media/69b4a336.apple-touch-icon-114x114.png" data-original-source="http://www.planet-libre.org/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="./media/468e800a.apple-touch-icon-120x120.png" data-original-source="http://www.planet-libre.org/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="./media/d358cf3f.apple-touch-icon-144x144.png" data-original-source="http://www.planet-libre.org/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="./media/6ec6e374.apple-touch-icon-152x152.png" data-original-source="http://www.planet-libre.org/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 :

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 :

  
    
      
      
      
      
      #000000
    
  

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

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.

Cet article Favicons : Et si on parcourait le monde ? est apparu en premier sur RootsLabs.

Original post of Progi1984.Votez pour ce billet sur Planet Libre.