Safari zeigt einen leeren Tab, ein generisches Icon oder ein veraltetes Logo, während Chrome auf demselben Mac dein Favicon korrekt anzeigt. Safari folgt demselben link rel="icon"-Standard wie andere Browser, cached Favicons aber aggressiv und behandelt angeheftete Tabs sowie iOS-Homescreen-Icons anders.
Dieser Guide deckt Safari-Tab-Icons auf macOS und iOS ab, plus typische Verwechslung mit apple-touch-icon. Scanne deine URL mit dem Favicon Check, um zu prüfen, was Safaris Fetch sehen würde.
Safari-Tab-Icon vs. andere Safari-Icons
Safari nutzt mehrere Icon-Typen. Eines zu fixen fixiert nicht automatisch die anderen.
| Feature | Tag oder Mechanismus | Betrifft |
|---|---|---|
| Tab-Favicon | rel="icon" | macOS-Tabs, iOS-Browser-Tabs |
| Angehefteter Tab | rel="mask-icon" + color | Nur macOS angeheftete Tabs |
| Homescreen-Kachel | rel="apple-touch-icon" | iOS-Verknüpfung, nicht Tab |
| Leseliste | Nutzt Tab-Favicon | macOS Safari |
"Safari Favicon kaputt" kann Tab, angeheftete Tab-Silhouette oder iOS-Homescreen meinen. Vor dem Debuggen klären.
Wie Safari Tab-Favicons lädt
Safari liest link rel="icon" aus dem initialen HTML-Dokument, wie Chrome und Firefox:
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">Safari fordert auch /favicon.ico an der Domain-Root an, wenn kein Tag existiert.
Safari hält eine persistente Favicon-Datenbank pro Profil auf der Festplatte. Normalen Cache zu leeren räumt Favicons nicht immer mit auf. Safari nach Server-Fixes komplett beenden (Cmd+Q), um hartnäckige Fälle zu erzwingen.
Schritt 1: Tags im View-Source prüfen
Safari Web Inspector Elements kann client-injizierte Tags zeigen. Entwickler > Seitenquelltext einblenden oder Rechtsklick Seitenquelltext anzeigen.
Fehlt rel="icon" im Quell-HTML, versucht Safari trotzdem /favicon.ico, scheitert aber bei 404.
SPA-Frameworks, die Favicons nach Hydration injizieren, verursachen intermittierende Safari-Tab-Icons. Tags ins serverseitig gerenderte Layout. Referenz: Favicon per HTML einbinden.
Schritt 2: Icon-URLs in Safari testen
Jede deklarierte Icon-URL direkt in einem Safari-Tab öffnen:
https://deinedomain.de/favicon-32x32.png
https://deinedomain.de/favicon.ico
Safari sollte das Bild inline anzeigen. Download oder Fehlerseite heißt: Datei nicht nutzbar.
Favicon Check auf der Seiten-URL ausführen. Gelistete Icons mit dem vergleichen, was Safari laden sollte.
Schritt 3: Safari-Favicon-Cache auf macOS
Safari cached Favicons in vielen Versionen getrennt von Websitedaten.
Versuchen:
- Privates Fenster (
Cmd+Shift+N) - schnellster Check - Anderer Mac-User oder frisches Safari-Profil
- Safari vollständig beenden und neu öffnen
- Entwickler > Caches leeren (Entwicklermenü unter Safari Einstellungen > Erweitert aktivieren)
- Safari > Einstellungen > Datenschutz > Website-Daten verwalten - Daten für deine Domain entfernen
Privates Fenster zeigt korrektes Icon: Server stimmt. Hauptprofil braucht Cache-Ablauf oder manuelles Leeren.
Bei Deploy-Updates Icon-Dateien umbenennen statt URLs überschreiben. Details: Favicon wird nicht aktualisiert?.
Schritt 4: mask-icon für angeheftete Tabs (macOS)
Angeheftete Tabs in Safari zeigen eine monochrome Silhouette, nicht dein farbiges Favicon. Sie brauchen:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">Das SVG muss ein einfarbiges Vektorgrafik sein. Fehlendes mask-icon entfernt nicht das normale Tab-Favicon, aber angeheftete Tabs wirken kaputt oder generisch.
Häufiger Bericht: "Favicon funktioniert, bis ich den Tab anhefte." mask-icon separat ergänzen.
Schritt 5: Safari auf iOS (Browser-Tabs)
Mobile Safari-Tabs nutzen rel="icon", nicht apple-touch-icon.
Scheitert Tab-Icon in iPhone Safari:
- HTTPS und erreichbare PNG oder ICO prüfen
- Mobilfunk und WiFi testen
- Mit Desktop-Safari auf derselben URL vergleichen
Tab funktioniert, aber Zum Home-Bildschirm zeigt falsches oder generisches Bild: das ist apple-touch-icon. Anderer Fix: Falsches Favicon auf dem Handy-Homescreen? und Apple Touch Icon fehlt auf iOS.
iOS Safari cached ebenfalls aggressiv. Nutzer müssen manchmal alle Tabs der Site schließen und neu öffnen.
Schritt 6: ICO-, PNG- und SVG-Support in Safari
Safari unterstützt ICO und PNG für Tab-Favicons. SVG für rel="icon" gibt es in neueren Safari-Versionen, PNG-Fallback bleibt sicherer:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/svg+xml" href="/favicon.svg">Falsche Content-Type-Header können Safari eine Datei still überspringen lassen. In curl oder Network-Tab prüfen.
Empfohlene Größen: Favicon-Größen-Anleitung.
Schritt 7: iCloud-Tabs und geräteübergreifender Sync
Safari synchronisiert offene Tabs über iCloud. Veraltetes Favicon auf einem Gerät heißt nicht automatisch falscher Server. Auf einem Gerät testen, das die Site noch nie besucht hat, oder Privates Surfen auf jedem Gerät separat.
macOS- und iOS-Versionsunterschiede
Apple aktualisiert WebKit häufig. Ein Favicon-Setup, das unter iOS 16 lief, braucht vielleicht PNG-Fallback, wenn du ICO unter iOS 17+ Safari-Tabs weglässt. Melden Nutzer Safari-only-Probleme nach OS-Update, mit expliziten PNG-Tags retesten, bevor du Server-Config änderst.
Private Relay und iCloud Private Relay blockieren same-origin-Favicon-Fetches nicht. Drittanbieter-Domains in icon-hrefs können unter ITP anders reagieren, /favicon.ico same-origin bleibt unberührt.
Bei lokaler Entwicklung behandelt Safari localhost-Favicons großzügiger als Production-HTTPS. Immer auf deployter Domain validieren.
Safari Web Inspector Tipps
Unter Entwickler > Web-Inspektor anzeigen (Safari auf macOS) die Network-Requests der Seite prüfen. Nach dem Reload solltest du Requests auf deine icon-href-URLs sehen.
Im Speicher-Tab (Storage) unter Website-Daten nach Einträgen für deine Domain suchen. Favicons hängen manchmal an allgemeinen Cache-Einträgen, die "Verlauf löschen" nicht entfernt.
Auf dem iPhone: Einstellungen > Safari > Erweitert > Web-Inspektor aktivieren und Mac zum Debuggen verbinden. So siehst du, welche icon-URL mobile Safari tatsächlich lädt.
Lesemodus und Safari-Tab-Gruppen
Safari Lesemodus entfernt viel Page-Chrome, behält aber das Tab-Favicon in der Tab-Leiste. Scheitert das Favicon nur im Lesemodus, fehlen trotzdem Server-Tags - nicht der Lesemodus ist schuld.
Tab-Gruppen synchronisieren Favicons über iCloud. Ein veraltetes Icon in einem Tab der Gruppe kann sichtbar bleiben, bis alle Tabs der Gruppe geschlossen sind. Beim Debuggen die ganze Tab-Gruppe schließen und frisch öffnen.
Wenn du TestFlight- oder Enterprise-iOS-Builds nutzt, verhalten sich WebView-Favicons wie Safari. Dieselben link-Tags und Cache-Regeln gelten. Nur der Browser-Chrome unterscheidet sich.
Safari auf macOS mit "Komprimierte Tabs" zeigt Favicons kleiner, aber dieselbe Quelldatei. Fehlende Tags bleiben fehlende Tags - die Tab-Darstellung ändert nur die Größe, nicht die Verfügbarkeit der Icon-Datei.
Safari vs. Chrome, wenn nur Safari scheitert
| Ursache | Safari-spezifisch |
|---|---|
| Favicon-Cache | Schwerer zu leeren als Chrome |
| Fehlendes mask-icon | Betrifft nur angeheftete Tabs |
| apple-touch-icon-Verwechslung | iOS-Homescreen, nicht Tab |
| Intelligent Tracking Prevention | Blockiert same-origin-Favicons selten |
| Lokales file://-Testing | Verhält sich anders |
Chrome funktioniert, Safari nicht auf derselben URL nach Private-Window-Test: Safari-Cache oder mask-icon-Erwartung bei angehefteten Tabs vermuten.
Chrome-Guide: Chrome Favicon fehlt im Tab?.
Allgemeiner Workflow fehlende Icons: Favicon wird nicht angezeigt?.
Typische Safari-Favicon-Fehler
Homescreen-Icon von rel="icon" allein erwarten
iOS braucht apple-touch-icon für Kacheln. Tab-Tag allein reicht nicht.
Weißes oder kontrastarmes Favicon unsichtbar im Light Mode
Safari Light-Tabs haben helle Hintergründe. Blasse Icons verschwinden. Hell und dunkel testen.
Relative Pfade auf verschachtelten Seiten
Gleiches Problem wie andere Browser. /favicon.ico root-relative nutzen.
Nur Verlauf gelöscht, nicht Websitedaten
Safari kann Favicons behalten, wenn nur Verlauf gelöscht wird. Website-Daten verwalten für die Domain.
Unscharfes Icon nach Hochskalierung
Safari skaliert kleine PNGs. Quellgrafik zu klein wirkt kaputt. Siehe Favicon unscharf?.
Favicon nach Safari-Update plötzlich weg
Selten, aber nach großen macOS-Updates lohnt ein Test in Privatem Surfen. Wenn dort ok, Website-Daten für die Domain löschen. Server-Tags sind meist unverändert; nur der lokale Cache hängt.
Unterschied www und ohne www
Safari behandelt www.example.de und example.de als getrennte Origins für Cache-Zwecke. Icon auf einer Variante gefixt, andere Variante noch alt. Kanonische URL und Redirects konsistent halten. Beide Hosts mit Favicon Check prüfen.
Schritt-für-Schritt Safari-Fix
- Symptom klären: Tab, angehefteter Tab oder iOS-Homescreen.
- View-Source. Alle icon-bezogenen link-Tags listen.
- Jede href in Safari öffnen. 404s und HTTP-URLs fixen.
- mask-icon ergänzen, wenn angeheftete Tabs das Problem sind.
- apple-touch-icon ergänzen, wenn Homescreen das Problem ist.
- Deployen. Mit Favicon Check scannen.
- Safari Privates Surfen auf macOS und iOS testen.
- Safari beenden (
Cmd+Q), wenn normales Fenster noch veraltet. - Optional: Open Graph Scanner für breiteren Pre-Launch-Audit.
FAQ
Warum wird mein Favicon in Safari nicht angezeigt, in Chrome schon?
Meist Safari-Favicon-Cache oder fehlende Tags im Server-HTML. Private-Window-Test trennt Cache von Server-Problemen.
Wie leere ich Safari-Favicon-Cache?
Privates Fenster, Safari komplett beenden oder Websitedaten für die Domain unter Datenschutz entfernen. Caches leeren im Entwicklermenü hilft bei Page-Assets, nicht immer bei Favicons.
Braucht Safari apple-touch-icon für Tabs?
Nein. Tabs nutzen rel="icon". apple-touch-icon ist nur für iOS-Homescreen-Verknüpfungen.
Warum sieht mein angehefteter Tab in Safari falsch aus?
Angeheftete Tabs brauchen rel="mask-icon" mit einfarbigem SVG. Normales Favicon-PNG gilt nicht für die Silhouette.
Safari auf iPhone zeigt falsches Icon auf dem Homescreen
Das ist apple-touch-icon, nicht Tab-Favicon. PNG 180×180 ergänzen und href anpassen. Nutzer muss Verknüpfung neu anlegen.
Unterstützt Safari SVG-Favicons?
Neuere Versionen für rel="icon". PNG-Fallback für Zuverlässigkeit und ältere iOS-Versionen behalten.
Favicon auf macOS Safari ok, auf iOS Safari nicht?
Private Fenster auf beiden vergleichen. Gleiche URL inkl. www vs. non-www. iOS cached länger; Icon-Datei umbenennen zum Busten.
Icons ohne Safari-Cache prüfen?
Favicon Check auf Production-URL, dann Safari Privates Surfen auf einem Gerät, das die Site nie besucht hat.
Fazit
Safari-Tab-Favicons nutzen dieselben rel="icon"-Tags wie andere Browser, cachen sie aber persistent. Zuerst Server-HTML und Pfade fixen, mask-icon für angeheftete Tabs und apple-touch-icon für iOS-Homescreen separat ergänzen, dann mit Favicon Check und Privates Surfen validieren. Safari beenden, wenn der Server stimmt, dein Profil aber noch ein altes Icon zeigt.
