Apple-Touch-Icon-Leitfaden

Der apple-touch-icon ist ein völlig separater Vermögenswert von Ihrem favicon.ico. Browser-Registerkarten verwenden favicon.ico (oder Ihr verknüpftes PNG/SVG). iOS-Startbildschirminstallationen verwenden apple-touch-icon. Ohne apple-touch-icon erstellt Safari einen Screenshot des Ansichtsfensters Ihrer Seite mit niedriger Auflösung und verwendet diesen als Startbildschirmsymbol – ein verschwommenes, markenfreies Ergebnis, das neben nativen Apps unprofessionell aussieht.

Apple führte apple-touch-icon in iOS 1.1.3 im Jahr 2007 ein und hat seitdem die unterstützten Größen weiterentwickelt, da die Bildschirmdichten von iPhone und iPad zugenommen haben. Die aktuelle Empfehlung für eine einzelne geräteübergreifende Datei beträgt 180 x 180 Pixel. Diese Größe wird auf dem iPhone 6 Plus, iPhone X und allen nachfolgenden iPhone-Modellen mit 60 pt bei 3-facher Dichte angezeigt. Ältere Modelle (iPhone SE 1. Generation, iPhones vor Plus) verwenden 120×120 bei 2x – iOS skaliert die 180×180-Datei automatisch herunter, um sie anzupassen.

Für die iPad-Abdeckung empfiehlt Apple 167×167 für iPad Pro (3x) und 152×152 für Standard-iPads. In der Praxis deckt eine einzelne 180×180-Datei als apple-touch-icon alle diese Fälle akzeptabel ab, da iOS mit hochwertiger bilinearer Filterung herunterskaliert. Wenn pixelgenaue Schärfe auf dem iPad Pro Priorität hat, fügen Sie ein zusätzliches Tag „<link rel='apple-touch-icon' size='167x167' href='/apple-touch-icon-167x167.png'>“ hinzu.

Für apple-touch-icon ist das Format PNG obligatorisch. iOS ignoriert .ico, JPEG, SVG und GIF für Startbildschirmsymbole. Exportieren Sie immer ein PNG-32 (mit Alphakanal) oder PNG-24 (ohne Transparenz, wenn Ihr Symbol einen einfarbigen Hintergrund hat). Transparenz wird unterstützt und empfohlen – ein transparentes Hintergrundsymbol ermöglicht es iOS, seine standardmäßigen abgerundeten Ecken und Glanzeffekte auf ältere iOS-Versionen anzuwenden.

Sichere Margen sind für den apple-touch-icon wichtig. Obwohl iOS die alte Glanzüberlagerung (in iOS 7 entfernt) nicht mehr anwendet, wird das Symbol auf eine abgerundete Rechteckform zugeschnitten. Halten Sie Ihr Kernlogo auf allen Seiten um ca. 10 % versetzt, um sicherzustellen, dass nichts Wichtiges durch die abgerundeten Ecken abgeschnitten wird. Der sichere Bereich beträgt etwa 162 x 162 Pixel innerhalb einer 180 x 180 Pixel großen Leinwand.

Es ist wichtig, die apple-touch-icon-Datei im Stammverzeichnis Ihrer Domain zu platzieren. Obwohl Sie jede URL über das Link-Tag href verwenden können, versuchen einige Versionen von iOS Safari und einige Apple-Crawler (für die Spotlight-Suchmaschinenintegration), /apple-touch-icon.png oder /apple-touch-icon-precomposed.png direkt aus dem Stammverzeichnis abzurufen, ohne das Link-Tag HTML zu lesen. Die beste Kompatibilität bietet die Platzierung der Datei im Stammverzeichnis.

Die `precomposed`-Variante des Tags – „<link rel='apple-touch-icon-precomposed'>“ – weist ältere iOS-Versionen an, keine zusätzlichen visuellen Effekte (Glanz, abgerundete Ecken, Schlagschatten) auf Ihr Symbol anzuwenden. Apple hat diese Effekte in iOS 7 entfernt, sodass im Jahr 2026 die Unterscheidung zwischen „apple-touch-icon“ und „apple-touch-icon-precomposed“ für das moderne iOS irrelevant ist. Verwenden Sie den einfachen rel-Wert „apple-touch-icon“.

Mithilfe mehrerer Link-Tags werden mehrere Größendeklarationen unterstützt. Für maximale Präzision auf allen Apple-Geräten können Sie Folgendes deklarieren: „<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon-180x180.png'>` für iPhone 6 Plus und höher, „<link rel='apple-touch-icon' size='167x167' href='/apple-touch-icon-167x167.png'>` für iPad Pro und `<link rel='apple-touch-icon' size='152x152' href='/apple-touch-icon-152x152.png'>` für ältere iPads. iOS wählt die ähnlichste Übereinstimmung aus.

Apple Watch verwendet nicht apple-touch-icon für Watch-App-Symbole – diese stammen aus dem nativen App-Bundle. Wenn ein Benutzer jedoch über den Apple Watch-Browser zu Ihrer Website navigiert, zeigt Safari Watch apple-touch-icon in der Lesezeichenliste an. Das gleiche 180×180 PNG funktioniert hier ohne Änderungen.

macOS Safari auf dem Mac verwendet auch apple-touch-icon, wenn eine Website als Web-App zum Dock hinzugefügt wird (macOS Sonoma und höher ermöglicht das Anheften von Websites als Web-Apps von Safari). Das apple-touch-icon wird als Dock-Symbol verwendet. Dies macht den apple-touch-icon nicht nur für Mobilgeräte wichtig, sondern auch für Mac-Benutzer mit modernem macOS.

Beim Aktualisieren von apple-touch-icon speichert iOS das alte Symbol auf dem Gerät des Benutzers zwischen und sucht nicht nach Updates, es sei denn, der Benutzer entfernt das Startbildschirmsymbol und fügt es erneut hinzu oder löscht den Cache von Safari. Es gibt keine serverseitige Kontrolle über diesen Cache – es handelt sich um ein clientseitiges iOS-Verhalten. Wenn Sie dies den Stakeholdern mitteilen, können Sie Erwartungen darüber wecken, wie schnell sich ein Rebranding auf bestehende Startbildschirmspeicherungen auswirkt.

Zum ordnungsgemäßen Testen Ihres apple-touch-icon ist ein physisches iOS-Gerät oder der Xcode iOS-Simulator erforderlich. Öffnen Sie auf dem Gerät Safari, navigieren Sie zu Ihrer Website, tippen Sie auf die Schaltfläche „Teilen“ und wählen Sie „Zum Startbildschirm hinzufügen“. Die Vorschau im Dialog sollte Ihr apple-touch-icon zeigen. Wenn stattdessen ein Screenshot angezeigt wird, ist die Datei entweder nicht unter der angegebenen URL zugänglich oder der Link-Tag fehlt in Ihrem HTML.

Der favicon generator gibt das 180×180 apple-touch-icon.png als Teil des Standard-Favicon-Pakets aus. Platzieren Sie die Datei nach dem Generieren im Stammverzeichnis Ihrer Website und fügen Sie das Link-Tag zu Ihrem HTML „<head>“ hinzu. Eine vollständige Anleitung zu allen Symbolgrößen, die zum apple-touch-icon gehören, finden Sie in der favicon sizes explained-Referenz.