it-swarm.com.de

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

Werden Apple Touch Icons größer als 60x60 unterstützt, und wenn ja, welche Abmessungen sollte ich für iPad und iPhone verwenden?

123
Harry

Aktualisierte 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 Oktober 2017 iOS 11: iOS 11 aktiviert, iPhone X und iPhone 8 eingeführt

Update Nov 2016 iOS 10: Die neue iOS-Version iPhone 7 und iPhone 7plus wurde eingeführt. Sie haben die gleiche Bildschirmauflösung, dpi usw. wie iPhone 6s und iPhone 7plus Bisher wurden keine Änderungen zum Update 2015 gefunden

Update Mitte 2016 für Android: Fügen Sie der Liste Android Geräte hinzu, da die Apple-Touch-Links von Google als veraltet markiert sind und werden für ihre Geräte zu keiner Zeit unterstützt

<!-- 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 für 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 der Größe 167x167 px, die anderen Auflösungen sind immer noch die gleichen.

Update 2014 für iOS 8:

Für iOS 8 und iPhone 6 plus

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

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

Update 2013 für 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 anderen Auflösungen sind immer noch gleich

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

132
felipep

Verwenden Sie diese Größen 57x57, 72x72, 114x114, 144x144 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.;)

117
Darren

Mit dem iPad (3. Generation) gibt es jetzt vier Symbolgrößen: 57x57, 72x72, 114x114, 144x144.

Da die Retina-Symbole genau doppelt so groß sind wie die Standard-Symbole, müssen wir nur 2 Symbole: 114 x 114 und 144 x 144 erstellen. Durch Einstellen der Retina-Größe auf das entsprechende Standard-Symbol wird iOS skaliert 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" />
94
pezillionaire

Das Symbol auf der Apple-Website ist 152 x 152 Pixel.
http://www.Apple.com/Apple-touch-icon.png

Hoffe das beantwortet deine Frage.

34
abe

Ich habe für eine Weile iOS-Apps entwickelt und designt und This ist das beste Cheat Sheet für iOS-Designs!

habe Spaß :)!

this image is from that article :)

Update: Für iOS 8+ und die neuen Geräte (iPhone 6, 6 Plus, iPad Air) siehe dieser aktualisierte 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:

iOS 8 and mid 2014 devices info

16
MrHaze

TL; DR: benutze ein PNG-Icon bei 180 x 180 px @ 150 ppi und verbinde es dann wie folgt:

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

Details zum Ansatz

Ab dem 02.10.2018 spiegelt sich die kanonische Antwort von Apple) in deren Dokumentation unter iOS wider.

Offiziell heißt es in der Spezifikation:

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

In der Realität sind diese Größenunterschiede winzig, sodass die Leistungsersparnis nur bei stark frequentierten Websites von Bedeutung ist.

Bei Websites mit geringerem Datenverkehr verwende ich in der Regel ein PNG-Symbol bei 180 x 180 px bei 150 ppi und erhalte auf allen Geräten sehr gute Ergebnisse, auch auf übergroßen Geräten Einsen.

15
staypuftman

Die relevante Dokumentation auf der Apple-Website, Angeben eines Webseiten-Symbols für den Webclip .

Sie müssen nichts in den Kopf Ihres Dokuments einfügen. Wenn mit einem Link-Element keine Symbole angegeben werden, wird das Stammverzeichnis der Website nach Symbolen mit dem Zeichen Apple-touch-icon oder Apple-touch-icon-precomposed Durchsucht = Präfix.

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
6
Jan M

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

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

Sie können iPad und iPhone durch den Benutzeragenten unterscheiden auf Ihrem Server. 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, weil 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.)

5
kennytm

Ja, größer als 60x60 werden unterstützt. Erstellen Sie der Einfachheit halber Symbole in den folgenden 4 Größen:

1) 60x60  <= default
2) 76x76
3) 120x120
4) 152x152

Jetzt ist es vorzuziehen, sie als Links in Ihren HTML-Code einzufü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 festlegen, dass die 4 obigen Links nicht deklariert werden, sondern nur ein einzelner Link. Geben Sie in diesem Fall die höchste Größe von 152x152 Oder sogar eine höhere Größe an, z. B. 196x196. Es wird immer die Größe für eine Neueinstellung verkleinert. Stellen Sie sicher, dass Sie das size erwähnen.

Sie können auch festlegen, dass nicht einmal ein Link deklariert wird. Apple erwähnt, dass in diesem Szenario das Stammverzeichnis des Servers zuerst nach der Größe durchsucht wird, die unmittelbar über der gewünschten Größe liegt (Namensformat: Apple-touch-icon-<size>.png), Und wenn diese nicht gefunden wird Als nächstes wird nach dem default file:Apple-touch-icon.png gesucht. Es ist vorzuziehen, dass Sie die Links definieren, da dies den Browser minimiert, der Ihren Server abfragt.

Icon Notwendigkeiten:

- use PNG, avoid interlaced
- use 24-bit PNG
- not necessary to use web-safe colors

Wenn Sie in älteren Versionen als iOS 7 keine Effekte zu Ihren Symbolen hinzufügen möchten, fügen Sie einfach das Suffix -precomposed.png Zum Dateinamen hinzu. (iOS 7 fügt auch ohne keine Effekte hinzu).

2
Ethan

Ich denke, bei dieser Frage geht es um Web Icons. Ich habe versucht, ein Symbol mit 512x512 zuzuweisen, und auf dem iPhone 4-Simulator sieht es (in der Vorschau) großartig aus. Auf dem Startbildschirm ist es jedoch schlecht pixelig.

Wenn Sie ein größeres Symbol auf dem iPad verwenden (immer noch mit meinem 512x512-Test), scheint es auf dem iPad eine bessere Qualität zu haben. Hoffentlich ist das iPhone 4-Rendering ein Fehler.

Ich habe einen Bug auf Radar gemacht.

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 (gestochen scharf und keine Größenänderung bei 72 x 72) und lasse es dann für alte iPhones verkleinern.

1
Chris Drackett

Erstellen Sie für iPhone und iPod touch Symbole mit folgenden Maßen:

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

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

    72 x 72 pixels
    144 X 144 pixels (high resolution @2X)
0