Quelles sont les dimensions de pixels correctes pour une icône Apple Touch?

Je ne suis pas sûr de ce que la taille correcte devrait être.

Beaucoup de sites semblent répéter que l'icône Apple-Touch devrait être 57x57 pixels mais citer un lien brisé comme source.

Hanselman's and playgroundblues's comments suggest different sizes including 163x163 and 60x60.

Le propre Apple apple.com icon a 129x129!

See my related question: How do I give my web sites an icon for iPhone?

0
Maintenant l'icône d'Apple.com est 152x152 ...
ajouté l'auteur Wick, source

11 Réponses

Depuis le cache Google de Apple Developer Connection - Centre de développement Web Apps - Conception de contenu ...

Create a Web Clip Bookmark Icon

iPhone and iPod touch allow a user to save a Web Clip bookmark to your site on their Home Screen.

To specify a bookmark icon for all pages of a web site, place a PNG image named "apple-touch-icon.png" at the root directory of your web server - similar to the "favicon.ico" for site icons.

To override the site bookmark icon on a specific web page, insert a <link> element similar to <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page.

The bookmark icon dimensions should be 57x57 pixels. If the icon is a different size it will be scaled and cropped to fit.

Safari will automatically composite the icon with the standard "glassy" overlay so it looks like a built-in iPhone or iPod application.

0
ajouté
Votre réponse est périmée. Voir stackoverflow.com/questions/1598/…
ajouté l'auteur Georg Schölly, source

NilObject's link led me to the great blog post Catchup on your Icon at makentosh.com

... Bien sûr, toute cette incohérence   a dû être traitée à terme,   droite? Le puits 2.0 s'en est occupé   mode! Enfin 57x57 signifiait réellement   57 x 57.

     

... chaque pixel ... rendu   parfaitement.

0
ajouté

Je ne pense pas qu'il y ait une "taille correcte". Puisque l'iPhone fonctionne sous OSX, le système de rendu des icônes est assez robuste. Tant que vous lui donnez une image de haute qualité avec le bon ratio d'aspect et une résolution au moins aussi élevée que la sortie réelle, le système d'exploitation descendra très proprement. Mon site utilise un 158x158 et l'icône semble pixel-parfait sur l'écran de l'iPhone.

0
ajouté

La taille officielle est 57x57. Je recommande d'utiliser la taille exacte simplement parce qu'elle prend moins de mémoire lorsqu'elle est chargée (sauf si Apple met en cache la représentation mise à l'échelle). Cela dit, Rex a raison que toute taille de carré fonctionnera

0
ajouté
Sauf que ça pourrait paraître flou sur iPads et iPhone 4s ...
ajouté l'auteur Simon East, source

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

Cependant, beaucoup de sites non-NDA ont des tutoriels sur la façon de créer les icônes. Par exemple ici:

0
ajouté

Dans le cadre de leur Safari Web Content Guide, Apple dispose d'une page accessible au public appelée " Spécification d'une icône de page Web pour Web Clip "(Javascript requis) qui couvre toutes les résolutions et leur implémentation.

0
ajouté

Vous n'avez plus besoin de vous soucier de la bonne taille. Si vous avez un fichier d'artwork itune (c'est-à-dire un fichier de 1024 * 1024) de votre icône, alors j'ai créé cette application qui vous fournira toutes les icônes basées sur les informations fournies ici . Obtenez le application d'ici , et suivez les instructions dans le fichier readme pour créer toutes les icônes requises pour l'application iOS.

0
ajouté

Mise à jour de la liste en octobre 2014, iOS8

Liste pour iPhone et iPad avec et sans rétine

<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">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

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

Update 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 les iPads sans rétine
0
ajouté

Dépend de la quantité de détails que vous voulez avoir, il doit avoir le rapport d'aspect de 1: 1 (fondamentalement - il doit être carré)

J'irais avec le propre 129 * 129 d'Apple

0
ajouté

Il semble que les directives d'Apple à compter du 3 août 2010 incluent désormais les images «Haute résolution» (pour l'iPhone 4) dans leurs tailles d'icônes «requises».

On dirait que nous avons besoin de fournir à la fois une image 57x57 et 114x114 maintenant, ainsi qu'une image de titre 640x960.

Voir Icône personnalisée et directives de création d'image (Javascript required) qui fait partie d'un document entier:

  • iOS Human Interface Guidelines (2013, par Apple) Inc; PDF; 26,3 Mo)
0
ajouté
J'ai eu du mal à faire fonctionner les images du titre. Trouvé un exemple de travail ici: gist.github.com/472519 ( section)
ajouté l'auteur Blaise, source
ajouté l'auteur thelem, source
Notez que les iPads utilisent les tailles suivantes pour les icônes: 72x72 1st et 2nd gen; 144x144 pour la 3ème génération "Retina".
ajouté l'auteur donut, source

Apple specs specify new sizes for iOS7:

  • 60x60
  • 76x76
  • 120x120
  • 152x152

Alors que les anciennes tailles pour iOS6 et avant sont:

  • 57x57
  • 72x72
  • 114x114
  • 144x144

D'ailleurs, les icônes précomposées sont obsolètes.

En conséquence, pour supporter de nouveaux périphériques (iOS7 et plus anciens) (iOS6 et antérieurs), ces 8 images doivent être présentes et le code générique est:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

De plus, vous devriez créer une image 152x152 nommée apple-touch-icon.png .

Vous pourriez vouloir 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.

0
ajouté