Was ist ein Favicon (und welche Größen brauche ich)?

Ein Favicon (kurz für "favorite icon") ist die kleine Grafik, die Browser neben dem Seitentitel im Tab, in der Lesezeichenleiste, im Verlauf und zunehmend auch in Suchergebnissen anzeigen. Der Name stammt aus Internet Explorer 5 von 1999, wo das Icon ausschließlich als Lesezeichen-Kennung diente. 25 Jahre später funktionieren dasselbe Dateiformat und dieselben HTML-Tags immer noch, aber die Rolle des Favicons hat sich so weit über diesen ursprünglichen Zweck hinaus entwickelt, dass "einfach eine 16x16 .ico hochladen" nicht mehr die richtige Antwort ist.

Wofür ein Favicon heute tatsächlich verwendet wird

Moderne Browser und Betriebssysteme greifen für eine ganze Reihe von Kontexten auf das Favicon-Set zurück, jeder mit eigenen Größen- und Format-Erwartungen:

• Browser-Tabs und Lesezeichen. Üblicherweise mit 16x16 oder 32x32 CSS-Pixeln gerendert, aber auf hochauflösenden Displays zieht der Browser eine größere Variante und skaliert sie runter. Ein verpixeltes Mini-Icon neben einem gestochen scharfen Seitentitel wirkt veraltet.
• Suchergebnisse. Google zeigt seit 2019 Favicons neben den mobilen Suchergebnissen und seit 2023 auch in der Desktop-Suche. Das Icon muss mindestens 48x48 sein, Vielfache von 48 werden empfohlen, und die Datei muss crawlbar sein.
• iOS und Android Home-Screen. Wenn ein Nutzer "Zum Home-Bildschirm hinzufügen" wählt, holt iOS das apple-touch-icon (180x180), Android holt sich Icons aus dem Web App Manifest (typisch 192x192 und 512x512). Ohne explizite Deklaration generieren beide Plattformen einen unscharfen Screenshot als Fallback.
• Progressive Web Apps. PWAs, die als eigenständige Apps installiert werden, beziehen ihre Icons fürs App-Launcher, App-Switcher und Splash-Screen aus dem Web App Manifest. Falsche Größen hier bedeuten eine installierbare Seite, die kaputt aussieht.
• macOS Safari Pinned Tabs. Nutzt für angeheftete Tabs ein separates monochromes SVG (mask-icon). Ein Randfall, aber trivial zu unterstützen.
• Windows Tile Pinning. Edge und das Windows-Startmenü können Seiten als Kacheln anpinnen, wofür ein eigenes Set an msapplication-TileImage-Deklarationen nötig ist.

Die pragmatische Konsequenz: du brauchst ein kleines Set an Dateien (typisch vier bis sechs), nicht eine einzelne .ico, und eine Handvoll HTML-Link-Tags zur Deklaration.

Welche Dateiformate relevant sind

Drei Formate sind 2026 relevant, und die Zeiten, in denen man alle gleichzeitig brauchte, sind vorbei.

• PNG. Der richtige Standard. Universell unterstützt, verlustfrei, transparente Hintergründe funktionieren überall. Pro Zielgröße eine PNG-Datei.
• SVG. Wird von jedem modernen Browser für Favicons unterstützt. Eine SVG-Datei skaliert auf jede Größe und bleibt auf hochauflösenden Displays scharf, ohne dass separate Retina-Assets nötig sind. Einschränkungen: SVG-Favicons müssen in sich geschlossen sein (keine externen Referenzen, keine externen Stylesheets, keine eingebetteten Schriften), und Safari unterstützt sie nur in Kombination mit einem PNG-Fallback.
• ICO. Das alte Container-Format, das mehrere Größen in einer Datei halten kann. Immer noch sinnvoll für genau einen Fall: den Request auf /favicon.ico im Site-Root, den jeder Browser, jeder RSS-Reader und jeder Crawler implizit absetzt, auch wenn du nicht darauf verlinkst. Einen 404 zurückzugeben ist harmlos, erzeugt aber Rauschen in den Server-Logs. Eine kleine Multi-Size-.ico (16x16, 32x32, 48x48 in einer Datei) bringt das zum Schweigen.

WebP und AVIF sind für Content-Bilder exzellent, werden für Favicons aber nicht eingesetzt, weil die Browser-Unterstützung in dieser Rolle inkonsistent ist. Bei PNG und SVG bleiben.

Die tatsächliche Dateiliste für 2026

Ein solides, zukunftssicheres Favicon-Set deckt alle obigen Kontexte mit diesem Minimum ab:

• favicon.ico — multi-size (16, 32, 48), im Site-Root abgelegt
• favicon.svg — skalierbar, von modernen Browsern bevorzugt
• favicon-96x96.png — expliziter Raster-Fallback in einer komfortablen mittleren Größe
• apple-touch-icon.png — 180x180, ohne Transparenz (iOS rundet die Ecken selbst ab)
• web-app-manifest-192x192.png — Android Home-Screen, PWA-Launcher
• web-app-manifest-512x512.png — PWA-Splash-Screen, große Tile-Kontexte

Das sind sechs Dateien. Das passende HTML im <head>:

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Und ein minimales site.webmanifest:

{
  "name": "Dein Seitenname",
  "short_name": "Seite",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Das deckt Browser-Tabs, Lesezeichen, Google-Suchergebnisse, iOS-Home-Screen, Android-Home-Screen und PWA-Installation ab. Alles darüber hinaus ist Randfall-Territorium.

Design-Vorgaben für ein Favicon, das tatsächlich lesbar ist

Der schwierigste Teil am Favicon-Design ist nicht der Export, sondern etwas zu entwerfen, das in 16x16 lesbar bleibt. Ein paar Faustregeln, die zuverlässig gute Ergebnisse liefern:

• Radikal vereinfachen. Ein vollständiges Logo funktioniert als 16x16-Favicon selten. Setze auf ein dominantes Element: einen Buchstaben, ein Symbol, eine abstrakte Marke. Alles mit dünnen Strichen oder Feindetails verschwimmt zu Brei.
• Starker Kontrast. Das Favicon sitzt in einem hellen oder dunklen Browser-Chrome, das du nicht vorhersagen kannst. Weiß auf transparent verschwindet in hellen Themes; Schwarz auf transparent verschwindet in dunklen Themes. Nimm einen vollflächigen Hintergrund oder gestalte für beide Modi (eine SVG mit prefers-color-scheme-Media-Queries funktioniert).
• Quadratisches Format mit sicherem Rand. Auf quadratischer Fläche entwerfen, aber rund 10% Padding zum Rand lassen. Manche Plattformen (iOS, Android Adaptive Icons) beschneiden oder maskieren das Icon, und ein Entwurf, der bis an die Kante geht, wird abgeschnitten.
• In Originalgröße testen. Ein 16x16-Icon bei 200% Zoom zu betrachten ist trügerisch. In 100% neben anderen Browser-Tabs rendern, um zu sehen, wie es tatsächlich um Aufmerksamkeit konkurriert.

WordPress: wie das Site-Icon funktioniert

WordPress hat seit Version 4.3 eingebaute Favicon-Unterstützung. Im Admin unter Design, Anpassen, Website-Informationen gibt es ein Feld "Website-Icon", das ein einzelnes quadratisches Bild ab 512x512 akzeptiert. WordPress generiert und liefert daraus dann automatisch die verschiedenen Favicon-Größen.

Die automatische Generierung deckt favicon.ico, apple-touch-icon in 180x180 und die Standard-PNG-Größen im HTML-Head ab. Ein Web App Manifest wird standardmäßig nicht erzeugt, sodass eine PWA-Installation auf das apple-touch-icon zurückfällt. Für die meisten Seiten reicht das.

Die Schwächen des eingebauten Site-Icons: es kann nicht unterschiedliche Dateien pro Auflösung ausliefern (keine SVG-Unterstützung über Raster-Konvertierung hinaus), und es erzeugt kein Manifest mit der größeren 512x512-Größe, die PWA-Installationen und Android-Splash-Screens bevorzugen. Für eine Seite, der das PWA-Erscheinungsbild wirklich wichtig ist, ist es sauberer, das Site-Icon mit manuellen <link>-Tags über die functions.php eines Child-Themes zu ergänzen. Plugins wie RealFaviconGenerator (auch ein guter web-basierter Generator, wenn du den manuellen Export überspringen willst) handhaben das von Anfang bis Ende.

So prüfst du, ob dein Favicon-Setup funktioniert

1. Tab-Check. Seite im Inkognito-Fenster öffnen (um zwischengespeicherte Favicons zu umgehen) und prüfen, ob das Icon neben dem Titel erscheint. Mindestens Chrome, Firefox und Safari testen.
2. Root-Request. Direkt /favicon.ico aufrufen. Sollte einen 200 mit Icon zurückgeben, keinen 404. Viele Seiten übersehen das, selbst wenn ihr HTML einen sauberen <link rel="icon"> enthält.
3. iOS Home-Screen. Auf einem iPhone in Safari auf "Teilen" und "Zum Home-Bildschirm hinzufügen" tippen. Die Vorschau sollte dein scharfes 180x180-Icon zeigen, keinen unscharfen Screenshot der Seite.
4. Google-Suche. Auf einem Mobilgerät nach deiner Seite suchen. Das Icon sollte neben dem Ergebnis erscheinen. Wenn nicht, zeigt Googles URL https://www.google.com/s2/favicons?domain=deineseite.de, was der Crawler aktuell zwischengespeichert hat.
5. Lighthouse. Das Lighthouse-PWA-Audit in den Chrome DevTools fängt fehlende Manifest-Einträge, falsche Größen und andere Deklarationsprobleme.

Typische Probleme und ihre Ursachen

• "Mein Favicon erscheint nicht." Fast immer ein Caching-Problem. Browser cachen Favicons extrem aggressiv. Favicon-Cache leeren (Chrome: chrome://favicon-cache, Firefox: Cache und Offline-Daten löschen) oder im Inkognito testen.
• "Auf Desktop sichtbar, auf Mobile nicht." Meist ein fehlendes apple-touch-icon oder ein falscher Manifest-Pfad. Mobile Browser bevorzugen ihre plattformspezifischen Icons gegenüber dem generischen <link rel="icon">.
• "Google zeigt einen generischen Globus." Entweder ist das Favicon zu klein (unter 48x48), oder die Datei ist nicht crawlbar (von robots.txt blockiert, hinter Authentifizierung, falscher Content-Type), oder Google hat schlicht noch nicht neu gecrawlt. Recrawl-Latenz für Favicons sind oft Wochen.
• "Das Home-Screen-Icon hat einen weißen Kasten drumherum." Apple-touch-icon-Bilder sollten keine Transparenz haben; iOS rendert transparente Hintergründe nicht in deiner Theme-Farbe, sondern lässt sie weiß. Mit vollflächigem Hintergrund speichern, der zu deiner Marke passt.
• "Das Icon wirkt auf Retina-Displays unscharf." Es wird nur die kleine favicon.ico ausgeliefert. Moderne Browser nutzen die SVG- oder 96x96-PNG-Variante, wenn du sie deklarierst; prüfen, ob das HTML diese Link-Tags tatsächlich enthält.

Was InspectWP prüft

Im Favicon-Abschnitt eines InspectWP-Reports wird verifiziert, dass im HTML-Head ein Favicon deklariert ist, dass die URL /favicon.ico eine gültige Antwort liefert und dass ein apple-touch-icon für die iOS-Home-Screen-Unterstützung gesetzt ist. Fehlt eines davon, ist das ein Befund mit niedriger Schwere, aber der kumulative Effekt auf den ersten Eindruck (Suchergebnisse, Lesezeichen, mobiler Home-Screen) ist real. Eine Seite, die überall gepflegt aussieht, außer beim Favicon, wirkt unfertig. Die gute Nachricht: es ist ein einmaliges Setup, das, gut gemacht, nie wieder angefasst werden muss.