apple-touch-icon: Größe, Tag und iOS-Verhalten
Ein apple-touch-icon ist das Bild, das iOS verwendet, wenn jemand deine Website aus Safari zum Home-Bildschirm hinzufügt. Du lieferst es als einzelnes 180x180-PNG unter /apple-touch-icon.png aus und verweist mit einem Link-Tag per rel="apple-touch-icon" darauf. iOS ignoriert Transparenz in diesem Bild und legt es auf Schwarz, also gib ihm einen deckenden Hintergrund und lass iOS die abgerundeten Ecken anwenden, statt sie einzubacken.
Was iOS damit macht
Wenn ein Nutzer in Safari auf „Teilen“ und dann „Zum Home-Bildschirm“ tippt, braucht iOS ein Launcher-Icon. Es sucht nach einem Link-Tag mit rel="apple-touch-icon", und wenn keines vorhanden ist, fragt es /apple-touch-icon.png und /apple-touch-icon-precomposed.png direkt aus dem Website-Root an. Findet es nichts, greift es auf einen Screenshot der Seite zurück, was nie beabsichtigt aussieht.
Das Bild, das du bereitstellst, ist quadratisch und randlos. iOS legt beim Zeichnen des Icons seine eigene Maske mit abgerundeten Ecken darüber, sodass ein Quellbild mit bereits abgerundeten Ecken doppelt gerundet endet, mit sichtbaren Artefakten an den Rändern.
Das Tag
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Ein Tag und eine Datei sind das gesamte moderne Setup. Liefere dieselbe Datei unter /apple-touch-icon.png aus, damit auch der Fallback-Pfad ohne Tag aufgelöst wird.
Was du ausliefern solltest
| Angabe | Wert |
|---|---|
| Abmessungen | 180x180 Pixel |
| Format | PNG, kein Alpha nötig |
| Pfad | /apple-touch-icon.png |
| Hintergrund | Deckend: Transparenz wird auf Schwarz gelegt |
| Ecken | Quadratische Quelle; iOS maskiert die Ecken selbst |
| Sicherheitsrand | Halte die Bildmarke von den äußeren paar Prozent frei, damit die Maske sie nicht beschneidet |
FAQ zum apple-touch-icon
Brauche ich alle neun alten apple-touch-icon-Größen?
Nein. Aktuelles iOS verwendet das 180x180 und skaliert es für kleinere Kontexte herunter. Die Varianten 57, 60, 72, 76, 114, 120, 144 und 152 sind nur für sehr alte iPhones und iPads relevant.
Was ist apple-touch-icon-precomposed?
Ein veralteter Opt-out. Altes iOS fügte Home-Bildschirm-Icons einen glänzenden Glanzeffekt hinzu, und die precomposed-Variante wies es an, das zu unterlassen. iOS fügt den Glanz seit Jahren nicht mehr hinzu, sodass das schlichte rel="apple-touch-icon" alles ist, was du brauchst.
Verwendet Android das apple-touch-icon?
Chrome unter Android nutzt es als Fallback, wenn deine Website keine Web-App-Manifest-Icons hat, aber darauf sollte man sich nicht verlassen. Deklariere 192x192- und 512x512-PNGs im Manifest für Android und lass das apple-touch-icon iOS bedienen.