Jusqu'à présent, j'ai inclus la ligne de l'icône Apple Touch dans ma tête comme ceci :
<link rel="apple-touch-icon" href="http://stackoverflow.com/apple-touch-icon.png">
Cependant, en les questions-réponses "Quelles sont les dimensions correctes des pixels pour une icône apple-touch ?" il est indiqué dans la réponse acceptée que trois images sont maintenant nécessaires selon les directives d'Apple.
Alors comment faire pour les insérer dans la section head du code ?
Solution minimaliste - Recommandé
Une pratique courante consiste à créer une icône unique de 180x180, qui est la plus haute résolution attendue, et à laisser les appareils iOS la réduire selon les besoins. Elle est déclarée avec :
<link rel="apple-touch-icon" href="http://stackoverflow.com/path/to/apple-touch-icon.png">Solution exhaustive - Non recommandé
Spécifications d'Apple spécifier de nouvelles tailles pour iOS7 :
En outre, les icônes précomposées sont dépréciées.
Par conséquent, pour prendre en charge à la fois les nouveaux appareils (fonctionnant sous iOS7) et les plus anciens (iOS6 et antérieurs), le code générique est le suivant :
<link rel="apple-touch-icon" sizes="57x57" href="http://stackoverflow.com/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://stackoverflow.com/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://stackoverflow.com/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://stackoverflow.com/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="http://stackoverflow.com/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://stackoverflow.com/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://stackoverflow.com/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://stackoverflow.com/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="http://stackoverflow.com/apple-touch-icon-180x180.png">En outre, vous devriez créer une image 180x180 nommée apple-touch-icon.png .
Notez que iOS recherche des URL comme /apple-touch-icon-76x76.png s'il ne trouve pas d'éléments intéressants dans le code HTML (un peu comme ce qu'IE fait avec /favicon.ico ). Il est donc important de garder les noms de fichiers tels qu'ils sont ci-dessus. Il est également important de considérer que Android/Chrome utilise également ces images .
Vous voudrez peut-être savoir que cette générateur de favicons peut créer toutes ces images en même temps. Divulgation complète : je suis l'auteur de ce site.
Est-ce que tous les fichiers de chaque <link> téléchargés s'ils ne sont pas dans le cache du client ? Indépendamment de l'endroit où la page est demandée (téléphone, tablette, pc, Windows, Android...) ? Je suis un peu inquiet des conséquences sur les performances....
A partir d'iOS8, il y a aussi la nouvelle résolution 180x180. Il n'est pas vraiment nécessaire de créer un lien vers les icônes à partir du HTML, sauf si vous souhaitez des icônes spécifiques pour une page particulière. Apple a récemment publié une liste des tailles qu'elle apprécie : developer.apple.com/library/ios/documentation/UserExperience/ . Recherchez l'entrée "icône de clip Web" dans le tableau.
@qingu C'est exact, merci pour le rappel. J'ai mis à jour la réponse pour l'icône 180x180. Notez que d'autres navigateurs utilisent également ces icônes, comme Android Chrome. Les déclarer peut donc être utile, même si Safari ne l'exige pas.
Voilà, j'espère que ça vous aidera.
Si vous voulez qu'Apple s'occupe de l'aspect esthétique à votre place (ajouter le brillant), vous devez ajouter ces éléments à la section <head> tags :
<link rel="apple-touch-icon" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />Si vous voulez précomposer l'image, pour qu'Apple l'affiche sans le gloss, alors vous feriez ceci :
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />Si vous en incluez plus d'une, l'appareil iOS recherchera la taille correcte et utilisera automatiquement cette image. Comme vous pouvez le voir d'après les noms des images dans l'exemple, l'iPad avec affichage rétina a besoin d'une icône de 144x144px, l'iPhone 4/4S/5 a besoin d'une icône de 114x114px, l'iPad original (et l'iPad 2, car la résolution de l'écran n'est pas différente) a besoin d'une icône de 72x72px, et l'iPhone original n'a pas besoin d'une spécification de taille, mais pour votre référence, elle est de 57x57px.
Pourquoi précomposé signifie sans lustre ? Je n'arrive pas à faire coïncider la définition de "précomposé" avec "sans gloss". Et non, je ne suis pas sarcastique, je veux vraiment savoir.
@Mark0978 Je l'ai lu comme signifiant : "il est déjà composé, c'est-à-dire "stylé par iOS" (par vous), donc iOS n'y touchera pas (sauf pour arrondir les angles)".
Étant donné que certaines de ces réponses sont déjà périmées, je recommande d'utiliser http://realfavicongenerator.net/ pour générer toutes les images et le balisage - je donne quelques euros à chaque fois que je l'utilise dans l'espoir que cela leur permette de se tenir à jour quant à ce qui est actuellement valable sur iOS, Android et Windows, afin que je n'aie pas à le faire.
A partir de 2018, Site web des développeurs Apple recommande les mesures suivantes pour les appareils iOS :
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-startup-image" href="http://stackoverflow.com/launch.png">
<meta name="apple-mobile-web-app-title" content="AppTitle">App Title remplacera le titre de votre site web. En général, c'est ce que vous voulez. L'image de démarrage est celle qui apparaîtra lors du lancement de l'application.
Spécifier une icône de page Web pour le clip Web
Vous souhaitez peut-être que les utilisateurs puissent ajouter le lien de votre application Web ou de votre page Web à l'écran d'accueil. Ces liens, représentés par une icône, sont appelés clips Web. Suivez ces étapes simples pour spécifier une icône représentant votre application ou page Web sur iOS.
Pour spécifier une icône pour l'ensemble du site Web (chaque page du site), placez un fichier d'icône au format PNG dans le dossier du document racine appelé apple-touch-icon.png.
Pour spécifier une icône pour une seule page web ou remplacer l'icône du site web par une icône spécifique à la page web, ajoutez un élément de lien à la page web, comme dans :
<link rel="apple-touch-icon" href="http://stackoverflow.com/custom_icon.png">Dans l'exemple ci-dessus, remplacez custom_icon.png par le nom de votre fichier d'icône. Pour spécifier plusieurs icônes pour différentes résolutions de périphériques, par exemple pour prendre en charge les périphériques iPhone et iPad, ajoutez un attribut sizes à chaque élément de lien comme suit :
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">L'icône dont la taille est la plus appropriée pour le périphérique est utilisée. Si aucun attribut sizes n'est défini, la taille de l'élément est par défaut de 60 x 60. Si aucune icône ne correspond à la taille recommandée pour le périphérique, la plus petite icône supérieure à la taille recommandée est utilisée. S'il n'y a pas d'icône plus grande que la taille recommandée, la plus grande icône est utilisée.
Si aucune icône n'est spécifiée à l'aide d'un élément de lien, le répertoire racine du site Web est parcouru à la recherche d'icônes portant le préfixe apple-touch-icon.... Par exemple, si la taille d'icône appropriée pour le périphérique est de 60 x 60, le système recherche les noms de fichiers dans l'ordre suivant :
apple-touch-icon-76x76.png
apple-touch-icon.pngVoir la section Tailles des icônes et des images pour connaître les paramètres des icônes des pages Web.
Note : Safari sur iOS 7 n'ajoute pas d'effets aux icônes. Les anciennes versions de Safari n'ajoutent pas d'effets aux fichiers d'icônes nommés avec le suffixe -precomposed.png. Voir Premières étapes : Identifier votre application dans iTunes Connect pour plus de détails.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
