Eure Webseite soll auf iPhones und iPads mit einem aussagekräftigen Icon glänzen? Dann solltet ihr die Apple Touch Icons richtig einrichten. Diese sorgen dafür, dass eure Webseite beim Hinzufügen zum Home-Screen nicht mit einem langweiligen Screenshot-Icon, sondern mit eurem professionellen Logo erscheint.
Wenn Nutzer eure Webseite in Safari öffnen und über das Teilen-Menü „Zum Home-Bildschirm“ wählen, sucht iOS automatisch nach speziellen Icon-Dateien. Ohne diese greift das System auf einen simplen Screenshot zurück – das sieht unprofessionell aus und fällt zwischen den anderen Apps nicht positiv auf.
Für eine optimale Darstellung auf allen Apple-Geräten benötigt ihr verschiedene Icon-Größen. Die aktuellen iOS-Geräte unterstützen seit 2024 diese Auflösungen:
- apple-touch-icon-180×180.png (180×180 Pixel) – Standard für iPhone seit iPhone 6
- apple-touch-icon-167×167.png (167×167 Pixel) – iPad Pro 10,5″ und iPad Air (3. Generation)
- apple-touch-icon-152×152.png (152×152 Pixel) – iPad und iPad mini mit Retina Display
- apple-touch-icon-120×120.png (120×120 Pixel) – iPhone 6/7/8 und iPhone SE
- apple-touch-icon.png (180×180 Pixel) – Fallback-Version
Ladet diese Dateien ins Hauptverzeichnis eurer Webseite hoch. iOS wählt automatisch die passende Größe für das jeweilige Gerät aus. Alternativ könnt ihr die Icons auch über HTML-Meta-Tags im -Bereich referenzieren:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
Bei der Gestaltung eurer Apple Touch Icons solltet ihr einige Besonderheiten beachten. iOS wendet automatisch einen Rundungseffekt auf eure Icons an – ihr müsst sie also nicht selbst mit abgerundeten Ecken versehen. Auch Glanz-Effekte sind seit iOS 7 nicht mehr nötig. Konzentriert euch stattdessen auf ein klares, erkennbares Design mit ausreichend Kontrast.
Vermeidet zu kleine Details oder dünne Linien, da diese bei der Verkleinerung verschwinden könnten. Euer Logo oder Symbol sollte den verfügbaren Platz gut ausnutzen, aber nicht bis zum Rand reichen. Ein kleiner Abstand sorgt dafür, dass das Icon auch nach der automatischen Rundung gut aussieht.
Moderne Progressive Web Apps (PWAs) nutzen zusätzlich ein Web App Manifest, um noch mehr Kontrolle über die Darstellung zu erhalten. Dort könnt ihr weitere Icon-Größen definieren und bestimmen, ob eure App im Vollbildmodus oder mit Safari-Interface geöffnet werden soll:
<link rel="manifest" href="/manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Euer App-Name">
Die Investition in professionelle Apple Touch Icons zahlt sich aus. Nutzer erkennen eure Webseite schneller wieder, und sie wirkt wie eine echte App. Besonders für E-Commerce-Seiten oder Services, die regelmäßig besucht werden, steigert das die Wiederkehrrate erheblich.
Tools wie den Real Favicon Generator oder Adobe Express helfen beim Erstellen aller benötigten Icon-Größen aus einer Quelldatei. Achtet dabei auf eine Ausgangsgröße von mindestens 512×512 Pixeln, um beim Herunterskalieren optimale Ergebnisse zu erzielen.
Testet eure Icons auf verschiedenen iOS-Geräten und überprüft, ob sie bei unterschiedlichen Hintergründen gut lesbar bleiben. Ein Icon, das nur auf weißem Hintergrund funktioniert, kann bei dunklen Wallpapern untergehen.
Zuletzt aktualisiert am 24.04.2026
