Projekt starten
Start project

What is a favicon? Meaning, use & example

Porträt von Tobias Berger, junger Mann mit lockigen Haaren und blauem BSC-Pulli, lächelnd in die Kamera blickend.

by Tobias Berger / updated 03.10.2025 / 3 min. Reading time

Porträt von Tobias Berger, junger Mann mit lockigen Haaren und blauem BSC-Pulli, lächelnd in die Kamera blickend.

by Tobias Berger / updated 03.10.2025 /
3 min. Reading time

Kurz erklärt: Ein Favicon ist das kleine Symbol deiner Website – es erscheint im Browser-Tab, in Lesezeichen, in der Verlaufshistorie und häufig auch mobil in den Google-SERPs. Es stärkt Wiedererkennung, wirkt professionell und hilft Nutzer:innen, deine Seite schneller wiederzufinden.
Beispiel-Favicon von BSC Webdesign im Browser-Tab vergrößert dargestellt – klare Kanten und hoher Kontrast für gute Erkennbarkeit
Beispiel: Ein kontrastreiches, reduziertes Favicon bleibt auch in 16×16 klar erkennbar.

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).
Praxis-Shortcut: Du musst nicht selbst auf 16×16, 32×32, 48×48, 180×180 & Co. runterskalieren. Ein Favicon-Generator erstellt dir alle nötigen Größen (PNG/ICO, optional SVG) plus Einbindungs-Snippets – ideal, wenn du schnell ein sauberes Set brauchst.

Nächste Schritte (intern verlinkt)

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.

For browsers, 16×16 and 32×32 (PNG/ICO) are sufficient. Additionally 48×48 (Google/Android), 180×180 (Apple Touch) and a /favicon.ico in the root as fallback. Details: “Favicon sizes” (/favicon-groessen-website/).

Usually the wrong path, MIME type, cache or the link in <head> are to blame. Check network status (200), (image/png or image/x-icon) and clear browser/CDN cache. Step-by-step: “Favicon is not displayed” (/favicon-nicht-angezeigt-loesungen/).

PNG for the common sizes (16/32/48/180/192), ICO as root fallback for old environments, SVG only with PNG/ICO fallback. This gives you sharpness + maximum compatibility. Basics: “Create Favicon 2025” (/favicon-create-2025-free-generators/).

In this article

Porträt von Tobias Berger, junger Mann mit lockigen Haaren und blauem BSC-Pulli, lächelnd in die Kamera blickend.

Hey, I'm Tobias!

Thanks for taking the time to read this post – really cool that you’re interested in website & web design!
You can find many more tips on design, technology and SEO on our blog. And if you have any questions or need support with your own website, we at BSC Webdesign are always happy to help.

See for yourself now