Quelles sont les bonnes dimensions en pixels pour une icône Apple Touch?

Je ne suis pas sûr de la taille correcte.

De nombreux sites semblent répéter que l’icône apple-touch devrait être de 57×57 pixels, mais citer un lien brisé comme source.

Les commentaires de Hanselman et de playgroundblues suggèrent des tailles différentes, notamment 163×163 et 60×60.

L’ icône Apple.com d’ Apple est 129×129!

Voir ma question associée: Comment donner à mes sites Web une icône pour iPhone?

Il semble que les directives d’Apple en date du 3 août 2010 incluent désormais les images «haute résolution» (pour iPhone 4) dans leurs tailles d’icône «requirejses».

On dirait que nous avons besoin de fournir à la fois une image 57×57 et une image 114×114, ainsi qu’une image de titre 640×960.

Voir les directives de création d’icône et d’image personnalisées (Javascript requirejs) qui font partie d’un document complet:

  • Directives d’interface utilisateur iOS (2013; par Apple Inc.; PDF; 26,3 Mo)

À partir du cache Google de Apple Developer Connection – Centre de développement Web Apps – Conception de contenu

Créer une icône de signet de clip Web

iPhone et iPod touch permettent à un utilisateur d’enregistrer un signet Web Clip sur votre site sur son écran d’accueil.

Pour spécifier une icône de signet pour toutes les pages d’un site Web, placez une image PNG nommée “apple-touch-icon.png” dans le répertoire racine de votre serveur Web – similaire au “favicon.ico” pour les icons de site.

Pour remplacer l’icône de signet du site sur une page Web spécifique, insérez un élément similaire à dans l’élément de la page. .

Les dimensions de l’icône de signet doivent être de 57 x 57 pixels. Si l’icône a une taille différente, elle sera mise à l’échelle et rognée pour s’adapter.

Safari composera automatiquement l’icône avec l’incrustation standard “vitreuse” pour ressembler à une application iPhone ou iPod intégrée.

Dépend de la quantité de détails que vous voulez qu’il ait, il doit avoir le ratio d’aspect de 1: 1 (en gros – il doit être carré)

J’irais avec le propre Apple 129 * 129

Je ne peux pas citer une source pour ces tailles parce que la référence officielle est sous clé de l’ADC.

Cependant, de nombreux sites non-NDA ont les tutoriels sur la façon de créer les icons. Par exemple ici:

  • HOWTO: Icônes d’iPhone Webclip (janv. 2008; par Dan Dickinson)

Dans le cadre de leur Guide de contenu Web Safari, Apple dispose en fait d’une page accessible au public intitulée ” Spécification d’une icône de page Web pour un clip Web ” (Javascript requirejs) qui couvre toutes les résolutions et leur implémentation.

  • Guide du contenu Web Safari (2012; par Apple Inc.; PDF; 6,91 Mo)

La taille officielle est 57×57. Je recommande d’utiliser la taille exacte simplement parce qu’il faut moins de mémoire lors du chargement (sauf si Apple met en cache la représentation mise à l’échelle). Cela dit, Rex a raison de dire que toute taille carrée fonctionnera

Les spécifications Apple spécifient de nouvelles tailles pour iOS7:

  • 60×60
  • 76×76
  • 120×120
  • 152×152

Alors que les anciennes tailles pour iOS6 et antérieures sont les suivantes:

  • 57×57
  • 72×72
  • 114×114
  • 144×144

Par ailleurs, les icons précomposées sont obsolètes.

En conséquence, pour prendre en charge les nouveaux périphériques (exécutant iOS7) et les plus anciens (iOS6 et antérieurs), ces 8 images doivent être présentes et le code générique est le suivant:

         

En outre, vous devez créer une image 152×152 nommée apple-touch-icon.png .

Vous voudrez peut-être savoir que ce générateur de favicon peut générer toutes ces images à la fois. Divulgation complète: je suis l’auteur de ce site.

Je ne pense pas qu’il y ait une “taille correcte”. Étant donné que l’iPhone utilise vraiment OSX, le système de rendu des icons est plutôt robuste. Tant que vous lui donner une image de haute qualité avec le bon rapport d’aspect et une résolution au moins aussi élevée que la sortie réelle sera, l’OS va réduire très proprement. Mon site utilise un 158×158 et l’icône est parfaite sur l’écran de l’iPhone.

Le lien de NilObject m’a conduit à l’excellent article de blog Catchup sur votre Icon à makentosh.com

… Bien sûr, toutes ces incohérences ont dû être réglées, n’est-ce pas? Eh bien 2.0 l’a bien traité! Enfin 57×57 signifiait en réalité 57×57.

… chaque pixel … rendu parfaitement.

Vous n’avez plus à vous soucier de la taille correcte. Si vous avez un fichier graphique itune (c’est-à-dire un fichier de taille 1024 * 1024) de votre icône, j’ai créé cette application qui vous fournira toutes les icons basées sur les informations fournies ici . Obtenez l’ application ici et suivez les instructions du fichier readme pour créer toutes les icons requirejses pour l’application iOS.

Mise à jour de la liste Octobre 2014, iOS8

Liste pour iPhone et iPad avec et sans rétine

      

Mise à jour 2014 iOS 8:

Pour iOS 8 et Iphone 6 plus

  

Iphone 6 utilise la même image 120 x 120 px que l’iPhone 4 et le rest 5 est le même que pour iOS 7

Mettre à 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