Das Apple Touch Icon legt das Bild fest, das erscheint, wenn jemand deine Website zum iPhone-Startbildschirm hinzufügt. Es ist vom Favicon im Browser-Tab und den Symbolen im Web-App-Manifest unabhängig.
Eine einzige Größe: 180×180
180×180 Pixel sind eine gängige hochauflösende Vorlage. iOS kann das Bild für kleinere Darstellungen verkleinern. Die meisten Projekte kommen deshalb mit einer einzigen Deklaration aus.
Ältere Empfehlungen nannten acht Dateien von 57×57 bis 152×152, jeweils mit eigenem sizes-Attribut. Diese Varianten sind nicht mehr nötig: Sie blähen das HTML auf und verursachen zusätzliche Anfragen für dasselbe Ergebnis.
Die Datei muss ein PNG sein. iOS liest für dieses Symbol weder SVG noch WebP, und JPEG beeinträchtigt die scharfen Kanten flächiger Grafiken.
Verwende einen deckenden Hintergrund
Ein transparenter Hintergrund kann je nach Version und Anzeigekontext unerwartete Ergebnisse liefern. Damit du die Darstellung auf dem Startbildschirm bestimmst, platziere dein Motiv auf einem selbst gewählten, deckenden Hintergrund.
Verbinde das Symbol vor dem Export mit einer deckenden Hintergrundfläche. Wähle eine Markenfarbe oder bei einem bunten Symbol einfach Weiß. Lasse rund um das Motiv etwa 10 % Abstand, damit es nicht eingeengt wirkt.
Runde die Ecken nicht selbst ab: iOS legt eine eigene abgerundete Maske darüber. Bereits abgerundete Dateien erhalten sonst einen doppelten Radius mit unschönen Ecken.
Der Tag zum Einfügen
Eine Zeile im head deiner Seiten genügt: link rel="apple-touch-icon" href="/apple-touch-icon.png". Das sizes-Attribut ist optional, wenn du nur eine Datei bereitstellst.
Optional kannst du meta name="apple-mobile-web-app-title" content="Your brand" ergänzen, um die Beschriftung unter dem Symbol festzulegen. Ohne diesen Tag verwendet iOS den Seitentitel, der meist zu lang ist und abgeschnitten wird.
Lege außerdem eine Kopie als apple-touch-icon.png im Stammverzeichnis ab. Wie bei favicon.ico sucht iOS dort nach der Datei, wenn kein Tag vorhanden ist.
Warum sich dein Symbol nicht aktualisiert
iOS speichert das Symbol sehr hartnäckig zwischen. Eine bereits vorhandene Verknüpfung auf dem Startbildschirm ändert sich nicht von selbst. Zum Testen einer neuen Version entfernst du die Verknüpfung, löschst die Safari-Daten und fügst die Website erneut hinzu.
Fehlt das Symbol weiterhin, prüfe drei Dinge: Die Datei liefert Status 200 statt 404, wird mit dem Inhaltstyp image/png ausgeliefert und ist weder durch robots.txt noch durch eine Anmeldung gesperrt.
Die Favicon-Prüfung von LFFavicon untersucht genau diese Fälle bei jeder öffentlichen URL und zeigt das tatsächlich abgerufene Symbol an.
Primärquellen
Häufige Fragen
Brauche ich mehrere Größen des apple-touch-icon?
Für die meisten Projekte genügt eine hochauflösende Datei mit 180×180, aus der iOS kleinere Darstellungen erzeugt. Teste die Geräte, die du unterstützen möchtest.
Verwendet Android das apple-touch-icon?
Chrome unter Android kann darauf zurückgreifen, liest aber zuerst die Symbole aus dem Webmanifest. Gib deine Symbole mit 192×192 und 512×512 immer im Manifest an. Das ist der offizielle Weg.
Kann ich ein SVG als Apple Touch Icon verwenden?
Nein, iOS erwartet für diesen Tag ein Rasterbild im PNG-Format. Verwende SVG für das Favicon im Desktop-Browser, wo es scharfe Darstellung und Dunkelmodus unterstützt.