Favicon

Ein Favicon (kurz für „Favorites Icon“) ist das kleine Symbol, das Browser im Tab, in der Bookmark-Liste, im Verlauf, in Suchergebnissen und auf dem Mobile-Homescreen anzeigen, um eine Webseite visuell zu kennzeichnen. Es ist ein winziges Stück Branding, das paradoxerweise eine große Wirkung hat: Eine Webseite ohne Favicon wirkt unfertig oder vertrauensunwürdig, mit einem klar erkennbaren Favicon dagegen professionell und wiedererkennbar. Was 1999 mit Internet Explorer als 16×16-Pixel-.ico-Datei begann, ist heute eine kleine Suite aus Bildern in verschiedenen Größen und Formaten – inklusive Touch-Icons für iOS und PWA-Icons für Android.

Geschichte – vom `.ico` zur Icon-Suite

Ursprünglich verlangte Internet Explorer eine Datei namens favicon.ico direkt im Webroot. Die heutigen Anforderungen sind deutlich umfangreicher: jeder Browser, jedes Betriebssystem und jede Auflösung bringt eigene Wünsche. Eine moderne Webseite liefert deshalb meist:

favicon.ico mit 16×16, 32×32 und 48×48 px – Fallback für ältere Browser
favicon.svg – vektorbasiert, beliebig skalierbar, mit Dark-Mode-Variante möglich
PNG-Sets in 192×192, 512×512 px – für PWAs und Android-Homescreens
apple-touch-icon.png in 180×180 px – für iOS-Homescreens
Manifest-File (manifest.webmanifest) – für PWA-Installation

Der moderne `<head>`-Block

Eine zeitgemäße Favicon-Konfiguration sieht so aus:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Der Browser wählt das passende Icon automatisch nach Reihenfolge und Format. SVG hat den großen Vorteil, dass es in jeder Auflösung scharf bleibt und auch bei Dark-Mode-Anpassungen flexibel ist.

Dark Mode im Favicon

Mit Media Queries direkt im SVG lässt sich das Favicon für hellen und dunklen Browser-Hintergrund unterschiedlich darstellen:

<style>
  path { fill: #111016; }
  @media (prefers-color-scheme: dark) { path { fill: #f5f5f5; } }
</style>

Damit bleibt das Favicon in jedem System-Theme gut lesbar – ein kleines Detail, das im Tab sofort positiv auffällt.

Apple-Touch-Icons und iOS-Specials

iOS und Safari verlangen ein dediziertes apple-touch-icon.png mit 180×180 Pixeln. Ohne den Tag schneidet iOS automatisch einen Screenshot der Seite – meist unschön. Bonus: ein optionales apple-touch-startup-image zeigt einen Splash-Screen, wenn die Seite vom Homescreen gestartet wird, was die App-ähnliche Wirkung einer PWA deutlich verstärkt.

PWA-Icons im Web App Manifest

Soll die Seite zusätzlich als Progressive Web App installierbar sein, gehören die Icons ins Manifest:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
}

Die maskable-Variante ist wichtig: Android schneidet PWA-Icons in unterschiedlichen Formen (Kreis, Squircle, abgerundetes Rechteck) zu. Ein Icon mit purpose: maskable reserviert ausreichend Sicherheits-Padding, damit nichts abgeschnitten wird.

Tools zur Favicon-Erstellung

RealFaviconGenerator – Quasi-Standard; nimmt ein PNG/SVG entgegen und liefert ein komplettes Paket inklusive HTML-Snippet
Favicon.io – schnell, auch mit Text/Emoji als Quelle
Maskable.app – Vorschau und Editor speziell für Android-Maskable-Icons
Adobe Illustrator / Figma – wenn ein Vektor-Quelldokument schon vorliegt

Best Practices

SVG als Hauptformat – einmal designt, in jeder Auflösung scharf
Einfaches Design – ein Favicon ist 16×16 oder 32×32 px groß; alles, was komplexer ist als ein zentrales Symbol, geht in der Größe unter
Kontraststark – das Icon muss sowohl auf hellem als auch auf dunklem Browser-Background lesbar sein (Dark-Mode-SVG hilft)
Markenfarbe nutzen – ein farbiges Favicon ist im Tab deutlich erkennbarer als eine reine Silhouette
Cache beachten – Browser cachen Favicons aggressiv. Beim Wechsel mit einer Version-Query (?v=2) oder neuem Dateinamen erzwingen
Apple-Touch-Icon nicht vergessen – ohne ihn sieht der iOS-Homescreen schlecht aus

Häufige Fragen zum Favicon

Wo muss das Favicon liegen? Idealerweise direkt im Webroot (/favicon.ico), zusätzlich explizit referenziert per <link>-Tag, damit auch alternative Pfade funktionieren. Eine Suche auf /favicon.ico ist der historische Default; manche Tools (z. B. Browser-Crawler) prüfen ausschließlich dorthin.

Reicht ein einzelnes favicon.ico? Funktional ja – moderne Browser zeigen es. Aber für iOS-Homescreens, Android-PWA-Installation, gestochen scharfe Retina-Tabs und Dark-Mode-Anpassung braucht es das vollständige Set.

Hilft ein Favicon dem SEO? Direkt: minimal. Google zeigt Favicons aber seit 2019 mit den Suchergebnissen auf Mobile an – ein erkennbares Favicon kann die Klickrate (CTR) sichtbar erhöhen. Indirekt zahlt sich Investition in ein gutes Favicon also aus.

Warum sieht mein neues Favicon im Browser nicht aktualisiert aus? Browser cachen Favicons besonders aggressiv. Cache-Busting per ?v=2, Inkognito-Tab oder explizites Browser-Cache-Leeren hilft. Auf dem Server zusätzlich Cache-Control: max-age=0, must-revalidate für die Favicon-Datei setzen, falls Re-Deploys häufiger nötig sind.

Fazit

Ein Favicon ist eines der billigsten Branding-Assets überhaupt – maximal eine halbe Stunde Arbeit, lebenslange Wirkung in jedem Tab, jedem Bookmark und jedem Suchergebnis. Wer eine moderne Webseite betreibt, sollte ein komplettes Favicon-Set inklusive Apple-Touch- und PWA-Varianten ausliefern, statt nur ein altes .ico im Webroot zu hinterlassen. Im Rahmen jeder unserer Website-Entwicklungen richten wir das selbstverständlich ein – sprich uns für ein unverbindliches Beratungsgespräch gerne an.

Geschichte – vom .ico zur Icon-Suite

Der moderne <head>-Block