Technik

Was ist ein Favicon, und warum braucht deine Website eins?

Das winzige Symbol im Browser-Tab ist oft das Erste, was ein Besucher bemerkt — und das Erste, das eine unfertige Website verrät.

Was es ist

Ein Favicon (kurz für "favorite icon") ist das kleine quadratische Bild, das neben dem Titel deiner Seite im Browser-Tab, in einer Lesezeichenliste und manchmal im Browserverlauf und in Suchvorschlägen erscheint. Meist ist es eine vereinfachte Version eines Logos — klein genug, um bei ein paar Pixeln noch erkennbar zu sein, etwa ein Buchstabe, eine einfache Form oder ein Symbol.

Ohne Favicon zeigen Browser stattdessen ein generisches, leeres Seitensymbol — denselben Platzhalter wie bei jeder anderen Website, die keins eingerichtet hat, wodurch sofort auffällt, dass dieses Detail nie konfiguriert wurde.

Warum es wichtig ist

Ein fehlendes Favicon ist eine Kleinigkeit, aber auch eine der sichtbarsten Kleinigkeiten überhaupt: Es erscheint auf jeder einzelnen Seite deiner Website, in jedem Browser-Tab, bei jedem Besucher, ständig. Wenn jemand mehrere Tabs offen hat, ist das Favicon oft die einzige Möglichkeit, deinen Tab optisch in der Reihe wiederzufinden — ein generisches, leeres Symbol erschwert das und signalisiert leise "diese Website wurde nie ganz fertiggestellt".

Es ist außerdem einer der schnellsten Erfolge auf dieser ganzen Liste: Anders als Inhalts- oder Designentscheidungen dauert ein Favicon nur wenige Minuten zu erstellen und einzurichten, ganz ohne laufenden Pflegeaufwand danach.

So behebst du es

  1. Erstelle ein einfaches quadratisches Bild (idealerweise eine vereinfachte Version deines Logos) — kostenlose Favicon-Generatoren können ein vorhandenes Logobild automatisch in die richtigen Dateiformate und Größen umwandeln.
  2. Speichere das Ergebnis als favicon.ico oder favicon.svg und lade es in den Root-Ordner deiner Website hoch (oder wo auch immer deine Hosting-Plattform Icon-Dateien erwartet).
  3. Füge <link rel="icon" href="/favicon.ico"> (oder das SVG-Äquivalent) im <head>-Bereich deiner Seite ein.
  4. Falls du einen Website-Baukasten nutzt (Squarespace, Wix, Webflow, WordPress), suche in den allgemeinen Website-Einstellungen nach einem Upload-Feld für "Favicon" oder "Website-Symbol", statt direkt am Code zu arbeiten.
  5. Lade die Seite in einem neuen Browser-Tab neu (oder leere deinen Browser-Cache), um zu bestätigen, dass das neue Symbol erscheint — Favicons werden manchmal zwischengespeichert und aktualisieren sich nur langsam.

Prüfe, ob deine eigene Website dieses Problem hat

Launch Readiness scannt deine Website in Sekunden auf dieses und ~50 weitere Probleme vor dem Start — kostenlos, ohne Anmeldung.

Kostenlose Prüfung starten