Apple Touch Icon - MetricSpot Docs

Q: Was ist mit Android-Home-Screens?

Android nutzt das Web-Manifest, um Icons zu finden — das icons-Array mit 192x192- und 512x512-PNGs. Das Apple Touch Icon ist iOS-only; liefere beide.

Was diese Prüfung macht

Sucht im <head> nach einem <link rel="apple-touch-icon">-Element und prüft, ob die referenzierte Datei existiert und lädt. iOS Safari verwendet dieses Icon, wenn ein:e Besucher:in auf Teilen → Zum Home-Bildschirm tippt.

Warum es zählt

Wenn iOS-Nutzer:innen deine Seite auf ihrem Home-Screen speichern, bekommst du eine kostenlose, app-store-förmige Installation — aber nur, wenn du das Icon bereitstellst. Ohne rendert iOS einen unscharfen Screenshot der Seite in Icon-Größe, der kaputt und ungepflegt aussieht. App-ähnliche Darstellung treibt deutlich höhere Wiederbesuchsraten.

Apple verlangt seit Jahren kein Touch Icon mehr für die Indexierung, die Prüfung dreht sich also um Darstellung und Markenvertrauen, nicht Crawlbarkeit. Aber die Kosten sind eine PNG-Datei und drei Zeilen HTML — es gibt keinen Grund, das auszulassen.

So behebst du es

Lege ein 180×180-PNG im Site-Root ab und verlinke darauf:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

iOS sucht zuerst nach /apple-touch-icon.png im Domain-Root, selbst ohne <link>-Tag — die Datei dort abzulegen, funktioniert oft. Aber das explizite <link> auszuliefern, ist über ältere iOS-Versionen und moderne Drittanbieter-Clients (Slack, Discord, RSS-Reader), die es für Vorschauen nutzen, zuverlässiger.

Single-Size-Ansatz (für die meisten Seiten empfohlen):

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

180×180 ist die größte Größe, die iOS anfragt. iOS skaliert für kleinere Ziele herunter — ein Bild reicht.

Multi-Size-Ansatz (nur wenn du markentechnische Gründe hast, jede Größe zu optimieren):

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png">

Design-Hinweise:

Nur PNG. JPEG erzeugt Artefakte auf einfarbigen Hintergründen; SVG wird nicht unterstützt.
Keine Transparenz. iOS legt eine abgerundete Maske darüber und ergänzt auf älteren iOS-Versionen einen leichten Glanz — entwirf für eine quadratische, randlose Leinwand.
Bei kleinster Größe lesbar machen (76×76 auf älteren iPads). Eine Wortmarke funktioniert; ein 20-Zeichen-Slogan nicht.
Kombiniere mit einem Theme-Color-Meta und einem Web-Manifest für die volle Home-Screen-Erfahrung auf iOS und Android.

Aus einer Quelle generieren:

RealFaviconGenerator nimmt ein Quellbild und gibt das Touch Icon, das Favicon-Set, das Manifest und das HTML zum Einfügen aus — deckt iOS, Android, Windows-Tiles und PWA-Installierbarkeit in einem Durchgang ab.

Astro: Lege die Icons in public/ ab und ergänze den Link im <head> von BaseLayout.astro.

Next.js: Lege apple-icon.png (180×180) direkt in app/ ab — der App Router generiert den <link>-Tag automatisch.

app/
  apple-icon.png   # 180×180
  favicon.ico
  layout.tsx

WordPress: Die meisten modernen Themes akzeptieren ein Touch Icon unter Design → Anpassen → Website-Identität. Andernfalls legst du das PNG ins Theme-Root und ergänzt den <link> in header.php.

Häufig gestellte Fragen

Was ist mit Android-Home-Screens?

Android nutzt das Web-Manifest, um Icons zu finden — das icons-Array mit 192x192- und 512x512-PNGs. Das Apple Touch Icon ist iOS-only; liefere beide.

Brauche ich `apple-touch-icon-precomposed`?

Nein. Diese Variante sagte älteren iOS-Versionen, den Glanz-Effekt nicht anzuwenden. iOS hat den Glanz in iOS 7 (2013) entfernt; moderne Geräte ignorieren die precomposed-Variante vollständig. Bleib bei apple-touch-icon.

Laden Browser das Icon neu, wenn ich es aktualisiere?

iOS cached das Icon aggressiv. Hänge beim Austausch einen Query-String an (href="/apple-touch-icon.png?v=2"), damit gecachte Kopien aktualisiert werden. Derselbe Trick funktioniert fürs Favicon.