Was ist ein Favicon?
Ein Favicon (kurz für „Favorite Icon") ist das kleine Symbol, das im Browser-Tab, in den Lesezeichen und in der Verlaufsliste angezeigt wird. Es hilft Nutzern, deine Website schnell zu erkennen und ist ein wichtiger Teil der Markenidentität.
Moderne Websites benötigen Favicons in verschiedenen Größen: für Desktop-Browser, mobile Geräte, App-Icons auf dem Homescreen und Progressive Web Apps (PWAs). Unser Generator erstellt alle nötigen Formate automatisch.
Wichtige Favicon-Größen
16×16 Pixel: Klassische Größe für Browser-Tabs und Lesezeichen. 32×32 Pixel: Windows-Taskleiste und Desktop-Verknüpfungen. 48×48 Pixel: Windows-Site-Icons.
180×180 Pixel: Apple Touch Icon für iOS-Geräte (Homescreen-Bookmark). 192×192 & 512×512 Pixel:Android-Icons und PWA-Manifest. Je größer das Ausgangsbild, desto besser die Qualität in allen Größen.
ICO vs PNG: Welches Format?
Das ICO-Format (.ico) ist das klassische Favicon-Format. Es kann mehrere Größen in einer einzigen Datei enthalten und wird von allen Browsern unterstützt – auch älteren. Die Datei favicon.ico im Root-Verzeichnis wird automatisch erkannt.
PNG-Favicons bieten bessere Bildqualität, echte Transparenz und sind kleiner. Moderne Browser unterstützen PNG vollständig. Empfehlung: favicon.ico für maximale Kompatibilität plus PNG für hochauflösende Displays.
Favicon einbinden
Das klassische Favicon (favicon.ico) im Root-Verzeichnis wird von den meisten Browsern automatisch gefunden. Für zusätzliche Größen und Formate brauchst du HTML-Link-Tags im Head-Bereich deiner Seite.
Wichtige Link-Tags: rel="icon" für Standard-Favicons,rel="apple-touch-icon" für iOS, und dasmanifest.json für PWAs. Unser Generator liefert den kompletten HTML-Code zum Kopieren.
Tipps für gute Favicons
Einfach halten: Das Favicon ist winzig – komplexe Logos werden unleserlich. Verwende ein vereinfachtes Symbol oder den ersten Buchstaben. Kontrast beachten: Das Icon muss sowohl auf hellem als auch dunklem Hintergrund erkennbar sein.
Quadratisch starten: Verwende ein quadratisches Ausgangsbild (mindestens 512×512 Pixel). Transparenz nutzen:PNG-Favicons können transparente Hintergründe haben – perfekt für abgerundete Icons oder unregelmäßige Formen.
Favicon für PWAs
Progressive Web Apps benötigen zusätzliche Icons im manifest.json. Die wichtigsten Größen sind 192×192 und 512×512 Pixel. Diese werden als App-Icon auf dem Homescreen verwendet und sollten als PNG mit transparentem oder farbigem Hintergrund vorliegen.
Browser-Caching
Favicons werden stark gecacht. Wenn du dein Favicon änderst, kann es dauern, bis Nutzer das neue Icon sehen. Tricks: Dateinamen ändern (z.B. favicon-v2.ico), Browser-Cache leeren, oder einen Query-String anhängen (?v=2).