Was ist ein Favicon? Bedeutung, Einsatz & Beispiel
von Tobias Berger / updated 03.10.2025 / 3 Min. Lesezeit
von Tobias Berger / updated 03.10.2025 /
3 Min. Lesezeit
Was ist ein Favicon? Definition & Bedeutung
Definition: Das Favicon (aus „favorite“ + „icon“) ist eine stark reduzierte Bildmarke deiner Website, meist als 16×16-Pixel-Icon. Es fungiert als Mini-Logo in der UI des Browsers und an weiteren Touchpoints. Gerade bei vielen geöffneten Tabs ist es der schnellste visuelle Anker für deine Marke. Wichtig für Markenwirkung: Konsistente Favicons vermitteln Sorgfalt und Professionalität – ein fehlendes oder verwaschenes Icon fällt sofort negativ auf. Halte Formen simpel, Kontraste stark und die Bildmarke eindeutig erkennbar.Wo erscheint ein Favicon?
- Browser-Tabs: Neben dem Seitentitel – der häufigste Kontaktpunkt.
- Lesezeichen & Verlauf: Erleichtert das Wiederfinden und steigert Wiederbesuche.
- Mobile SERPs: In vielen mobilen Suchergebnissen sichtbar – Branding-Boost im Feed.
- Homescreen-Shortcuts: Als App-ähnliches Icon auf iOS/Android (Apple-Touch-Icon).
Was macht ein gutes Favicon aus?
- Reduzierte Form: Keine filigranen Details; notfalls nur Initiale(n) oder abstrahiertes Logo-Element.
- Hoher Kontrast: Funktioniert auf hellen, grauen und dunklen Hintergründen.
- Konsistenz zur CI: Farben/Formen sollten sofort deiner Marke zuordenbar sein.
- Mehrere Größen/Formate: Für Tabs, mobile SERPs und Homescreen optimiert (siehe Größen-Guide).
Nächste Schritte (intern verlinkt)
- Größen & Formate im Überblick: Welche Pixelmaße & Dateiarten du wirklich brauchst – zum Größen-Guide.
- In Minuten startklar: Schritt-für-Schritt & die besten kostenlosen Tools – zum Favicon-Tutorial & Generatoren.
- Icon wird nicht angezeigt? Häufige Ursachen (Pfad, MIME-Type, Cache) – zur Troubleshooting-Anleitung.
Fazit
Kurzfazit: Ein gutes Favicon ist klein, aber wirkungsvoll: Es verbessert Orientierung, Wiedererkennung und die wahrgenommene Qualität deiner Website. Setze auf klare Formen, starke Kontraste und ein automatisch generiertes Größen-Set – und binde es konsistent auf allen Seiten ein.
Welche Favicon-Größen brauche ich wirklich?
Für Browser reichen 16×16 und 32×32 (PNG/ICO). Zusätzlich 48×48 (Google/Android), 180×180 (Apple Touch) und ein /favicon.ico im Root als Fallback. Details: „Favicon-Größen“ (/favicon-groessen-website/).
Warum wird mein Favicon nicht angezeigt (Browser/Google)?
Meist sind falscher Pfad, MIME-Type, Cache oder der Link im <head> schuld. Prüfe Network-Status (200), type (image/png bzw. image/x-icon) und leere Browser/CDN-Cache. Schritt-für-Schritt: „Favicon wird nicht angezeigt“ (/favicon-nicht-angezeigt-loesungen/).
PNG, ICO oder SVG – welches Format ist am besten?
PNG für die gängigen Größen (16/32/48/180/192), ICO als Root-Fallback für alte Umgebungen, SVG nur mit PNG/ICO-Fallback. So erhältst du Schärfe + maximale Kompatibilität. Grundlagen: „Favicon erstellen 2025“ (/favicon-erstellen-2025-kostenlose-generatoren/).
In diesem Artikel
Hey, ich bin Tobias!
Danke, dass du dir die Zeit genommen hast, diesen Beitrag zu lesen – richtig cool, dass dich das Thema Website & Webdesign interessiert!
Auf unserem Blog findest du noch viele weitere Tipps rund um Design, Technik und SEO. Und falls du Fragen hast oder Unterstützung bei deiner eigenen Website brauchst: Wir von BSC Webdesign stehen dir jederzeit gerne zur Seite.