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?

Harry
quelle
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).

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
#### site.webmanifest
{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "display": "standalone"
}

Veraltete Liste Oktober 2017, iOS11

Liste für iPhone und iPad mit und ohne Netzhaut

<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<!-- iPad and iPad mini @1x -->
<link rel="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 -->
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- iPad and iPad mini @2x -->
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- iPad Pro -->
<link rel="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 -->
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices Normal Resolution -->
<link rel="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 -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">

Update 2015 iOS 9: Für iOS 9 und iPad Pro

<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.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.

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

Quelle: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Felipep
quelle
30
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/...
jackocnr
Der moderne Ansatz zur Unterstützung von Android-Geräten besteht auch darin, eine Manifestdatei zu verwenden und dort Ihre Symbole anzugeben: developer.google.com/web/fundamentals/app-install-banners - dieser Ansatz wird auch vom HTML5 Boilerplate verwendet repo: github.com/h5bp/html5-boilerplate/blob/master/dist/…
jackocnr
Habe es ausprobiert. Auf dem iPhone Xs scheinen die Symbole neben dem Github-Symbol etwas verschwommen zu sein. : /
kaiserkiwi
117

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:

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

   

Dies wird auf allen Apple-Geräten gut aussehen. ;)

Darren
quelle
8
Unterstützende Dokumentation von Apple: developer.apple.com/library/safari/#documentation/…
Jim Geurts
6
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 --> 
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<!-- Retina iPhone --> 
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<!-- Standard iPad --> 
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<!-- Retina iPad --> 
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />
pezillionaire
quelle
Diese Methode gefällt mir am besten.
Caleb Jares
Diese Methode hat eine schöne Einfachheit.
PaulSkinner
1
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.
Blazemonger
34

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.

abe
quelle
1
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:

<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

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:

  • iPhone 180px × 180px (60pt × 60pt @ 3x)
  • iPhone 120px × 120px (60pt × 60pt @ 2x)
  • iPad Pro 167px × 167px (83,5pt × 83,5pt @ 2x)
  • iPad, iPad mini 152px × 152px (76pt × 76pt @ 2x)

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.

Serraosays
quelle
16

Ich habe iOS-Apps für eine Weile entwickelt und entworfen und dies ist das beste iOS-Design-Spickzettel da draußen!

habe Spaß :)!

Dieses Bild stammt aus diesem Artikel :)

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:

Geräteinformationen für iOS 8 und Mitte 2014

MrHaze
quelle
6

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:

  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-57x57.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png
Jan M.
quelle
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, ...)
Remi Grumeau
5

Ja. Wenn die Größe nicht übereinstimmt, skaliert das System sie neu . Es ist jedoch besser, zwei Versionen der Symbole zu erstellen.

  • iPad - 72x72.
  • iPhone (≥4) - 114 x 114.
  • iPhone ≤3GS - 57x57 - Wenn möglich.

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

<link ref="apple-touch-icon" href="iPhone_version.png" />
...

if (... iPad test ...) {
  $('link[rel="apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery
}

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.)

kennytm
quelle
1
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  <= default
2) 76x76
3) 120x120
4) 152x152

Jetzt ist es vorzuziehen, sie als Links in Ihr HTML hinzuzufügen:

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

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
- use 24-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).

Ethan
quelle
1

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.

Chris Drackett
quelle
0

Erstellen Sie für iPhone und iPod touch Symbole, die Folgendes messen:

    57 X 57 pixels
    114 X 114 pixels (high resolution @2X)

Erstellen Sie für das iPad ein Symbol, das Folgendes misst:

    72 x 72 pixels
    144 X 144 pixels (high resolution @2X)
Prashant Aggarwal
quelle