HTML 5 Favicon - Assistance?

Je lisais la page Favicon sur Wikipedia. Ils mentionnent la spécification HTML 5 pour Favicon:

La spécification HTML5 actuelle recommande de spécifier des icônes de taille dans plusieurs tailles à l'aide des attributs rel = "icon" size = "liste des dimensions des icônes séparées par des espaces" dans une balise. [ source ] Plusieurs formats d'icônes, y compris des formats de conteneurs tels que les fichiers Microsoft .ico et Macintosh .icns, ainsi que des graphiques vectoriels évolutifs peuvent être fournis en incluant le type de contenu de l'icône sous la forme type = "file content-type" dans le marque.

En regardant l'article cité (W3), ils montrent cet exemple:

<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

Ma question est la suivante: certains navigateurs prennent-ils en charge la méthode HTML 5?

Remarque: je sais qu'Apple utilise sa apple-touch-iconméthode de balise Meta plutôt que la méthode HTML5.

L'article de Wikipédia affirme:

Cependant, le navigateur Web Google Chrome sélectionnera la taille la plus proche de celle fournie dans les en-têtes HTML pour créer des icônes d'application de 128 × 128 pixels lorsque l'utilisateur choisit les raccourcis Créer des applications ... dans le menu "Outils".

Comment Internet Explorer (v9 à v11) et Firefox gèrent-ils cela? Et l'article est-il correct dans la façon dont Chrome gère les favicons HTML? (Aucune source citée pour Chrome ne le confirme.)

En recherchant, je n'ai pas vraiment trouvé d'informations (crédibles) sur HTML 5 Favicon autre que l'article Wikipedia.

Les réponses fournies (au moment de cet article) sont des réponses de lien uniquement, alors j'ai pensé que je résumerais les liens en une réponse et ce que j'utiliserai.

Lorsque vous créez des favicons de navigateur croisé (y compris des icônes tactiles), plusieurs éléments doivent être pris en compte.

Le premier (bien sûr) est Internet Explorer. IE ne prend pas en charge les favicons PNG jusqu'à la version 11. Notre première ligne est donc un commentaire conditionnel pour les favicons dans IE 9 et inférieurs:

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

Pour couvrir les utilisations de l'icône, créez-la à 32x32 pixels. Notez que rel="shortcut icon"pour que IE reconnaisse l'icône, il a besoin du mot shortcutqui n'est pas standard. Nous enveloppons également le .icofavicon dans un commentaire conditionnel IE car Chrome et Safari utiliseront le .icofichier s'il est présent, malgré les autres options disponibles, pas ce que nous souhaiterions.

Ce qui précède couvre IE jusqu'à IE 9. IE 11 accepte les favicons PNG, cependant, IE 10 ne le fait pas. De plus, IE 10 ne lit pas les commentaires conditionnels, donc IE 10 n'affichera pas de favicon. Avec IE 11 et Edge disponibles, je ne vois pas IE 10 largement utilisé, 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 196 x 196 pixels pour couvrir tous les appareils pouvant utiliser cette icône.

Pour couvrir les icônes tactiles sur les appareils mobiles, nous allons utiliser la méthode exclusive d'Apple pour citer une icône tactile:

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

L' rel="apple-touch-icon-precomposed"utilisation n'appliquera pas la brillance réfléchissante lors de la mise en signet sur iOS. Pour que iOS applique la brillance, 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 que Blackberry utilisera également rel="apple-touch-icon-precomposed".

À noter: Chrome pour Android déclare:

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 vignettes à la taille suivante:

Petit: 128 x 128

Moyen: 270 x 270

Large: 558 x 270

Grand: 558 x 558

Celles-ci doivent être des images transparentes car nous définirons ensuite un arrière-plan de couleur.

Une fois ces images créées, vous devez créer un fichier xml appelé browserconfig.xmlavec 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 recherche ce fichier. Si vous souhaitez nommer le fichier xml différemment 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 les vignettes personnalisées IE 11+ et l'utilisation du fichier XML, visitez le site Web de Microsoft .

Mettre tous ensemble:

Pour mettre tout cela ensemble, 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">

Tuiles Windows Phone Live

Si un utilisateur utilise un Windows Phone, il peut épingler un site Web sur l'écran de démarrage de son téléphone. Malheureusement, lorsqu'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 une «vignette dynamique» pour les utilisateurs de Windows Phone pour votre site Web, vous devez utiliser le code suivant:

Voici les 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 à une taille de 768x768 pixels.

Étape 2

Ajoutez 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 une épingle 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 d'afficher uniquement ce lien à ces utilisateurs, car il ne fonctionnera pas pour les autres utilisateurs.

Étape 4

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

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

Remarque sur les tailles

J'utilise une taille car chaque navigateur réduira l'image si nécessaire. Je pourrais ajouter plus de HTML pour spécifier plusieurs tailles si vous le souhaitez pour ceux qui ont une bande passante inférieure, mais je compresse déjà fortement les fichiers PNG en utilisant TinyPNG et je trouve cela inutile pour mes besoins. De plus, selon la réponse de philippe_b , Chrome et Firefox ont des bogues qui font que le navigateur charge toutes les tailles d'icônes. L'utilisation d'une grande icône peut être préférable à plusieurs petites icônes à cause de cela.

Lectures complémentaires

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

• Article Wikipédia sur les favicons
• Le manuel des icônes
• Comprendre le Favicon de Jonathan T. Neal
• 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

Non, tous les navigateurs ne prennent pas en charge l' sizesattribut:

• Safari: Oui, il choisit l'image qui convient le mieux .
• Opera: Oui, il choisit l'image qui convient le mieux .
• IE11: Pas sûr. Il prend apparemment la plus grande image qu'il trouve , ce qui est un peu grossier mais correct.
• Chrome: Non, voir les bogues 112941 et 324820 . En fait, Chrome a tendance à charger toutes les icônes déclarées, pas seulement la meilleure / la première / la dernière.
• Firefox: Non, voir le bogue 751712 . Comme Chrome, Firefox a tendance à charger toutes les icônes déclarées.

Notez que certaines plates-formes définissent des tailles spécifiques:

• Android Chrome attend une icône 192x192 , mais il privilégie les icônes déclarées manifest.jsonsi elle est présente. De plus, Chrome utilise l'icône Apple Touch pour les signets .
• Coast by Opera attend une icône 228x228 .
• Google TV attend une icône 96x96 .