Das apple-touch-icon: Der komplette Guide
Wenn jemand deine Seite zum iPhone-Homescreen hinzufügt, greift iOS nach einem Tag. Mach es falsch, und es schnappt sich stattdessen einen unscharfen Screenshot deiner Seite.
Was das apple-touch-icon ist
Das apple-touch-icon ist das Icon, das iOS verwendet, wenn ein Nutzer auf "Zum Home-Bildschirm hinzufügen" tippt. Es ist getrennt von deinem Favicon und getrennt vom Web App Manifest. Es existiert, weil iOS ein app-artiges Icon in voller Qualität will, nicht das winzige Tab-Favicon hochskaliert.
Ein einziges 180x180-PNG reicht. Aktuelles iOS rechnet diese eine Datei für jeden Kontext herunter, den es braucht, also lieferst du nicht die alte Leiter der Größen 57, 72, 114 und 152 aus.
Das Link-Tag
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- You can pin the size, but iOS defaults to the 180 file fine: -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">iOS sucht auch ohne Tag nach /apple-touch-icon.png im Site-Root, aber es zu deklarieren ist über verschiedene Setups hinweg zuverlässiger.
Die Spezifikation auf einen Blick
| Eigenschaft | Wert |
|---|---|
| Abmessungen | 180x180 |
| Format | PNG |
| Transparenz | Ignoriert, auf Schwarz komponiert |
| Ecken | Quadratische Vorlage, iOS rundet sie für dich ab |
| Dateiname | apple-touch-icon.png im Site-Root |
Häufige Fallstricke
Gar kein apple-touch-icon ist der schlimmste Fall. Wenn iOS keines findet, fällt es auf einen verkleinerten Screenshot der Seite zurück, der unscharf und markenfremd ist. Ein einziges Tag behebt das.
Die Ecken selbst abzurunden ist ein Fehler. iOS legt seine eigene Maske aus abgerundetem Quadrat an, also wird eine vorgerundete Vorlage doppelt gerundet und zeigt einen dünnen Rand aus Hintergrund um das Icon. Gib ihm ein quadratisches, randfüllendes Bild.
Das Aktualisieren ist nicht sofort. Sobald jemand deine Seite zum Homescreen hinzugefügt hat, aktualisiert das Ändern des Icons auf deinem Server nicht das bestehende Shortcut. Die Person muss es entfernen und erneut hinzufügen, um das neue Icon zu bekommen.
Häufig gestellte Fragen
Welche Größe hat ein apple-touch-icon?
180x180 Pixel, als PNG. Aktuelles iOS skaliert diese eine Datei für jeden Kontext, also brauchst du die älteren Größen 57, 72, 114 oder 152 nicht.
Warum zeigt mein apple-touch-icon einen schwarzen Hintergrund?
iOS ignoriert Transparenz beim apple-touch-icon und legt es auf Schwarz. Exportiere das PNG mit einer soliden Hintergrundfarbe statt einer transparenten.
Warum zeigt iOS ein unscharfes Icon für meine Seite?
Du hast wahrscheinlich kein apple-touch-icon. Ohne eines nutzt iOS einen verkleinerten Screenshot der Seite. Ergänze ein 180x180-PNG und das richtige Link-Tag.
Warum hat sich mein Homescreen-Icon nicht aktualisiert, nachdem ich es geändert habe?
Bestehende Homescreen-Shortcuts cachen das Icon, mit dem sie erstellt wurden. Der Nutzer muss das Shortcut entfernen und die Seite erneut hinzufügen, um ein neues apple-touch-icon zu bekommen.