Favicon (kurz für Favorite Icon) ist das kleine Symbol, das eine Website in Browser-Tabs, Lesezeichen, dem Verlauf und auf Smartphone-Homescreens repräsentiert. Obwohl nur wenige Pixel groß, ist das Favicon ein wichtiges Branding-Element, das die Wiedererkennung einer Marke stärkt.
Geschichte und Bedeutung
Das Favicon wurde 1999 von Microsoft mit dem Internet Explorer 5 eingeführt. Ursprünglich ein 16x16 Pixel großes ICO-Bild, hat sich das Favicon zu einem vielseitigen Branding-Element entwickelt, das auf verschiedenen Plattformen in unterschiedlichen Größen erscheint.
In einer Welt, in der Nutzer dutzende Tabs gleichzeitig geöffnet haben, ist das Favicon oft das einzige sichtbare Identifikationsmerkmal einer Website. Ein fehlendes oder generisches Favicon wirkt unprofessionell.
Moderne Favicon-Formate
SVG-Favicon
SVG-Favicons sind die modernste Lösung: unbegrenzt skalierbar, mit CSS stylebarer und Dark-Mode-fähig. Ein einziges SVG ersetzt mehrere PNG-Dateien in verschiedenen Größen.
PNG-Favicons
Für maximale Kompatibilität werden PNG-Favicons in mehreren Größen bereitgestellt: 16x16, 32x32, 96x96 und 192x192 Pixel.
ICO-Format
Das klassische ICO-Format kann mehrere Größen in einer Datei bündeln. Als Fallback für ältere Browser noch relevant.
Apple Touch Icon
Ein 180x180 Pixel großes PNG für iOS-Geräte, das auf dem Homescreen erscheint, wenn Nutzer eine Website als App speichern.
Favicon-Implementierung
Moderne Favicon-Einbindung umfasst mehrere Elemente im HTML-Head:
- SVG-Favicon für moderne Browser
- ICO-Fallback für ältere Browser
- Apple Touch Icon für iOS
- Web App Manifest mit Icons für Progressive Web Apps
Favicon und Dark Mode
SVG-Favicons können per CSS Media Query auf den Dark Mode reagieren. So wird auf hellem Hintergrund ein dunkles Logo angezeigt und auf dunklem Hintergrund ein helles – automatisch und ohne JavaScript.
Favicon-Design-Tipps
- Einfachheit: Bei 16x16 Pixeln muss das Design extrem reduziert sein
- Markenfarbe: Die Primärfarbe der Marke sorgt für Wiedererkennung
- Kein Text: Buchstaben sind bei Favicon-Größen nicht lesbar (Ausnahme: einzelne Buchstaben wie das P von PAKU)
- Kontrast: Das Icon muss auf hellen und dunklen Tab-Leisten erkennbar sein
- Konsistenz: Favicon, Open Graph-Bild und Logo sollten eine visuelle Familie bilden
Favicon-Generatoren
Tools wie RealFaviconGenerator erstellen aus einem hochauflösenden Quellbild alle benötigten Favicon-Varianten und den zugehörigen HTML-Code. In Next.js können Favicons über die Metadata-API oder direkt im app/-Verzeichnis konfiguriert werden.
Für professionelles Webdesign ist das Favicon ein kleines Detail mit großer Wirkung – es stärkt die Markenidentität an einem der meistgesehenen Berührungspunkte.