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

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

Frage

Ich bin mir nicht sicher, welche Größe die richtige sein sollte.

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

Hänselmann's und SpielplatzbluesIn seinen Kommentaren werden verschiedene Größen vorgeschlagen, darunter 163 x 163 und 60 x 60.

Apples eigenes apple.com-Symbol ist 129x129!

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

War es hilfreich?

Lösung

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

Offenbar müssen wir jetzt sowohl ein 57x57- als auch ein 114x114-Bild sowie ein 640x960-Titelbild bereitstellen.

Sehen Richtlinien zur Erstellung benutzerdefinierter Symbole und Bilder (Javascript erforderlich), das Teil eines gesamten Dokuments ist:

Andere Tipps

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 können ein Benutzer auf seinem Startbildschirm ein Webclip -Lesezeichen auf Ihrer Website speichern.

Um ein Lesezeichen-Symbol 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 "favicon.ico" für Site-Icons.

Zum Überschreiben des Site -Lesezeichensymbols auf einer bestimmten Webseite ein einfügen au003Clink> Element ähnlich wieu003Clinkn rel="apple-touch-icon"n href="/customIcon.png"/> innerhalb deru003Chead> Element der Seite.

Die Abmessungen des Lesezeichensymbols sollten 57 x 57 Pixel betragen.Wenn das Symbol eine andere Größe hat, wird es skaliert und zu passen.

Safari wird das Symbol automatisch mit der Standard "Glasige" Overlay zusammenstellen, sodass es wie ein integriertes iPhone oder eine iPod-Anwendung aussieht.

Hängt davon ab, wie viele Details es haben soll. Es muss ein Seitenverhältnis von 1:1 haben (im Grunde muss es quadratisch sein).

Ich würde mich für das Apple-eigene 129*129 entscheiden

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

Auf vielen Nicht-NDA-Websites gibt es jedoch Anleitungen zum Erstellen der Symbole.Zum Beispiel hier:

Als Teil seines Safari Web Content Guide hat Apple tatsächlich eine öffentlich zugängliche Seite mit dem Namen „Angeben eines Webseitensymbols für Webclip" (Javascript erforderlich), das alle Beschlüsse und deren Umsetzung abdeckt.

Die offizielle Größe beträgt 57x57.Ich würde empfehlen, die exakte Größe zu verwenden, allein schon deshalb, weil beim Laden weniger Speicher benötigt wird (es sei denn, Apple speichert die skalierte Darstellung zwischen).Nachdem das gesagt worden ist, Rex hat recht dass jede Quadratgröße funktioniert

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

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

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

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

Vorkomponierte Symbole sind übrigens veraltet.

Um neue Geräte (mit iOS7) und ältere Geräte (iOS6 und früher) zu unterstützen, müssen daher diese 8 Bilder vorhanden sein 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">

Zusätzlich, Sie sollten ein 152x152 großes Bild mit dem Namen erstellen apple-touch-icon.png.

Vielleicht möchten Sie das wissen Favicon-Generator kann alle diese Bilder auf einmal erzeugen.Vollständige Offenlegung:Ich bin der Autor dieser Seite.

Ich glaube nicht, dass es eine „richtige Größe“ gibt.Da auf dem iPhone tatsächlich OSX läuft, 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 herunterskaliert.Meine Website verwendet eine Auflösung von 158 x 158 und das Symbol sieht auf dem iPhone-Bildschirm pixelgenau aus.

Der Link von NilObject führte mich zu dem tollen Blogbeitrag Informieren Sie sich über Ihr Icon bei makentosh.com

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

...jeder einzelne Pixel ...perfekt gemacht.

Sie müssen sich nicht mehr um die richtige Größe kümmern.Wenn Sie eine iTunes-Grafikdatei haben (d. h.Datei mit der Größe 1024*1024) Ihres Symbols, dann habe ich diese Anwendung erstellt, die Ihnen alle Symbole basierend auf den bereitgestellten Informationen bereitstellt Hier.Bekommen das Bewerbung hier, und befolgen Sie die Anweisungen in der Readme-Datei, um alle erforderlichen Symbole für die iOS-Anwendung zu erstellen.

Aktualisierte Liste Oktober 2014, iOS8

Liste für iPhone und iPad mit und ohne Retina

<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 das gleiche 120 x 120 Pixel große Bild wie das iPhone 4 und 5, der Rest ist der gleiche wie für iOS 7

Update 2013 iOS7:

Für iOS 7 haben sich 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 anderen Auflösungen sind immer noch dieselben

  • Standardmäßig 57 x 57 Pixel
  • 76 x 76 px für iPads ohne Retina
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top