HTML 5 Favicon-Support?

Les réponses fournies (au moment de ce post) sont des réponses uniquement liées aux liens, donc j'ai pensé que je résumerais les liens en une réponse et ce que je vais utiliser.

Lorsque vous travaillez à créer des Favicons Cross Browser (y compris les icônes tactiles), il y a plusieurs choses à considérer.

Le premier (bien sûr) est Internet Explorer. IE ne supporte pas les favicons PNG jusqu'à la version 11. Donc, notre première ligne est un commentaire conditionnel pour les favicons dans IE 9 et ci-dessous:

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

Pour couvrir le les utilisations de l'icône le créent à 32x32 pixels. Notez le rel="shortcut icon" pour que IE reconnaisse l'icône, Il a besoin du mot shortcut qui n'est pas standard. Nous enveloppons également le .ico favicon dans un commentaire conditionnel IE car Chrome et Safari utiliseront le fichier .ico s'il est présent, malgré d'autres options disponibles, pas ce que nous aimerions.

Ce qui précède couvre IE JUSQU'à IE 9. IE 11 accepte les favicons PNG, cependant, IE 10 ne le fait pas. Aussi IE 10 ne lit pas les commentaires conditionnels donc IE 10 ne montrera pas un favicon. Avec IE 11 et Edge disponibles, Je ne vois pas IE 10 en usage répandu, donc j'ignore ce navigateur.

Pour le reste des navigateurs, nous allons utiliser la méthode standard pour citer un favicon:

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

Cette icône doit avoir une taille de 196x196 pixels pour couvrir tous les périphériques susceptibles d'utiliser cette icône.

Pour couvrir les icônes tactiles sur les appareils mobiles, nous allons utiliser la manière propriétaire D'Apple pour citer une icône tactile:

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

En utilisant rel="apple-touch-icon-precomposed" ne sera pas appliquer la brillance réfléchissante lorsque signet sur iOS. Pour que iOS applique le shine, utilisez rel="apple-touch-icon". Cette icône doit être dimensionnée à 180x180 pixels car c'est la taille actuelle recommandée par Apple pour les derniers iPhones et iPads. J'ai lu Blackberry utilisera également rel="apple-touch-icon-precomposed".

Comme une note: Chrome pour Android États:

Les apple-touch - * sont obsolètes et ne seront pris en charge que pendant une courte période. (Écrit à partir de la version bêta pour M31 de Chrome).

Tuiles personnalisées pour IE 11 + sur Windows 8.1+

IE 11 + sur Windows 8.1 + offre un moyen de créer des tuiles épinglées pour votre site.

Microsoft recommande de créer quelques tuiles à la taille suivante:

Petit: 128 x 128

Moyen: 270 x 270

Large: 558 x 270

Grand: 558 x 558

CE devraient être des images transparentes car nous allons définir un fond de couleur ensuite.

Une fois ces images créées, vous devez créer un fichier xml appelé browserconfig.xml, avec le code suivant:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Enregistrez ce fichier xml à la racine de votre site. Lorsqu'un site est épinglé, IE recherchera ce fichier. Si vous voulez nommer le fichier xml quelque chose de différent ou l'avoir dans un emplacement différent, ajoutez cette balise meta au head:

<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />

Pour plus d'informations sur IE 11+ tuiles personnalisées et en utilisant le fichier XML visitez le site Web de Microsoft.

Mettre tout cela ensemble:

Pour tout mettre ensemble le le code ci-dessus ressemblerait à ceci:

<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">

Windows Phone Live Tuiles

Si un utilisateur utilise un Windows Phone, il peut épingler un site web à l'écran de démarrage de son téléphone. Malheureusement, quand ils le font, il affiche une capture d'écran de votre téléphone, pas un favicon (pas même le code spécifique MS référencé ci-dessus). Pour créer un "Live Tile" pour les utilisateurs de Windows Phone pour votre site web, il faut utiliser le code suivant:

Voici des instructions détaillées de Microsoft, mais voici un synopsis:

Étape 1

Créez une image carrée pour votre site web, pour prendre en charge les écrans haute résolution, créez-la à 768x768 pixels.

Étape 2

Ajoute une superposition cachée de cette image. Voici un exemple de code de Microsoft:

<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
  <img src="customtile.png" width="320" height="320" />
  <div style='margin-top: 40px'>
     Add text/graphic asking user to pin to start using the menu...
  </div>
</div>

Étape 3

Vous pouvez ensuite ajouter la ligne suivante pour ajouter un code pin pour démarrer le lien:

<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>

Microsoft vous recommande de détecter windows phone et montrez seulement ce lien à ces utilisateurs car cela ne fonctionnera pas pour les autres utilisateurs.

Étape 4

Ensuite, vous ajoutez quelques JS pour basculer la visibilité de superposition

<script>
function ToggleTileOverlay() {
 var newVisibility =     (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
 document.getElementById('TileOverlay').style.visibility =    newVisibility;
}
</script>

Note sur les Tailles de

J'utilise une taille car chaque navigateur réduit l'image si nécessaire. Je pourrais ajouter plus de HTML pour spécifier plusieurs tailles si désiré pour ceux avec une bande passante inférieure mais je compresse déjà fortement les fichiers PNG en utilisant TinyPNG et je trouve ceci inutile pour mes fins. En outre, selon philippe_b réponse Chrome et Firefox ont des bugs qui provoquent le navigateur pour charger toutes les tailles d'icônes. L'utilisation d'une grande icône peut être meilleure que plusieurs plus petites à cause de cela.

Pour En Savoir Plus

Pour ceux qui souhaitent plus de détails, voir les liens ci-dessous:

• Article de Wikipédia sur l'Icone
• L'Icône Manuel
• Le Favicon est un jeu vidéo de stratégie en ligne.]}
• rel= "icône de raccourci" considérée comme nuisible par Mathias Bynens
• Tout ce que vous avez toujours voulu savoir sur les icônes tactiles par Mathias Bynens