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

StackOverflow https://stackoverflow.com/questions/1598

Question

Je ne sais pas quelle devrait être la bonne taille.

De nombreux sites semblent répéter que l'icône Apple-Touch doit mesurer 57 x 57 pixels, mais citent un lien rompu comme source.

Hanselman'sable cour de récréationbluesLes commentaires de suggèrent différentes tailles dont 163x163 et 60x60.

Le propre d'Apple icône apple.com fait 129x129 !

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

Était-ce utile?

La solution

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

Il semble que nous devions maintenant fournir à la fois une image de 57 x 57 et une image de 114 x 114, ainsi qu'une image de titre de 640 x 960.

Voir Directives de création d'icônes et d'images personnalisées (Javascript requis) qui fait partie d'un document complet :

Autres conseils

Depuis le cache Google de Apple Developer Connection - Web Apps Dev Center - Conception de contenu...

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

L'iPhone et l'iPod Touch permettent à un utilisateur d'enregistrer un signet de 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" au répertoire racine de votre serveur Web - similaire au "Favicon.ico" pour les icônes du site.

Pour remplacer l'icône de signet du site sur une page Web spécifique, insérez unu003Clink> élément similaire àu003Clinkn rel="apple-touch-icon"n href="/customIcon.png"/> dansu003Chead> élément de la page.

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

Safari composera automatiquement l'icône avec la superposition "vitreuse" standard afin qu'il ressemble à une application iPhone ou iPod intégrée.

Cela dépend du niveau de détail que vous souhaitez lui donner, il doit avoir un rapport hauteur/largeur de 1:1 (en gros, il doit être carré)

J'opterais pour le 129*129 d'Apple

Je ne peux pas citer de source pour ces tailles car la référence officielle est sous clé d'ADC.

Cependant, de nombreux sites non NDA proposent des didacticiels expliquant comment créer les icônes.Par exemple ici :

Dans le cadre de son guide de contenu Web Safari, Apple propose en fait une page accessible au public appelée "Spécification d'une icône de page Web pour le clip Web" (Javascript requis) qui couvre l'ensemble des résolutions et leur mise en œuvre.

La taille officielle est de 57x57.Je recommanderais d'utiliser la taille exacte simplement parce qu'elle prend moins de mémoire lors du chargement (sauf si Apple met en cache la représentation mise à l'échelle).Cela étant dit, Rex a raison que n'importe quelle taille de carré fonctionnera

Spécifications Apple spécifiez de nouvelles tailles pour iOS7 :

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

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

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

À propos, les icônes précomposées sont obsolètes.

En conséquence, pour ne prendre en charge que les nouveaux appareils (sous iOS7) et les 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">

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

Vous voudrez peut-être savoir que ceci 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 existe une "bonne taille".Étant donné que l'iPhone fonctionne réellement sous OSX, le système de rendu d'icônes est assez robuste.Tant que vous lui donnez une image de haute qualité avec le bon rapport hauteur/largeur et une résolution au moins aussi élevée que la sortie réelle, le système d'exploitation rétrogradera très proprement.Mon site utilise un format 158x158 et l'icône est parfaite au pixel près sur l'écran de l'iPhone.

Le lien de NilObject m'a conduit à l'excellent article de blog Rattrapez votre icône à makentosh.com

...Bien sûr, toute cette incohérence a dû être traitée éventuellement, non?Eh bien 2.0 traité avec bien!Enfin, 57x57 signifiait en fait 57x57.

...chaque pixel...Rendu parfaitement.

Vous n'avez plus à vous soucier de la bonne taille.Si vous disposez d'un fichier d'illustration iTunes (c.-à-d.fichier de taille 1024*1024) de votre icône, puis j'ai créé cette application qui vous fournira toutes les icônes en fonction des informations fournies ici.Obtenir le candidature à partir d'ici, et suivez les instructions du fichier Lisez-moi pour créer toutes les icônes requises pour l'application iOS.

Liste mise à jour 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">

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

L'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 iOS7 2013 :

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

Les autres résolutions sont toujours les mêmes

  • 57 x 57 px par défaut
  • 76 x 76 px pour les iPad sans retina
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top