Welche Größe sollte apple-touch-icon.png für iPad und iPhone haben?

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?

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/

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

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

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.

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.

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:

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

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

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

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.

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)