Was sind die richtigen Pixelabmessungen für ein Apple-Touch-Symbol?

72

Ich bin mir nicht sicher, wie groß die richtige Größe sein soll.

Viele Websites scheinen zu wiederholen, dass das Apple-Touch-Symbol 57 x 57 Pixel groß sein sollte, geben jedoch einen defekten Link als Quelle an.

Die Kommentare von Hanselman und Playgroundblues deuten auf unterschiedliche Größen hin, darunter 163x163 und 60x60.

Apples eigenes apple.com-Symbol ist 129x129!

Siehe meine verwandte Frage: Wie gebe ich meinen Websites ein Symbol für das iPhone?

iphone favicon apple-touch-icon Zack Peterson
quelle
Verwandte: Warum erhalte ich eine Fehlermeldung für apple-touch-icon-precomposed.png und eine zusätzliche gute Online-Ressource scheint zu sein: Alles, was Sie schon immer über Touch-Symbole wissen wollten (März 2011; von Mathias Bynens)
hakre
Jetzt ist das Symbol von Apple.com 152x152 ...
Wick
developer.apple.com/library/ios/documentation/AppleApplications/…
Blazemonger

Antworten:

41

Es scheint, dass die Apple-Richtlinien ab dem 3. August 2010 die "hochauflösenden" Bilder (für iPhone 4) in ihren "erforderlichen" Symbolgrößen enthalten.

Sieht so aus, als müssten wir jetzt sowohl ein 57x57- als auch ein 114x114-Bild sowie ein 640x960-Titelbild bereitstellen.

Siehe Richtlinien für die Erstellung benutzerdefinierter Symbole und Bilder (Javascript erforderlich), die Teil eines gesamten Dokuments sind:

OtomoBill
quelle
Ich hatte einige Probleme, die Titelbilder zum Laufen zu bringen. Hier finden Sie ein funktionierendes Beispiel: gist.github.com/472519 ( <!-- STARTUP IMAGES -->Abschnitt)
Blaise
1
Beachten Sie, dass iPads die folgenden Größen für Symbole verwenden: 72x72 1. und 2. Generation; 144x144 für "Retina" der 3. Generation.
Donut
2
Da es sich beim OP um das Apple-Touch-Symbol handelt (dh das Bild, das iOS von einer Website zupft, um es als Symbol auf dem Startbildschirm anzuzeigen), und nicht um die Symbole einer nativen App, ist das Titelbild 640 x 940 hier nicht relevant . (Das heißt, es gibt ein "Start" -Bild von 320 x 480, wie hier
Dieser Link funktioniert nicht mehr, sehen developer.apple.com/library/ios/documentation/AppleApplications/... statt
Thelem
5

Aus dem Google-Cache von Apple Developer Connection - Web Apps Dev Center - Entwerfen von Inhalten ...

Erstellen Sie ein Webclip-Lesezeichensymbol

Mit iPhone und iPod touch kann ein Benutzer ein Webclip-Lesezeichen auf seiner Website auf seinem Startbildschirm speichern.

Um ein Lesezeichensymbol für alle Seiten einer Website anzugeben, platzieren Sie ein PNG-Bild mit dem Namen "apple-touch-icon.png" im Stammverzeichnis Ihres Webservers - ähnlich wie bei "favicon.ico" für Websitesymbole.

Um das Lesezeichen-Symbol der Website auf einer bestimmten Webseite zu überschreiben, fügen Sie ein <link> -Element ähnlich dem <link rel = "apple-touch-icon" href = "/ customIcon.png" /> in das <head> -Element der Seite ein .

Die Abmessungen der Lesezeichensymbole sollten 57 x 57 Pixel betragen. Wenn das Symbol eine andere Größe hat, wird es skaliert und passend zugeschnitten.

Safari setzt das Symbol automatisch mit dem Standard-Overlay "Glas" zusammen, sodass es wie eine integrierte iPhone- oder iPod-Anwendung aussieht.

Zack Peterson
quelle
2
Ihre Antwort ist veraltet. Siehe stackoverflow.com/questions/1598/…
Georg Schölly
3

Abhängig davon, wie viele Details es haben soll, muss es ein Seitenverhältnis von 1: 1 haben (im Grunde genommen - es muss quadratisch sein).

Ich würde mit dem Apple eigenen 129 * 129 gehen

saniul
quelle
2

Ich kann keine Quelle für diese Größen angeben, da die offizielle Referenz unter Verschluss von ADC steht.

Viele der Nicht-NDA-Sites enthalten jedoch Tutorials zum Erstellen der Symbole. Zum Beispiel hier:

NilObject
quelle
1

Die offizielle Größe ist 57x57. Ich würde empfehlen, die exakte Größe zu verwenden, nur weil beim Laden weniger Speicher benötigt wird (es sei denn, Apple speichert die skalierte Darstellung zwischen). Trotzdem hat Rex Recht, dass jede quadratische Größe funktioniert

NilObject
quelle
1

Apple-Spezifikationen geben neue Größen für iOS7 an:

  • 60x60
  • 76 x 76
  • 120 x 120
  • 152 x 152

Während alte Größen für iOS6 und früher sind:

  • 57 x 57
  • 72x72
  • 114 x 114
  • 144 x 144

Übrigens sind vorkompositionierte Symbole veraltet.

Folglich müssen diese 8 Bilder vorhanden sein, um neue Geräte (mit iOS7) und ältere (iOS6 und frühere) zu unterstützen, und der generische Code lautet:

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

Außerdem sollten Sie ein 152x152-Bild mit dem Namen erstellenapple-touch-icon.png .

Vielleicht möchten Sie wissen, dass dieser Favicon-Generator alle diese Bilder gleichzeitig erzeugen kann. Vollständige Offenlegung: Ich bin der Autor dieser Website.

philippe_b
quelle
0

Ich glaube nicht, dass es eine "richtige Größe" gibt. Da auf dem iPhone wirklich OSX ausgeführt wird, ist das Symbol-Rendering-System ziemlich robust. Solange Sie ein qualitativ hochwertiges Bild mit dem richtigen Seitenverhältnis und einer Auflösung liefern, die mindestens so hoch ist wie die tatsächliche Ausgabe, wird das Betriebssystem sehr sauber verkleinert. Meine Website verwendet eine Größe von 158 x 158 und das Symbol sieht auf dem iPhone-Bildschirm pixelgenau aus.

Rex M.
quelle
0

Der Link von NilObject führte mich zu dem großartigen Blog-Beitrag Catchup on your Icon auf makentosh.com

... Natürlich musste all diese Inkonsistenz irgendwann behoben werden, oder? Nun, 2.0 hat sich gut damit befasst! Schließlich bedeutete 57x57 tatsächlich 57x57.

... jedes Pixel ... perfekt gerendert.

Zack Peterson
quelle
0

Sie müssen sich nicht mehr um die richtige Größe kümmern. Wenn Sie eine iTunes-Grafikdatei (dh eine Datei mit einer Größe von 1024 * 1024) Ihres Symbols haben, habe ich diese Anwendung erstellt, die Ihnen alle Symbole basierend auf den hier bereitgestellten Informationen zur Verfügung stellt . Laden Sie die Anwendung von hier herunter und befolgen Sie die Anweisungen in der Readme-Datei, um alle erforderlichen Symbole für die iOS-Anwendung zu erstellen.

rptwsthi
quelle
0

Aktualisierte Liste Oktober 2014, iOS8

Liste für iPhone und iPad mit und ohne Netzhaut

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

Update 2014 iOS 8:

Für iOS 8 und Iphone 6 plus

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">

Das iPhone 6 verwendet dasselbe 120 x 120 Pixel große Bild wie das iPhone 4 und 5, der Rest ist das gleiche wie für iOS 7

Update 2013 iOS7:

Für iOS 7 wurden die empfohlenen Auflösungen geändert:

  • für iPhone Retina von 114 x 114 px bis 120 x 120 px
  • für iPad Retina von 144 x 144 px bis 152 x 152 px

Die andere Auflösung ist immer noch die gleiche

  • 57 x 57 px Standard
  • 76 x 76 px für iPads ohne Netzhaut
Felipep
quelle