Falsches Favicon auf dem Handy-Homescreen? So fixst du es

8 min read

5. Juni 2026

Im Browser-Tab sieht das Icon korrekt aus, aber beim Hinzufügen zur Startseite auf dem Handy erscheint eine generische Kachel, ein altes Logo oder ein völlig falsches Bild. Homescreen-Icons auf dem Handy nutzen andere Dateien und Tags als Tab-Favicons. iOS liest apple-touch-icon. Android-PWAs lesen Icons aus manifest.json. Die beiden zu verwechseln ist die häufigste Ursache.

Dieser Artikel trennt Tab-Icons von Homescreen-Icons und führt durch Fixes für iOS und Android. Scanne deine URL mit dem Favicon Check, um alle deklarierten Icons auf einen Blick zu sehen.

Tab-Favicon vs. Homescreen-Icon

In den meisten Setups sind das nicht dieselben Assets.

Kontext	Was das OS nutzt	Typischer Tag oder Datei
Browser-Tab (mobil)	`rel="icon"` PNG oder ICO	`<link rel="icon">`
iOS-Homescreen	Apple Touch Icon	`<link rel="apple-touch-icon">`
Android-Homescreen (PWA)	Manifest-Icons	`"icons"` in `site.webmanifest`
Android-Browser-Tab	Wie Desktop-Tab	`rel="icon"`

Ein perfektes 32×32-Tab-Icon hilft der 180×180-iOS-Kachel nicht, wenn apple-touch-icon fehlt oder auf die falsche Datei zeigt.

Empfohlene Maße pro Kontext findest du in der Favicon-Größen-Anleitung.

Warum iOS das falsche Homescreen-Icon zeigt

Fehlendes apple-touch-icon

Ohne expliziten Tag macht iOS manchmal einen Screenshot, nutzt einen niedrig aufgelösten Ausschnitt oder greift auf eine alte gecachte Kachel von einem früheren Besuch zurück.

Mindestens ergänzen:

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

Im serverseitig gerenderten <head> platzieren, nicht per JavaScript nachladen.

Falsche Größe oder Seitenverhältnis

Apple erwartet ein quadratisches PNG, idealerweise 180×180 Pixel. Ein hochskaliertes 32×32-Favicon wirkt auf dem Homescreen unscharf oder nicht zentriert. Ein breites Logo ohne Padding wird unvorhersehbar beschnitten.

Ein dediziertes quadratisches Asset mit Safe Zone um das Markenzeichen anlegen. Nicht die kleine Tab-Favicon-Datei wiederverwenden.

Mehrere apple-touch-icon-Tags

Mehrere Tags mit unterschiedlichen sizes können iOS zu einer unerwarteten Wahl führen:

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

Mit dem Favicon Check prüfen. Duplikate und veraltete Pfade entfernen. Eine primäre 180×180-Datei reicht für aktuelle iPhones.

Gecachte Homescreen-Verknüpfung

iOS cached die Kachel beim ersten Hinzufügen. Du hast den Server gefixt, die Verknüpfung zeigt noch das Logo von 2022.

Fix-Optionen:

Nutzer entfernt die Verknüpfung und legt sie neu an
Du änderst die href auf einen neuen Dateinamen (apple-touch-icon-v2.png)
Nutzer löscht Safari-Websitedaten (drastisch)

Das ist getrennt vom Tab-Favicon-Cache. Siehe Favicon wird nicht aktualisiert? für Cache-Busting-Muster.

precomposed vs. Standard-Styling

Ältere Sites nutzten apple-touch-icon-precomposed, um Apples Glanz-Overlay zu überspringen. Modernes iOS ignoriert den Glanz-Effekt. Standard-apple-touch-icon reicht heute.

Warum Android das falsche Icon zeigt

Browser-Tab vs. installierte PWA

Chrome auf Android nutzt rel="icon" für den Tab wie am Desktop. Bei "App installieren" oder "Zum Startbildschirm" von einer PWA-fähigen Site liest Android manifest.json:

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

Falsche oder fehlende Manifest-Icons ergeben ein generisches Chrome-Icon oder einen beschnittenen Screenshot im Launcher.

Manifest im HTML verlinken:

<link rel="manifest" href="/site.webmanifest">

Verknüpfung über Browser-Menü (ohne PWA)

"Hinzufügen zum Startbildschirm" aus dem Chrome-Menü ohne Manifest kann ein generiertes Icon von der Seite nutzen. Das ist kein Favicon-File, sondern ein Einmal-Snapshot. Nur ein korrektes Manifest oder apple-touch-icon gibt dir Kontrolle.

Maskable Icons

Adaptive Android-Icons bevorzugen Einträge mit "purpose": "maskable" und Safe Zone. Ein Logo, das die gesamte 512×512-Fläche füllt, wird auf manchen Launchern im Kreis-Mask beschnitten.

Sowohl any als auch maskable bereitstellen, wenn dein Generator das unterstützt.

Schritt-für-Schritt-Fix für iOS

PNG 180×180 mit zentriertem Logo und Padding erstellen.
Nach /apple-touch-icon.png oder versioniertem Pfad hochladen.
link-Tag ins Layout-<head> setzen. Siehe Favicon per HTML einbinden.
Deployen und mit Favicon Check scannen. apple-touch-icon muss mit Vorschau erscheinen.
Auf einem Test-iPhone bestehende Homescreen-Verknüpfung entfernen.
Safari öffnen, Seite besuchen, Teilen > Zum Home-Bildschirm. Kachel prüfen.
Wenn noch falsch: Datei umbenennen und href für Cache-Busting anpassen.

Schritt-für-Schritt-Fix für Android PWA

PNGs 192×192 und 512×512 in statische Assets legen.
In site.webmanifest mit korrektem sizes und type referenzieren.
Manifest im HTML-<head> verlinken.
Deployen. Manifest unter https://deinedomain.de/site.webmanifest muss laden.
Mit Favicon Check scannen. Manifest-Icons mit Vorschau müssen gelistet sein.
Bestehende PWA-Verknüpfung deinstallieren. Neu aus Chrome-Menü hinzufügen.
Tab-Icon (rel="icon") und Launcher-Icon (Manifest) getrennt vergleichen.

Wenn auch der mobile Tab falsch ist

Zeigt der mobile Browser-Tab selbst das falsche Icon, nicht nur der Homescreen, liegt das Problem bei rel="icon", nicht bei apple-touch-icon.

Prüfen:

Relative Pfade auf verschachtelten Routen
HTTP vs. HTTPS Mixed Content
Altes gecachtes Favicon unter derselben URL

Voller Tab-Troubleshooting-Guide: Favicon wird nicht angezeigt?.

Safari unter iOS nutzt für Tabs dieselben rel="icon"-Tags wie Safari auf macOS. Safari-spezifische Probleme: Safari Favicon funktioniert nicht.

Typische Fehler

favicon.ico für den Homescreen

ICO funktioniert in manchen Desktop-Tabs. iOS will PNG für apple-touch-icon. Dedizierte PNG ausliefern.

Dieselbe Datei für alle Größen ohne Test

Eine 512×512-PNG als apple-touch-icon kann funktionieren, lädt aber unnötig viel. iOS bevorzugt 180×180 für die Kachel. Tab will 32×32. Größen pro Kontext passend wählen, siehe Größen-Anleitung.

Nur Startseite in Production gefixt

Tags müssen im globalen Layout sitzen. Fehlt apple-touch-icon in einem Blog-Template, brechen Icons bei Lesezeichen auf Deep Links.

Manifest vergessen nach HTML-Favicon-Fix

Entwickler fixen Tab-Icons, QA auf Desktop grün, iOS-Homescreen bleibt kaputt, weil apple-touch-icon nie ergänzt wurde.

Unscharfe Kachel als falsches Icon gelesen

Hochskaliertes kleines Logo wirkt wie das "falsche" Markenzeichen. Quellmaße prüfen: Favicon unscharf?.

Enterprise- und Multi-Brand-Sites

Große Organisationen liefern manchmal unterschiedliche apple-touch-icon-Dateien pro Subdomain oder Locale. Eine Marketing-Microsite unter promo.example.com erbt vielleicht das Konzern-Favicon von einem gemeinsamen CDN-Pfad, während die Produkt-App eigene Manifest-Icons nutzt.

Dokumentiere, welches Icon zu welcher Property gehört. QA soll jede Subdomain separat zum Homescreen hinzufügen. Falsche Kachel auf app.example.com, während www.example.com stimmt, heißt meist: Das App-Layout-Template hat nie apple-touch-icon-Tags bekommen.

Bei hreflang oder locale-spezifischen Layouts muss jedes Locale-Template denselben Icon-Block enthalten. Fehlende Tags nur auf /de/-Seiten produzieren falsche Kacheln für deutsche Nutzer, die genau diese URLs bookmarken.

Real-Gerät-Checkliste vor Launch

Vor jedem Release mit Icon-Änderungen diese Liste abarbeiten:

Production-URL in Favicon Check scannen - alle drei Kategorien müssen grün sein: rel="icon", apple-touch-icon, Manifest.
iPhone: alte Verknüpfung löschen, Safari privat öffnen, Seite laden, Teilen > Zum Home-Bildschirm. Kachel vor dem Speichern prüfen.
Android: PWA deinstallieren falls vorhanden, Chrome öffnen, Installieren oder Zum Startbildschirm. Launcher-Icon mit Tab-Icon vergleichen.
Tiefen-URL testen, z. B. /blog/artikel-slug, nicht nur /. Layout muss global sein.
Optional: dieselbe URL im Open Graph Scanner prüfen, damit Social-Vorschau und Icons zusammen stimmen.

Wenn Schritt 1 im Scanner passt, Schritt 2 aber scheitert, liegt es fast immer an gecachter Homescreen-Verknüpfung auf dem Gerät, nicht am Server.

Unterschied zu PWA-Install auf Android

Nutzer verwechseln oft "Zum Startbildschirm" in Chrome mit einer vollständigen PWA-Installation. Beide können unterschiedliche Icon-Quellen nutzen. Dokumentiere im Team-Handbuch, welche Assets für welchen Flow gelten, damit Marketing und Entwicklung nicht an verschiedenen PNG-Dateien arbeiten.

Bei Hybrid-Apps (Capacitor, Cordova) kommen native Icon-Slots dazu. Die WebView lädt trotzdem dein HTML apple-touch-icon für In-App-Browser-Kontexte. Web- und Native-Icons synchron halten.

Nach jedem Rebrand: Marketing-Assets, CMS-Site-Icon, apple-touch-icon.png und Manifest-Icons gemeinsam aktualisieren. Ein veraltetes PNG in nur einer Schicht erzeugt genau die "falsches Icon auf dem Handy"-Meldung, obwohl der Tab schon stimmt.

Testen ohne Raten

Manuelles Testen auf echten Geräten ist für Homescreen-Kacheln am besten. Automatische Checks helfen trotzdem bei deklarierten Tags.

Favicon Check auf Production-URL ausführen.
apple-touch-icon, Manifest-Icons und rel="icon" müssen mit erreichbaren URLs gelistet sein.
Jede Icon-URL auf dem Handy in mobilem Safari oder Chrome öffnen.
Zum Homescreen hinzufügen auf einem Gerät ohne alte Verknüpfung.
Optional: Open Graph Scanner auf derselben URL für breiteres Metadaten-QA vor Launch.

FAQ

Warum sieht die Seite im Tab gut aus, aber auf dem Homescreen falsch?

Homescreen-Icons nutzen apple-touch-icon auf iOS und Manifest-Icons auf Android-PWAs. Tab-Favicons nutzen rel="icon". Andere Dateien, andere Tags.

Brauche ich apple-touch-icon und Favicon?

Ja, für volle Abdeckung. Tab-Browser lesen favicon-link-Tags. iOS-Homescreen liest apple-touch-icon. Installierte Android-Apps lesen Manifest-Icons.

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

180×180 Pixel ist Standard für aktuelle iPhones. Details in der Favicon-Größen-Anleitung.

apple-touch-icon aktualisiert, iPhone zeigt noch alte Kachel?

iOS cached Homescreen-Verknüpfungen. Verknüpfung entfernen und neu anlegen oder Icon-URL auf neuen Dateinamen ändern.

Android "Zum Startbildschirm" ignoriert mein Favicon?

Verknüpfungen ohne PWA können einen Seiten-Snapshot nutzen. Web-App-Manifest mit 192- und 512-Icons ergänzen für kontrolliertes Launcher-Icon.

SVG für apple-touch-icon?

iOS nutzt SVG für Homescreen-Kacheln nicht zuverlässig. PNG für apple-touch-icon. SVG kann für manche Tab-Kontexte mit PNG-Fallback funktionieren.

Falsches Icon nur auf einem Handy im Team?

Das Gerät hat vermutlich alte gecachte Verknüpfung oder alte PWA-Installation. Homescreen-Icon entfernen und nach Server-Fix neu installieren.

Alle Icon-Tags auf einmal prüfen?

URL in den Favicon Check einfügen. Er listet rel="icon", apple-touch-icon, Manifest-Einträge und /favicon.ico mit Vorschau.

Fazit

Falsches Favicon auf dem Handy-Homescreen heißt: falscher Dateityp oder Tag für diesen Kontext, nicht ein kaputtes Tab-Favicon. Richtiges 180×180 apple-touch-icon für iOS, Manifest-Icons für Android-PWAs, und alles mit dem Favicon Check validieren. Alte Verknüpfungen beim Testen entfernen, weil mobile OS Homescreen-Kacheln getrennt von Browser-Tabs cachen.