Welche Größe sollte apple-touch-icon.png für iPad und iPhone haben?
134
Werden Apple Touch-Symbole mit einer Größe von mehr als 60 x 60 unterstützt, und wenn ja, welche Abmessungen sollte ich für das iPad und das iPhone verwenden?
Die beste Antwort finden Sie auf der Apple-Website: Apple Developer
Ruub
1
Ich habe dieses Tool gefunden, um Symbole mit allen unterstützten Größen und dem Markup zu erstellen, das in Ihre Seite aufgenommen werden soll. iconifier.net
Agarcian
Antworten:
145
Aktualisierte Liste Dezember 2019, iOS13
Ein Symbol für iOS 180x180 px und eines für Android 192x192 px (deklariert in site.webmanifest).
<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS --><linkrel="apple-touch-icon"sizes="57x57"href="touch-icon-iphone.png"><!-- iPad and iPad mini @1x --><linkrel="apple-touch-icon"sizes="76x76"href="touch-icon-ipad.png"><!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 --><linkrel="apple-touch-icon"sizes="120x120"href="touch-icon-iphone-retina.png"><!-- iPad and iPad mini @2x --><linkrel="apple-touch-icon"sizes="152x152"href="touch-icon-ipad-retina.png"><!-- iPad Pro --><linkrel="apple-touch-icon"sizes="167x167"href="touch-icon-ipad-pro.png"><!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus --><linkrel="apple-touch-icon"sizes="180x180"href="touch-icon-iphone-6-plus.png"><!-- Android Devices High Resolution --><linkrel="icon"sizes="192x192"href="icon-hd.png"><!-- Android Devices Normal Resolution --><linkrel="icon"sizes="128x128"href="icon.png">
Update Okt 2017 iOS 11:
iOS 11 überprüft, iPhone X und iPhone 8 eingeführt
Update Nov 2016 iOS 10:
Neue iOS-Version iPhone 7 und iPhone 7plus eingeführt. Sie haben die gleiche Bildschirmauflösung, dpi usw. wie iPhone 6s und iPhone 7plus. Bisher wurden keine Änderungen in Bezug auf das Update 2015 gefunden
Update Mitte 2016 Android:
Fügen Sie Android-Geräte zur Liste hinzu, da die Apple-Touch-Links von Google als veraltet markiert werden und für ihre Geräte zu keinem Zeitpunkt unterstützt werden
<!-- Android Devices High Resolution --><linkrel="icon"sizes="192x192"href="icon-hd.png"><!-- Android Devices High Resolution --><linkrel="icon"sizes="128x128"href="icon.png">
Die neuen iPhones (6s und 6s Plus) verwenden die gleichen Größen wie das iPhone (6 und 6 Plus), das neue iPad Pro verwendet ein Bild mit einer Größe von 167 x 167 Pixel, die anderen Auflösungen sind immer noch dieselben.
Ich wünschte, sie würden nur SVG unterstützen und mit diesem Mist fertig sein. Vielen Dank für die Antwort!
Steven Vachon
2
liebe die Updates ... macht diese Antwort super relevant!
Chris Allinson
1
Es ist erwähnenswert, dass der beliebte und kampferprobten HTML5 Boilerplate Repo nur empfiehlt , einen einzigen Catch-all - Symbol mit <link rel="apple-touch-icon" href="icon.png">github.com/h5bp/html5-boilerplate/blob/master/dist/...
Das Größenattribut ist jedoch kein gültiger HTML-Code!
8
Ältere iOS-Geräte verstehen das sizesAttribut nicht und verwenden daher den zuletzt verwendeten Wert. Deshalb <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />sollte zuletzt sein. Wie Pezillionaire sagt, können Sie jetzt ein neues Symbol bei 144 x 144 für das iPad Retina hinzufügen.
Appmattus
5
Ab ios7 haben sich die empfohlenen Größen geändert: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (Netzhaut)
Cody Django
4
@Cody und der Ansatz, den HTML5Boilerplate jetzt verfolgt, besteht darin, nur das 152x152-Symbol zu verwenden und es aufzurufen apple-touch-icon-precomposed.pngund andere iDevices die Größe nach Bedarf ändern zu lassen.
Blazemonger
94
Mit dem iPad (3. Generation) gibt es jetzt vier Symbolgrößen: 57 x 57, 72 x 72, 114 x 114, 144 x 144.
Da Retina-Symbole genau doppelt so groß sind wie die Standardsymbole, müssen nur zwei Symbole erstellt werden : 114 x 114 und 144 x 144. Wenn Sie das Retina-Symbol auf das entsprechende Standardsymbol setzen, skaliert iOS sie entsprechend.
<!-- Standard iPhone --><linkrel="apple-touch-icon"sizes="57x57"href="touch-icon-iphone-114.png"/><!-- Retina iPhone --><linkrel="apple-touch-icon"sizes="114x114"href="touch-icon-iphone-114.png"/><!-- Standard iPad --><linkrel="apple-touch-icon"sizes="72x72"href="touch-icon-ipad-144.png"/><!-- Retina iPad --><linkrel="apple-touch-icon"sizes="144x144"href="touch-icon-ipad-144.png"/>
Wir machen also nur 2 Bilder und lassen das Gerät 2x verkleinern. Niedlich.
Superluminary
9
Ab ios7 haben sich die empfohlenen Größen geändert: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (Netzhaut)
Cody Django
4
@Cody und der Ansatz, den HTML5Boilerplate jetzt verfolgt, besteht darin, nur das 152x152-Symbol zu verwenden und es aufzurufen apple-touch-icon-precomposed.pngund andere iDevices die Größe nach Bedarf ändern zu lassen.
Dies. Oder 144x144 (erwartete iPad Retina res). Alle sehen gut aus, verkleinert auf iPhone / iPad-Größen mit niedrigerer Auflösung, während sie für die Zukunft leicht vorausplanen.
DOOManiac
6
Ab Oktober 2013 ist es jetzt 152x152 und scheint sich für verschiedene Geräte nicht zu ändern (ohnehin nicht zwischen meinem Laptop und meinem iPhone4)
Wick
17
TL; DR: Verwenden Sie ein PNG-Symbol mit 180 x 180 px bei 150 ppi und verknüpfen Sie es dann wie folgt:
In der Realität sind diese Größenunterschiede winzig, sodass die Leistungseinsparungen nur auf Websites mit sehr hohem Datenverkehr von Bedeutung sind.
Für Websites mit geringerem Datenverkehr verwende ich normalerweise ein PNG-Symbol mit 180 x 180 px bei 150 ppi und erhalte auf allen Geräten sehr gute Ergebnisse, auch auf Geräten mit Übergröße.
Es ist nicht erforderlich, etwas in den Kopf Ihres Dokuments einzufügen. Wenn mit einem Linkelement keine Symbole angegeben werden, wird das Stammverzeichnis der Website nach Symbolen mit dem Präfix " Apple-Touch-Symbol" oder " Apple-Touch-Symbol-Symbol" durchsucht .
Wenn die entsprechende Symbolgröße für das Gerät beispielsweise 57 x 57 beträgt, sucht das System in der folgenden Reihenfolge nach Dateinamen:
Ja, aber diese Frage betrifft die neuen (größeren) Symbole für iPhone 4 und iPad.
Cherouvim
Es ist zwar nicht erforderlich, etwas in der Kopfzeile anzugeben, es ist jedoch immer noch eine gute Vorgehensweise. Wenn Sie beispielsweise die 144x144-Version für das Retina-iPad verpassen und es kein Symbol ohne Pixelgröße gibt, zeigt Mobile Safari nur die Vorschau einer Site an, obwohl möglicherweise eine nicht optimale, aber noch bessere, kleinere Version verwendet wird.
Rafael Bugajewski
Dies ist eine sehr schlechte Idee, nicht in der Kopfzeile anzugeben, da andere Plattformen sie auch verwenden werden (Android, ChromeOS, Blackberry, ...)
Die Auflösung des iPhone 4 ist offenbar um den Faktor zwei gegenüber der des iPhone 3 vergrößert, daher wäre 114x114 wahrscheinlich eine gute Wahl für die Symbolgröße.
JAB
@JAB: Dem Symbol wurden Rahmen hinzugefügt, sodass die tatsächliche Symbolgröße auf dem iPhone ≤3GS 59 x 60 beträgt. Wenn das der Fall ist, könnte 114x114 etwas abweichen.
Kennytm
Sind die Ränder des iPhone 4+ in Bezug auf die Auflösung nicht um den gleichen Betrag skaliert (so dass sie in Bezug auf die Größe dieselbe Breite zu haben scheinen)?
JAB
@ JAB: Es sollte sein. Ich habe nicht nachgesehen.
Kennytm
Vielen Dank für all Ihre Ideen / Ratschläge. Wenn ich 3 Versionen mache, wie ziele ich auf jedes Gerät mit der entsprechenden Größe ab? Es sei denn, ich vermisse etwas und PNG ist ein Containerformat, in das ich die verschiedenen Größen einfügen kann?
Harry
2
Ja, größer als 60x60 werden unterstützt. Erstellen Sie der Einfachheit halber Symbole in diesen 4 Größen:
1)60x60<=default2)76x763)120x1204)152x152
Jetzt ist es vorzuziehen, sie als Links in Ihr HTML hinzuzufügen:
Sie können wählen, die 4 oben genannten Links nicht zu deklarieren, sondern nur einen einzelnen Link zu deklarieren. In diesem Fall geben Sie beispielsweise die höchste Größe 152x152oder sogar eine höhere Größe an 196x196. Es wird immer die Größe für die Wiederverwendung verkleinert. Stellen Sie sicher, dass Sie das erwähnensize .
Sie können auch festlegen, dass nicht einmal ein einzelner Link deklariert wird. Apple erwähnt, dass in diesem Szenario zuerst das Server-Stammverzeichnis nach der Größe gesucht wird, die unmittelbar höher ist als die gewünschte Größe (Namensformat :). apple-touch-icon-<size>.pngWenn diese nicht gefunden wird, wird als nächstes nach dem gesucht default file:apple-touch-icon.png. Es ist vorzuziehen, dass Sie die Links definieren, da dadurch der Browser, der Ihren Server abfragt, minimiert wird.
Symbol Notwendigkeiten:
-use PNG, avoid interlaced
-use24-bit PNG
-not necessary to use web-safe colors
Wenn Sie in älteren Versionen als iOS 7 nicht möchten, dass Ihre Symbole mit Effekten versehen werden, fügen Sie einfach das Suffix -precomposed.pngzum Dateinamen hinzu. (iOS 7 fügt auch ohne es keine Effekte hinzu).
Ich denke, bei dieser Frage geht es um Web-Symbole. Ich habe versucht, ein Symbol mit einer Größe von 512 x 512 anzugeben, und auf dem iPhone 4-Simulator sieht es großartig aus (in der Vorschau). Wenn es jedoch zum Startbildschirm hinzugefügt wird, ist es stark pixelig.
Auf der guten Seite, wenn Sie ein größeres Symbol auf dem iPad verwenden (immer noch mit meinem 512x512-Test), scheint es auf dem iPad in besserer Qualität herauszukommen. Hoffentlich ist das iPhone 4-Rendering ein Fehler.
Ich habe einen Fehler darüber auf dem Radar geöffnet.
BEARBEITEN:
Ich verwende derzeit ein 114x114-Symbol in der Hoffnung, dass es auf dem iPhone 4 gut aussieht, wenn es veröffentlicht wird. Wenn das iPhone 4 beim Erscheinen immer noch einen Fehler aufweist, optimiere ich das Symbol für das iPad (klar und ohne Größenänderung bei 72 x 72) und lasse es dann für alte iPhones verkleinern.
Antworten:
Aktualisierte Liste Dezember 2019, iOS13 Ein Symbol für iOS 180x180 px und eines für Android 192x192 px (deklariert in site.webmanifest).
Veraltete Liste Oktober 2017, iOS11
Liste für iPhone und iPad mit und ohne Netzhaut
Update Okt 2017 iOS 11: iOS 11 überprüft, iPhone X und iPhone 8 eingeführt
Update Nov 2016 iOS 10: Neue iOS-Version iPhone 7 und iPhone 7plus eingeführt. Sie haben die gleiche Bildschirmauflösung, dpi usw. wie iPhone 6s und iPhone 7plus. Bisher wurden keine Änderungen in Bezug auf das Update 2015 gefunden
Update Mitte 2016 Android: Fügen Sie Android-Geräte zur Liste hinzu, da die Apple-Touch-Links von Google als veraltet markiert werden und für ihre Geräte zu keinem Zeitpunkt unterstützt werden
Update 2015 iOS 9: Für iOS 9 und iPad Pro
Die neuen iPhones (6s und 6s Plus) verwenden die gleichen Größen wie das iPhone (6 und 6 Plus), das neue iPad Pro verwendet ein Bild mit einer Größe von 167 x 167 Pixel, die anderen Auflösungen sind immer noch dieselben.
Update 2014 iOS 8:
Für iOS 8 und iPhone 6 plus
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:
Die andere Auflösung ist immer noch die gleiche
Quelle: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
quelle
<link rel="apple-touch-icon" href="icon.png">
github.com/h5bp/html5-boilerplate/blob/master/dist/...Verwenden Sie diese Größen 57 x 57, 72 x 72, 114 x 114, 144 x 144 und führen Sie dies im Kopf Ihres Dokuments aus:
Dies wird auf allen Apple-Geräten gut aussehen. ;)
quelle
sizes
Attribut nicht und verwenden daher den zuletzt verwendeten Wert. Deshalb<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
sollte zuletzt sein. Wie Pezillionaire sagt, können Sie jetzt ein neues Symbol bei 144 x 144 für das iPad Retina hinzufügen.apple-touch-icon-precomposed.png
und andere iDevices die Größe nach Bedarf ändern zu lassen.Mit dem iPad (3. Generation) gibt es jetzt vier Symbolgrößen: 57 x 57, 72 x 72, 114 x 114, 144 x 144.
Da Retina-Symbole genau doppelt so groß sind wie die Standardsymbole, müssen nur zwei Symbole erstellt werden : 114 x 114 und 144 x 144. Wenn Sie das Retina-Symbol auf das entsprechende Standardsymbol setzen, skaliert iOS sie entsprechend.
quelle
apple-touch-icon-precomposed.png
und andere iDevices die Größe nach Bedarf ändern zu lassen.Das Symbol auf der Apple-Website ist 152 x 152 Pixel groß.
http://www.apple.com/apple-touch-icon.png
Hoffe das beantwortet deine Frage.
quelle
TL; DR: Verwenden Sie ein PNG-Symbol mit 180 x 180 px bei 150 ppi und verknüpfen Sie es dann wie folgt:
Details zum Ansatz
Ab 2020-04 spiegelt sich die kanonische Antwort von Apple in der Dokumentation zu iOS wider .
Offiziell heißt es in der Spezifikation:
In der Realität sind diese Größenunterschiede winzig, sodass die Leistungseinsparungen nur auf Websites mit sehr hohem Datenverkehr von Bedeutung sind.
Für Websites mit geringerem Datenverkehr verwende ich normalerweise ein PNG-Symbol mit 180 x 180 px bei 150 ppi und erhalte auf allen Geräten sehr gute Ergebnisse, auch auf Geräten mit Übergröße.
quelle
Ich habe iOS-Apps für eine Weile entwickelt und entworfen und dies ist das beste iOS-Design-Spickzettel da draußen!
habe Spaß :)!
Update: Für iOS 8+ und die neuen Geräte (iPhone 6, 6 Plus, iPad Air) siehe diesen aktualisierten Link .
Meta-Update: Das iPhone 6s / 6s Plus hat die gleichen Auflösungen wie das iPhone 6/6 Plus
Dies ist ein Bild aus der neuen Version des Artikels:
quelle
Die entsprechende Dokumentation auf der Apple-Website unter Angeben eines Webseiten-Symbols für Webclips .
Es ist nicht erforderlich, etwas in den Kopf Ihres Dokuments einzufügen. Wenn mit einem Linkelement keine Symbole angegeben werden, wird das Stammverzeichnis der Website nach Symbolen mit dem Präfix " Apple-Touch-Symbol" oder " Apple-Touch-Symbol-Symbol" durchsucht .
Wenn die entsprechende Symbolgröße für das Gerät beispielsweise 57 x 57 beträgt, sucht das System in der folgenden Reihenfolge nach Dateinamen:
quelle
Ja. Wenn die Größe nicht übereinstimmt, skaliert das System sie neu . Es ist jedoch besser, zwei Versionen der Symbole zu erstellen.
Sie können iPad und iPhone anhand des Benutzeragenten auf Ihrem Server unterscheiden. Wenn Sie kein Skript auf dem Server schreiben möchten, können Sie das Symbol auch mit Javascript von ändern
Dies funktioniert, da das Symbol nur abgefragt wird, wenn Sie den Webclip hinzufügen.
(Es gibt noch keine öffentliche Möglichkeit, iPhone ≥4 von iPhone ≤3GS in Javascript zu unterscheiden.)
quelle
Ja, größer als 60x60 werden unterstützt. Erstellen Sie der Einfachheit halber Symbole in diesen 4 Größen:
Jetzt ist es vorzuziehen, sie als Links in Ihr HTML hinzuzufügen:
Sie können wählen, die 4 oben genannten Links nicht zu deklarieren, sondern nur einen einzelnen Link zu deklarieren. In diesem Fall geben Sie beispielsweise die höchste Größe
152x152
oder sogar eine höhere Größe an196x196
. Es wird immer die Größe für die Wiederverwendung verkleinert. Stellen Sie sicher, dass Sie das erwähnensize
.Sie können auch festlegen, dass nicht einmal ein einzelner Link deklariert wird. Apple erwähnt, dass in diesem Szenario zuerst das Server-Stammverzeichnis nach der Größe gesucht wird, die unmittelbar höher ist als die gewünschte Größe (Namensformat :).
apple-touch-icon-<size>.png
Wenn diese nicht gefunden wird, wird als nächstes nach dem gesuchtdefault file:
apple-touch-icon.png
. Es ist vorzuziehen, dass Sie die Links definieren, da dadurch der Browser, der Ihren Server abfragt, minimiert wird.Symbol Notwendigkeiten:
Wenn Sie in älteren Versionen als iOS 7 nicht möchten, dass Ihre Symbole mit Effekten versehen werden, fügen Sie einfach das Suffix
-precomposed.png
zum Dateinamen hinzu. (iOS 7 fügt auch ohne es keine Effekte hinzu).quelle
Ich denke, bei dieser Frage geht es um Web-Symbole. Ich habe versucht, ein Symbol mit einer Größe von 512 x 512 anzugeben, und auf dem iPhone 4-Simulator sieht es großartig aus (in der Vorschau). Wenn es jedoch zum Startbildschirm hinzugefügt wird, ist es stark pixelig.
Auf der guten Seite, wenn Sie ein größeres Symbol auf dem iPad verwenden (immer noch mit meinem 512x512-Test), scheint es auf dem iPad in besserer Qualität herauszukommen. Hoffentlich ist das iPhone 4-Rendering ein Fehler.
Ich habe einen Fehler darüber auf dem Radar geöffnet.
BEARBEITEN:
Ich verwende derzeit ein 114x114-Symbol in der Hoffnung, dass es auf dem iPhone 4 gut aussieht, wenn es veröffentlicht wird. Wenn das iPhone 4 beim Erscheinen immer noch einen Fehler aufweist, optimiere ich das Symbol für das iPad (klar und ohne Größenänderung bei 72 x 72) und lasse es dann für alte iPhones verkleinern.
quelle
Erstellen Sie für iPhone und iPod touch Symbole, die Folgendes messen:
Erstellen Sie für das iPad ein Symbol, das Folgendes misst:
quelle