Quelle doit être la taille du Apple-touch-icon.png pour iPad et iPhone?
Les icônes tactiles Apple supérieures à 60x60 sont-elles prises en charge?). Dans l'affirmative, quelles dimensions dois-je utiliser pour l'iPad et l'iPhone?
Liste mise à jour en octobre 2017, iOS11
Liste pour iPhone et iPad avec et sans rétine
<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
<link rel="Apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<!-- iPad and iPad mini @1x -->
<link rel="Apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 -->
<link rel="Apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- iPad and iPad mini @2x -->
<link rel="Apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- iPad Pro -->
<link rel="Apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus -->
<link rel="Apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices Normal Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">
Mise à jour octobre 2017 iOS 11: iOS 11 vérifié, iPhone X et iPhone 8 introduits
Update Nov 2016 iOS 10: Nouvelle version iOS introduite, ils ont la même résolution d'affichage, résolution, etc. que l'iPhone 6s et l'iPhone 7plus, jusqu'à présent, aucun changement concernant la mise à jour n'a été trouvé. 2015
Mise à jour mi-2016 Android: Ajouter Android Les périphériques ajoutés à la liste en tant que liens Apple-touch sont marqués comme obsolètes par Google et ne seront pas pris en charge à tout moment pour leurs périphériques.
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">
Update 2015 iOS 9: Pour iOS 9 et iPad pro
<link rel="Apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
Les nouveaux iPhones (6s et 6s Plus) utilisent les mêmes tailles que l'iPhone (6 et 6 Plus), le nouvel iPad pro utilise une image de taille 167x167 px, les autres résolutions étant toujours les mêmes.
Mise à jour 2014 iOS 8:
Pour iOS 8 et iPhone 6 plus
<link rel="Apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
Iphone 6 utilise la même image 120 x 120 px que l'iphone 4 et le reste est le même que pour iOS 7
Mise à jour 2013 iOS7:
Pour iOS 7, les résolutions recommandées ont changé:
- pour iPhone Retina de 114 x 114 px à 120 x 120 px
- pour iPad Retina de 144 x 144 px à 152 x 152 px
L'autre résolution est toujours la même
- 57 x 57 px par défaut
- 76 x 76 px pour iPad sans rétine
Source: https://developer.Apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
Utilisez ces tailles 57x57, 72x72, 114x114, 144x144 puis faites ceci dans l'en-tête de votre document:
<link rel="Apple-touch-icon" href="Apple-touch-icon-iphone.png" />
<link rel="Apple-touch-icon" sizes="72x72" href="Apple-touch-icon-ipad.png" />
<link rel="Apple-touch-icon" sizes="114x114" href="Apple-touch-icon-iphone4.png" />
Cela aura l'air bien sur tous les Apple appareils.;)
Avec l'iPad (3ème génération), il existe maintenant quatre tailles d'icônes: 57x57, 72x72, 114x114, 144x144.
Parce que les icônes de rétine sont exactement le double de la taille des icônes standard, nous n’avons vraiment besoin que de faire 2 icônes: 114 x 114 et 144 x 144. En définissant l’icône de taille Retina sur l’icône standard correspondante, iOS redimensionnera en conséquence.
<!-- Standard iPhone -->
<link rel="Apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<!-- Retina iPhone -->
<link rel="Apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<!-- Standard iPad -->
<link rel="Apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<!-- Retina iPad -->
<link rel="Apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />
L'icône sur le site d'Apple est de 152x152 pixels.
http://www.Apple.com/Apple-touch-icon.png
J'espère que cela répond à votre question.
Je développe et conçois des applications iOS depuis un certain temps et This est le meilleur aide-mémoire sur la conception iOS sur le marché!
s'amuser :)!
Mise à jour: Pour iOS 8+ et les nouveaux appareils (iPhone 6, 6 Plus, iPad Air), voir ce lien mis à jour .
Meta update: respectivement, les iPhone 6s/6s Plus ont les mêmes résolutions que l'iPhone 6/6 Plus
Ceci est une image de la nouvelle version de l'article:
TL; DR: utilisez une icône PNG à 180 x 180 px @ 150 ppi , puis créez un lien ainsi:
<link rel="Apple-touch-icon" href="path/to/Apple-touch-icon.png">
Détails sur l'approche
À compter du 2018-10-02, la réponse canonique de Apple est reflétée dans leur documentation sur iOS .
Officiellement, la spécification dit:
- iPhone 180px × 180px (60pt × 60pt @ 3x)
- iPhone 120px × 120px (60 pt × 60 pt @ 2x)
- iPad Pro 167px × 167px (83.5pt × 83.5pt @ 2x)
- iPad, iPad mini 152px × 152px (76pt × 76pt @ 2x)
En réalité, ces différences de dimensionnement sont minimes. Par conséquent, les économies de performances ne seront prises en compte que sur les sites à très fort trafic.
Pour les sites à faible trafic, j'utilise généralement une icône PNG à 180 x 180 px @ 150 ppi et j'obtiens de très bons résultats sur tous les appareils, même les plus grands. les uns.
La documentation pertinente sur le site d’Apple, Spécification d’une icône de page Web pour Web Clip .
Il n'est pas nécessaire de mettre quoi que ce soit dans l'en-tête de votre document. Si aucune icône n'est spécifiée à l'aide d'un élément link, le répertoire racine du site Web est recherché pour les icônes avec l'icône Apple-touch-icon ou Apple-touch-icon-precomposed préfixe.
Par exemple, si la taille de l'icône appropriée pour le périphérique est de 57 x 57, le système recherche les noms de fichiers dans l'ordre suivant:
- Apple-touch-icon-57x57-precomposed.png
- Apple-touch-icon-57x57.png
- Apple-touch-icon-precomposed.png
- Apple-touch-icon.png
Oui. Si la taille ne correspond pas, le système la redimensionnera . Mais il est préférable de créer 2 versions des icônes.
- iPad - 72x72.
- iPhone (≥4) - 114x114.
- iPhone ≤3GS - 57x57 - Si possible.
Vous pourriez différencier iPad et iPhone par l'agent utilisateur sur votre serveur. Si vous ne voulez pas écrire de script sur le serveur, vous pouvez aussi changer l’icône avec Javascript en
<link ref="Apple-touch-icon" href="iPhone_version.png" />
...
if (... iPad test ...) {
$('link[rel="Apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery
}
Cela fonctionne car l’icône n’est interrogée que lorsque vous ajoutez le clip Web.
(Il n'y a pas encore de moyen public de différencier l'iPhone ≥4 avec l'iPhone ≤3GS dans Javascript.)
Oui, les formats supérieurs à 60x60 sont pris en charge. Pour plus de simplicité, créez des icônes de ces 4 tailles:
1) 60x60 <= default
2) 76x76
3) 120x120
4) 152x152
Maintenant, il est préférable de les ajouter sous forme de liens dans votre HTML comme:
<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">
Vous pouvez choisir de ne pas déclarer les 4 liens ci-dessus, mais simplement de déclarer un seul lien, auquel cas donner la plus grande taille de 152x152 ou même une taille supérieure à celle-là, disons 196x196. Il sera toujours réduire la taille pour une nouvelle utilisation. Assurez-vous de mentionner le size.
Vous pouvez également choisir de ne pas déclarer même un seul lien. Apple indique que, dans ce scénario, la racine du serveur sera recherchée en premier pour la taille immédiatement supérieure à la taille souhaitée (format de nommage: Apple-touch-icon-<size>.png), et si ce n'est pas trouvé, alors il cherchera le default file:Apple-touch-icon.png. Il est préférable que vous définissiez le (s) lien (s) car cela minimiserait le navigateur interrogeant votre serveur.
Nécessités de l'icône:
- use PNG, avoid interlaced
- use 24-bit PNG
- not necessary to use web-safe colors
Dans les versions antérieures à iOS 7, si vous ne souhaitez pas que des effets soient ajoutés à vos icônes, ajoutez simplement le suffixe -precomposed.png au nom du fichier. (iOS 7 n'ajoute pas d'effets même sans cela).
Je pense que cette question concerne les icônes du Web. J'ai essayé de donner une icône au format 512x512 et, sur le simulateur de l'iPhone 4, elle a fière allure (dans l'aperçu). Toutefois, lorsqu'elle est ajoutée à l'écran d'accueil, elle est très pixélisée.
Du côté positif, si vous utilisez une icône plus grande sur l'iPad (toujours avec mon test 512x512), il semble que la qualité soit meilleure sur l'iPad. Espérons que le rendu de l'iPhone 4 est un bug.
J'ai ouvert un bug à ce sujet sur le radar.
MODIFIER:
J'utilise actuellement une icône 114x114 dans l'espoir que tout se passera bien sur l'iPhone 4 lors de sa sortie. Si l'iPhone 4 a toujours un bogue lors de sa sortie, je vais optimiser l'icône pour l'iPad (net et sans redimensionnement à 72x72), puis le laisser à la baisse pour les anciens iPhones.
Pour iPhone et iPod touch, créez des icônes mesurant:
57 X 57 pixels
114 X 114 pixels (high resolution @2X)
Pour iPad, créez une icône mesurant:
72 x 72 pixels
144 X 144 pixels (high resolution @2X)