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: