Favicon einer Website Prüfen: Icons Finden, Kontrollieren und Reparieren

Ein Favicon (kurz für „favourites icon“, Favoriten-Icon) ist eine kleine Bilddatei, die eine Website in Browser-Tabs, der Adressleiste, Lesezeichen, Verlaufslisten und den Ergebnisseiten von Suchmaschinen repräsentiert. Es ist typischerweise ein quadratisches Bild mit 16×16 oder 32×32 Pixeln, wobei moderne Browser je nach Kontext mehrere Größen anfordern – eine Startbildschirm-Verknüpfung auf iOS braucht ein 180×180-Pixel-Bild, während eine PWA-Installation auf Android 192×192- und 512×512-Pixel-Versionen benötigt.

Warum Favicons über das Branding hinaus zählen

Ein korrekt konfiguriertes Favicon bringt drei praktische Vorteile über die visuelle Identität hinaus. Erstens zeigt Google Favicons neben den Suchergebnissen in den SERPs an – ein fehlendes oder defektes Favicon erzeugt ein generisches Globus-Icon, was unprofessionell wirkt. Zweitens nutzen mobile Browser Favicon-Dateien, um Startbildschirm-Verknüpfungen zu erzeugen – eine Website ohne korrekt dimensioniertes Touch-Icon erhält stattdessen einen minderwertigen Screenshot als Verknüpfung. Drittens helfen Tab-Favicons den Nutzern, Ihren Tab zu identifizieren und dorthin zurückzunavigieren, wenn viele Tabs offen sind.

Das Legacy-Format favicon.ico

Das `.ico`-Format stammt vom Internet Explorer aus dem Jahr 1999 und wurde zum universellen Standard, weil Browser automatisch `/favicon.ico` aus dem Root jeder Domain anfordern – ohne dass ein Link-Tag nötig ist. Eine moderne `.ico`-Datei ist ein Container, der mehrere Größen (typischerweise 16×16 und 32×32) in einer Datei hält. Trotz seines Alters bleibt `favicon.ico` als universeller Fallback für Legacy-Browser, E-Mail-Clients und Tools wichtig, die keine HTML-Link-Tags lesen.

Es gibt drei zuverlässige Methoden, um die Favicon-URL einer Website zu finden. Die schnellste deckt die meisten Fälle ab; die anderen sind Ausweichoptionen für Websites mit benutzerdefinierten Konfigurationen.

Methode 1: der Standardpfad /favicon.ico

Hängen Sie `/favicon.ico` an eine beliebige Domain an und öffnen Sie es in einem Browser-Tab. Zum Beispiel: `https://example.com/favicon.ico`. Wenn ein Icon-Bild im Tab erscheint und auf der Seite gerendert wird, existiert die Datei und lädt korrekt. Wenn Sie eine Fehlerseite oder eine leere weiße Seite sehen, fehlt die Datei oder der Server ist falsch konfiguriert. Diese Methode funktioniert bei der Mehrzahl der Websites mit konventionellem Pfad.

Methode 2: Seitenquelltext nach Link-Tags durchsuchen

Klicken Sie mit der rechten Maustaste auf eine beliebige Seite und wählen Sie „Seitenquelltext anzeigen“ (oder drücken Sie Strg+U unter Windows, Cmd+U auf dem Mac). Suchen Sie im HTML nach `rel="icon"` oder `rel="shortcut icon"`. Der Wert des `href`-Attributs im passenden `<link>`-Tag ist der exakte Favicon-Pfad. So finden Sie benutzerdefinierte Favicon-Orte – Websites hinter einem CDN nutzen oft absolute URLs wie `https://cdn.example.com/assets/favicon.svg` statt des Standard-Root-Pfads.

Methode 3: das Web-App-Manifest prüfen

Progressive Web Apps deklarieren ihre Icons in einer `manifest.json`-Datei, die über `<link rel="manifest">` im HTML-Head verlinkt ist. Öffnen Sie die Manifest-URL und suchen Sie das `icons`-Array – jeder Eintrag listet einen Bildpfad und seine Pixelgröße. So handhaben Android und Chrome PWA-Installationen, und im Manifest werden oft als einzige Stelle die PNG-Pfade 192×192 und 512×512 deklariert.

Zu prüfen, ob ein Favicon korrekt konfiguriert ist, erfordert mehr, als nur zu bestätigen, dass die Datei existiert. Ein Favicon kann existieren und dennoch nicht angezeigt werden, wenn der Server den falschen Content-Typ zurückgibt, die Datei für den angeforderten Kontext zu klein ist oder der Browser eine veraltete gecachte Version hat.

Die Anzahl der Favicon-Dateien, die eine gut konfigurierte Website braucht, ist mit der Unterstützung moderner Browser deutlich gesunken. Zu verstehen, welche Größen weiterhin nötig sind – und welche inzwischen redundant sind –, erlaubt Ihnen einen minimalen, korrekten Favicon-Satz zu bauen.

Das Argument für SVG-Favicons

SVG-Favicons werden seit 2021 von allen gängigen Browsern unterstützt. Eine einzige `favicon.svg`-Datei rendert perfekt in jeder Größe – 16×16 im Tab, 32×32 in der Lesezeichenleiste oder jede Zwischenauflösung auf High-DPI-Bildschirmen. SVG unterstützt zudem eine `prefers-color-scheme`-Media-Query innerhalb der Datei, sodass das Favicon automatisch zwischen einer hellen und einer dunklen Version je nach OS-Theme wechselt. Eine SVG-Datei ersetzt jedes PNG-Favicon außer dem Apple-Touch-Icon und den PWA-Manifest-Icons.

Die meisten Favicon-Ausfälle fallen in eine kleine Zahl vorhersagbarer Kategorien. Jede hat eine direkte Lösung, sobald Sie wissen, wo Sie suchen müssen.

Favicon erscheint nicht im Browser-Tab

Die häufigste Ursache ist ein fehlendes `<link rel="icon">`-Tag in Kombination mit einer fehlenden `/favicon.ico`-Datei. Browser fallen automatisch auf die Anfrage von `/favicon.ico` zurück, aber wenn diese Datei 404 zurückgibt, erscheint kein Icon. Beheben Sie es, indem Sie die Datei im Domain-Root ablegen und ein `<link rel="icon" href="/favicon.ico">`-Tag in Ihren HTML-`<head>` einfügen. Bei benutzerdefinierten Pfaden ist das Link-Tag Pflicht – der Browser rät keine benutzerdefinierten Orte.

Favicon erscheint als leeres oder defektes Bild

Ein defektes Favicon-Icon im Tab bedeutet meist, dass die Datei existiert, aber kein gültiges Bildformat ist. Die häufigste Ursache: eine PNG-Datei mit `.ico`-Endung ohne ordnungsgemäße Konvertierung zu speichern. Nutzen Sie den Bildformat-Detektor, um das tatsächliche Dateiformat zu bestätigen – eine Datei namens `favicon.ico` kann intern ein PNG, JPEG oder HTML-Dokument sein. Die Lösung ist, eine echte `.ico`-Datei mit dem Favicon-Generator zu erzeugen.

Google zeigt das falsche Favicon in den Suchergebnissen

Google cached Favicons und aktualisiert sie unabhängig von regulären Crawls – es kann Tage bis Wochen dauern, bis ein neues Favicon in den SERPs erscheint. Um den Prozess zu beschleunigen: Verifizieren Sie, dass die Favicon-URL öffentlich zugänglich ist (nicht durch robots.txt blockiert und nicht hinter einer Authentifizierung), bestätigen Sie, dass die Datei den korrekten Content-Type-Header hat, und beantragen Sie eine Neuindizierung in der Google Search Console. Google verlangt ein Favicon von mindestens 48×48 Pixeln für die SERP-Anzeige; kleinere Bilder werden ignoriert.

Altes Favicon bleibt nach einem Update bestehen

Favicon-Caches der Browser sind hartnäckig und respektieren HTTP-Cache-Header nicht so wie reguläre Ressourcen. Ein Hard-Refresh (Strg+Shift+R oder Cmd+Shift+R) erzwingt in den meisten Browsern ein erneutes Abrufen des Favicons. In Chrome können Sie ihn über DevTools → Application → Storage → Clear Site Data leeren. Als Deployment-Strategie erzwingt das Umbenennen der Favicon-Datei oder das Anfügen eines Cache-Busting-Query-Strings an den href des Link-Tags, dass alle Browser sofort die neue Version abrufen.

Alle benötigten Favicon-Größen von Hand von Grund auf zu erstellen ist mühsam und fehleranfällig. Der praktische Ansatz: mit einem hochauflösenden Quellbild starten und alle benötigten Größen automatisch erzeugen.

Anforderungen an das Quellbild

• Mindestens 512×512 Pixel – das ist die größte erforderliche Größe (PWA-Splash-Screen) und dient als Downsampling-Quelle für alle kleineren Größen
• Quadratisches Seitenverhältnis – Favicons sind immer quadratisch; eine nicht-quadratische Quelle wird beschnitten oder verzerrt
• Transparenter Hintergrund – ein transparentes PNG funktioniert besser als ein weißer Hintergrund, der als weißes Quadrat in Dark-Mode-Tabs erscheint
• Einfaches Design – feine Details und dünne Linien wirken bei 16×16 px matschig; Logos mit dicken Strichen und geringer Komplexität funktionieren in kleinen Größen am besten
• PNG- oder SVG-Format – beide bewahren die Qualität in jeder Größe; vermeiden Sie JPEG, das an harten Kanten Kompressionsartefakte erzeugt

Den Favicon-Generator verwenden

Laden Sie Ihr Quellbild in den Favicon- und App-Icon-Generator hoch. Das Tool erzeugt den vollständigen Standard-Favicon-Satz – `favicon.ico` (16×16 und 32×32), `favicon-32x32.png`, `apple-touch-icon.png` (180×180), `android-chrome-192x192.png` und `android-chrome-512x512.png` – zusammen mit den exakten HTML-Link-Tags zum Einfügen in Ihren `<head>`-Bereich. Die gesamte Erzeugung läuft in Ihrem Browser; Ihr Bild wird nie auf einen Server hochgeladen.

Einen bestehenden Favicon-Satz analysieren

Wenn Sie bereits einen Favicon-Satz haben und wissen möchten, welche Dateien für moderne Browser redundant sind, listet der Favicon-Bundle-Größen-Analysator jede Datei Ihres Satzes auf, identifiziert veraltete Größen (etwa die 57×57- und 72×72-iOS-Icons, die modernes iOS ignoriert) und empfiehlt den minimalen modernen Satz. Einen aufgeblähten Favicon-Satz von 15 auf 5 Dateien zu verkleinern, reduziert das Seitengewicht bei jeder Anfrage spürbar.

Die Favicon-Landschaft hat sich deutlich stabilisiert. Hier ist der aktuelle Konsens zur minimal korrekten Implementierung für 2026.

Der minimale moderne Favicon-Satz

Sie brauchen fünf Dateien und fünf Link-Tags. Fügen Sie `favicon.svg` als primäres Icon hinzu (alle modernen Browser), `favicon.ico` als Fallback (Legacy und Tools, die kein HTML parsen), `apple-touch-icon.png` mit 180×180 für iOS sowie `android-chrome-192x192.png` plus `android-chrome-512x512.png`, referenziert in Ihrer `manifest.json` für PWA-Installationen. Die HTML-Tags der ersten drei kommen in Ihren `<head>`; die PWA-Icons werden ausschließlich im Manifest deklariert.

SVG-Favicons unterstützen den Dark Mode, skalieren perfekt in jeder Auflösung und ersetzen alle PNG-Größen, die moderne Browser brauchen. Favicon.ico existiert rein als Fallback für die lange Reihe nicht-browserbasierter Clients.

Dark-Mode-Favicons

SVG-Favicons können eine `prefers-color-scheme`-Media-Query einbetten, um im hellen und dunklen OS-Theme verschiedene Farben zu zeigen. Dies ist das einzige Favicon-Format, das Theme-abhängige Icons ohne JavaScript unterstützt. Ein Dark-Mode-SVG-Favicon hält Ihr Branding in dunklen Browser-Themes lesbar, wo ein helles Icon vor dem Tab-Hintergrund zu verschwinden droht.