Quelle doit être la taille de apple-touch-icon.png pour iPad et iPhone?

Les icônes tactiles Apple plus grandes que 60x60 sont-elles prises en charge et si oui, quelles dimensions dois-je utiliser pour l'iPad et l'iPhone?

Liste mise à jour décembre 2019, iOS13 Une icône pour iOS 180x180 px et une pour android 192x192 px (déclarée dans site.webmanifest).

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

#### site.webmanifest
{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "display": "standalone"
}

Liste obsolète 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 d'octobre 2017 iOS 11: iOS 11 vérifié, iPhone X et iPhone 8 introduits

Mise à jour Nov 2016 iOS 10: Nouvelle version iOS iPhone 7 et iPhone 7plus introduits, ils ont la même résolution d'affichage, dpi, etc. que l'iPhone 6s et l'iPhone 7plus, jusqu'à présent aucune modification trouvée concernant la mise à jour 2015

Mise à jour Android mi-2016: ajoutez des appareils Android à la liste car les liens Apple-touch sont marqués comme obsolètes par Google et ne seront à aucun moment pris en charge pour leurs appareils

<!-- 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">

Mise à jour 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 sont 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 5 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 la 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 fière allure sur tous les appareils Apple. ;)

Avec l'iPad (3e génération), il existe désormais quatre tailles d'icônes 57x57, 72x72, 114x114, 144x144.

Parce que les icônes de la rétine ont exactement le double de la taille des icônes standard, nous n'avons vraiment besoin de faire que 2 icônes : 114 x 114 et 144 x 144. En définissant l'icône de taille de la rétine sur l'icône standard correspondante, iOS les 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 mesure 152x152 pixels.
http://www.apple.com/apple-touch-icon.png

J'espère que cela répond à votre question.

TL; DR: utilisez une icône PNG à 180 x 180 px @ 150 ppp , puis créez un lien vers elle comme ceci:

<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

Détails sur l'approche

À partir de 2020-04, la réponse canonique d'Apple est reflétée dans leur documentation sur iOS .

Officiellement, la spécification dit:

• iPhone 180px × 180px (60pt × 60pt à 3x)
• iPhone 120px × 120px (60pt × 60pt à 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 taille sont minimes, de sorte que les économies de performances n'auront vraiment d'importance 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 ppp et j'obtiens de très bons résultats sur tous les appareils, même les plus grands.

Je développe et conçois des applications iOS depuis un certain temps et cela c'est la meilleure feuille de triche de conception iOS là - bas!

s'amuser :)!

Mise à jour: pour iOS 8+ et les nouveaux appareils (iPhone 6, 6 Plus, iPad Air) voir ce lien mis à jour .

Mise à jour Meta: Iphone 6s / 6s Plus ont respectivement les mêmes résolutions que l'iPhone 6/6 Plus

Voici une image de la nouvelle version de l'article:

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 la tête de votre document. 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 recherché pour les icônes avec le préfixe précomposé apple-touch-icon ou apple-touch-icon-icon .

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:

• icône-tactile-pomme-57x57-precomposed.png
• icône-tactile-pomme-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 vaut mieux faire 2 versions des icônes.

• iPad - 72 x 72.
• iPhone (≥4) - 114x114.
• iPhone ≤3GS - 57x57 - Si possible.

Vous pouvez différencier l'iPad et l'iPhone par l'agent utilisateur sur votre serveur. Si vous ne voulez pas écrire de script sur le serveur, vous pouvez également 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 est interrogée uniquement lorsque vous ajoutez le clip Web.

(Il n'y a pas encore de moyen public de différencier l'iPhone ≥4 de l'iPhone ≤3GS en Javascript.)

Oui, plus de 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 en tant que 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 taille la plus élevée 152x152ou même une taille supérieure, par exemple 196x196. Il réduira toujours la taille pour la réutilisation. Assurez-vous de mentionner lesize .

Vous pouvez également choisir de ne même pas déclarer un seul lien. Apple mentionne que dans ce scénario, il recherchera d'abord à la racine du serveur la taille immédiatement supérieure à la taille souhaitée (format de nom:) apple-touch-icon-<size>.png, et si cela n'est pas trouvé, il recherchera ensuite le fichier default file: apple-touch-icon.png. Il est préférable que vous définissiez le (s) lien (s) car cela minimisera 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 voulez pas qu'il ajoute des effets à vos icônes, ajoutez simplement le suffixe -precomposed.pngau nom du fichier. (iOS 7 n'ajoute pas d'effets même sans lui).

Je pense que cette question concerne les icônes Web. J'ai essayé de donner une icône à 512x512, et sur le simulateur de l'iPhone 4, elle a fière allure (dans l'aperçu) cependant, lorsqu'elle est ajoutée à l'écran d'accueil, elle est mal pixélisée.

Du bon côté, si vous utilisez une icône plus grande sur l'iPad (toujours avec mon test 512x512), elle semble sortir de meilleure qualité 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.

ÉDITER:

J'utilise actuellement une icône 114x114 dans l'espoir qu'elle aura fière allure sur l'iPhone 4 lors de sa sortie. Si l'iPhone 4 a toujours un bogue à sa sortie, je vais optimiser l'icône de l'iPad (nette et sans redimensionnement à 72x72), puis le laisser diminuer pour les anciens iPhones.

Pour iPhone et iPod touch , créez des icônes qui mesurent:

    57 X 57 pixels
    114 X 114 pixels (high resolution @2X)

Pour iPad , créez une icône qui mesure:

    72 x 72 pixels
    144 X 144 pixels (high resolution @2X)