Apple Touch Icon fehlt auf iOS? Homescreen-Icon fixen

8 min read

7. Juni 2026

Du hast die Seite zum iPhone-Homescreen hinzugefügt und einen unscharfen Screenshot, eine generische weiße Kachel oder einen beschnittenen Ausschnitt der Startseite statt deines Logos bekommen. iOS nutzt rel="icon" nicht für Homescreen-Verknüpfungen. Es sucht apple-touch-icon, eine dedizierte quadratische PNG, meist 180×180 Pixel.

Dieser Artikel erklärt, wofür apple-touch-icon da ist, wie iOS es wählt, und wie du fehlende oder falsche Homescreen-Icons fixst. Scanne deine URL mit dem Favicon Check, ob Tag und Datei erkannt werden.

Wofür apple-touch-icon da ist

Apple führte apple-touch-icon ein, bevor standardisierte Favicon-link-Tags auf Mobile verbreitet waren. iOS Safari liest es, wenn Nutzer Teilen > Zum Home-Bildschirm tippen.

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

Kontext	Tag	Typische Größe
iOS-Homescreen-Verknüpfung	apple-touch-icon	180×180 PNG
iOS-Browser-Tab	rel="icon"	32×32 oder ähnlich
macOS Safari Tab	rel="icon"	32×32 PNG oder ICO
macOS angehefteter Tab	mask-icon SVG	Vektor-Silhouette

Ein funktionierendes Tab-Favicon füllt die Homescreen-Kachel nicht. Viele Entwickler fixen Tab-Icons und hören trotzdem "Favicon auf iPhone kaputt", weil apple-touch-icon nie ergänzt wurde.

Querverweis: Falsches Favicon auf dem Handy-Homescreen? für Tab-vs.-Kachel-Verwechslung.

Was iOS ohne apple-touch-icon macht

Ohne gültigen Tag und Datei kann iOS:

Einen Screenshot-Thumbnail der Seite erzeugen (oft hässlich)
Einen niedrig aufgelösten Ausschnitt des Titels nutzen
Ein generisches Icon mit dem ersten Buchstaben des Seitennamens zeigen
Eine gecachte Kachel von einer früheren Site-Version wiederverwenden

Nichts davon passt zur Marke. Fix ist immer eine ordentliche PNG und expliziter link-Tag im Server-HTML.

iOS holt /favicon.ico für Homescreen-Kacheln nicht wie Desktop-Browser für Tabs.

Erforderliche Größe und Format

Apple dokumentiert 180×180 als Standard für aktuelle iPhones. Ältere Docs nennen 152×152 für iPad; eine gut designte 180×180-Datei skaliert für die meisten Fälle akzeptabel runter.

Regeln:

Format: PNG. Kein ICO, SVG oder JPEG für apple-touch-icon.
Form: Quadratische Fläche. Nicht-quadratische Logos brauchen Padding, kein Strecken.
Hintergrund: Deckend. Transparente PNGs bekommen unvorhersehbar schwarze oder weiße Füllung.
Safe Zone: Markenzeichen in der mittleren 80% halten für minimales Beschnitt auf älteren Geräten.

Volle Größen-Matrix: Favicon-Größen-Anleitung.

Schritt 1: link-Tag ins Server-HTML

Im <head> des globalen Layouts platzieren, nicht per Client-JavaScript injizieren:

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

Optionale Legacy-Größen bei vollem Set:

<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">

Modernes iOS wählt die beste Passung aus deklarierten Größen. Ein 180×180-Eintrag reicht heute für die meisten Sites.

Voller Head-Block: Favicon per HTML einbinden.

Schritt 2: PNG erstellen und hochladen

180×180 aus dem Design-Tool exportieren. Mark zentrieren mit gleichmäßigem Padding.

In Static Root legen:

/public/apple-touch-icon.png

Direktzugriff prüfen:

https://deinedomain.de/apple-touch-icon.png

Safari auf iPhone sollte das Bild inline anzeigen, wenn du die URL öffnest.

Favicon Check auf der Startseite ausführen. apple-touch-icon muss in der Liste mit Vorschau-Thumbnail erscheinen.

Schritt 3: Zum Home-Bildschirm testen

Auf einem Test-iPhone:

Safari öffnen (Chrome auf iOS nutzt WebKit; Homescreen-Verhalten für Verknüpfungen ähnlich)
Production-URL aufrufen
Teilen > Zum Home-Bildschirm tippen
Kachel-Vorschau sollte deine PNG zeigen, bevor du bestätigst
Vorschau falsch: Server-Tags fixen, bevor du die Verknüpfung speicherst

Alte Verknüpfung vor Retest nach Fixes entfernen. iOS cached Kacheln pro Verknüpfungs-URL.

Cache busten durch Umbenennen:

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

Siehe Favicon wird nicht aktualisiert?.

Mehrere apple-touch-icon-Tags

Mehrere Größen deklarierbar. iOS wählt die nächste Passung:

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

Probleme wenn:

Tag ohne sizes auf alte Datei zeigt
Doppelte Tags mit verschiedenen hrefs kollidieren
Größte deklarierte Größe ist hochskaliertes Mini-Favicon

Alle Tags mit Favicon Check auditieren und tote Einträge entfernen.

apple-touch-icon-precomposed (Legacy)

Ältere Sites nutzten:

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

Apple legte früher Glanz und abgerundete Ecken drauf. precomposed übersprang den Effekt. Modernes iOS wendet keinen Glanz mehr an. Standard-apple-touch-icon für neue Projekte.

Typische Fehler

32×32 favicon.png wiederverwenden

Hochskalierte kleine Icons wirken auf dem Homescreen unscharf. Bei 180×180 designen. Unschärfe: Favicon unscharf?.

Transparente PNG ohne Hintergrund

iOS füllt Transparenz mit schwarz oder weiß. Deckenden Hintergrund passend zur Marke nutzen.

Tag nur im Startseiten-Template

Blog-Posts ohne apple-touch-icon brechen, wenn Nutzer Deep Links bookmarken und von dort zum Homescreen hinzufügen. Tags ins globale Layout.

manifest.json soll apple-touch-icon auf iOS ersetzen

Web-App-Manifest-Icons matter für installierte PWAs auf Android. iOS-Homescreen-Verknüpfungen bevorzugen in den meisten Fällen weiter apple-touch-icon im HTML.

Falscher Pfad oder 404

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

404 auf dem Pfad heißt generische Kachel. URL direkt öffnen, 200 bestätigen.

Allgemeines Pfad-Debugging: Favicon wird nicht angezeigt?.

Android-Hinweis (anderer Tag)

Installierte Android-PWAs nutzen Manifest-Icons, nicht apple-touch-icon:

"icons": [
  { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }
]

iOS-only-Fix hier. Android-Homescreen: Falsches Favicon auf dem Handy-Homescreen?.

Framework-Hinweise

Next.js App Router: apple-icon.png in app/ oder Metadaten-Icons in layout.tsx.

WordPress: Site-Icon-Feature erzeugt apple-touch-Größen. Theme muss link-Tags im <head> ausgeben.

Static HTML: eine PNG in Root plus ein link-Tag reicht.

Web App Manifest und iOS Standalone-Modus

Fügen Nutzer eine Site mit verlinktem Manifest und display: standalone zum Homescreen hinzu, bevorzugt iOS in manchen Konfigurationen Manifest-Icons. HTML apple-touch-icon bleibt die zuverlässige Basis für Standard-Verknüpfungen.

Existieren beide, visuell identisch halten, damit PWA-Install und Safari-Verknüpfung nicht unterschiedliche Kacheln zeigen:

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

{
  "icons": [
    { "src": "/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" }
  ]
}

Dieselbe PNG-Pfad wiederverwenden reduziert Asset-Drift. Mit Favicon Check scannen, ob HTML und Manifest erreichbare Dateien referenzieren.

Design-Tipps für Homescreen-Kacheln

iOS rundet Kacheln automatisch ab. Logos, die bis an den Rand reichen, wirken abgeschnitten.

Padding: Mindestens 10-15 Prozent Leerraum ringsum. Ein 180×180-Canvas mit Logo in der mittleren 140×140-Zone ist ein sicherer Start.

Kontrast: Helle Logos auf hellem Hintergrund verschwinden in der Kachel-Vorschau. Dunkle oder farbige Hintergrundfläche wählen, die zur Marke passt.

Kein Text unter 12px: Kleine Wortmarken in Favicon-Größe sind auf dem Homescreen unleserlich. Nur Symbol oder Monogramm nutzen.

Master-Asset: Design in 512×512 oder Vektor, dann 180×180 exportieren. Qualität hält skalierbar. Details zu Pixelierung: Favicon unscharf?.

Dark Mode und getönte Homescreen-Hintergründe

iOS legt getönte Hintergründe hinter Homescreen-Icons je nach Wallpaper. Deckende apple-touch-icon-PNGs mit konsistenten Markenfarben überleben Wallpaper-Wechsel besser als transparente Logos, die auf iOS-Füllverhalten angewiesen sind.

180×180-Asset auf hellem und dunklem Wallpaper auf echtem Gerät testen. Was in Figma auf Weiß gut aussieht, kann auf busy Photo-Wallpaper verschwinden.

QA-Checkliste für Marketing und Dev

Vor Kampagnen-Launch, bei denen Nutzer die Site zum Homescreen hinzufügen sollen:

apple-touch-icon in Staging und Production identisch
Kein A/B-Test-Script, das <head>-Tags entfernt
App-Store-Landingpage und Hauptdomain nutzen dasselbe Icon-Set
Kurzlink-Domain (z. B. go.marke.de) hat eigenes apple-touch-icon, nicht 404

Marketing liefert oft nur SVG-Logo. Dev muss daraus 180×180 PNG exportieren. Prozess im Ticket-Template festhalten.

Wenn Nutzer "Icon sieht auf iPad anders aus" melden, prüfe zusätzliche Größen wie 167×167 für iPad Pro oder halte dich an eine scharfe 180×180-Quelle. Details zu allen Maßen in der Favicon-Größen-Anleitung.

Nach App-Updates von iOS lohnt ein Regressionstest der Homescreen-Kachel, auch wenn sich am HTML nichts geändert hat. Apple passt gelegentlich Rendering oder Cache-Verhalten an.

Shortcut von WhatsApp oder Mail öffnen

Nutzer speichern Links aus In-App-Browsern. Die Kachel hängt an der Ziel-URL, die beim Hinzufügen geladen wurde. Deep Links und Marketing-Parameter (?utm=) erzeugen technisch andere URLs - Icon-Tags müssen im Layout aller Varianten identisch sein.

Mehrere Marken unter einer Domain

Subfolder- oder Subdomain-Marken brauchen jeweils eigenes apple-touch-icon im jeweiligen Layout. Ein globales Icon von der Konzernmutter auf Produktseiten erzeugt "falsches" Homescreen-Bild aus Nutzersicht.

Schritt-für-Schritt-Fix

Symptom klären: Homescreen-Kachel, nicht Browser-Tab.
View-Source. Nach apple-touch-icon suchen.
Fehlt es: PNG 180×180 erstellen und link-Tag ins Layout.
Deployen. PNG-URL auf dem Handy öffnen. Muss 200 liefern.
Mit Favicon Check scannen.
Alte Homescreen-Verknüpfung auf Testgerät löschen.
Erneut Zum Home-Bildschirm aus Safari hinzufügen.
Optional: Open Graph Scanner für Launch-Metadaten-QA.

FAQ

Ist apple-touch-icon für iOS Pflicht?

Pflicht für eine gebrandete Homescreen-Kachel. Ohne es erzeugt iOS einen Fallback, der selten gut aussieht.

Welche Größe für apple-touch-icon?

180×180 Pixel für aktuelle iPhones. Siehe Favicon-Größen-Anleitung.

Beeinflusst apple-touch-icon Browser-Tabs auf dem iPhone?

Nein. Tabs nutzen rel="icon". apple-touch-icon ist nur für Homescreen-Verknüpfungen und manche Lesezeichen-Kontexte.

apple-touch-icon ergänzt, Kachel noch falsch?

Alte Verknüpfung entfernen und neu anlegen. iOS cached Kacheln. Oder href auf neuen Dateinamen für Cache-Bust ändern.

SVG für apple-touch-icon?

Nein. PNG nutzen. iOS akzeptiert SVG für Homescreen-Icons nicht zuverlässig.

Eine PNG für Favicon und apple-touch-icon?

Schlechte Idee. Tab braucht 16-32 Bereich. Homescreen braucht 180×180. Separate Dateien aus demselben Master exportieren.

Vorschau stimmt, gespeicherte Kachel alt?

Gecachte Verknüpfung von vor dem Fix. Homescreen-Icon löschen und neu anlegen.

Ohne iPhone verifizieren?

Favicon Check bestätigt Tag und Datei auf dem Server. Finales Kachel-Bild braucht trotzdem echtes iOS-Gerät.

Fazit

Fehlendes apple-touch-icon heißt: iOS kann dein Logo nicht auf dem Homescreen zeigen. PNG 180×180 deckend ergänzen, im serverseitig gerenderten HTML deklarieren, mit Favicon Check validieren und Verknüpfung nach Entfernen gecachter Kacheln neu anlegen. Tab-Favicons und Homescreen-Icons sind getrennte Aufgaben; beides fixen für konsistente mobile Markenpräsenz.