Das kleine Symbol im Browser-Tab, in Lesezeichen und im Verlauf ist das Favicon. Ein gutes Favicon lässt deine Website fertig wirken und macht sie zwischen einem Dutzend offener Tabs leichter auffindbar.
Was ein Favicon eigentlich ist
Traditionell liegt es unter /favicon.ico, und .ico ist ein Container, der mehrere Größen in einer Datei hält — meist 16×16, 32×32 und 48×48. Der Browser wählt die passende Größe je nach Ort (Tab, Lesezeichen, Taskleiste). Deshalb schlägt eine echte .ico ein einzelnes PNG: eine Datei bleibt in jeder Größe scharf.
Mit einem quadratischen Bild beginnen
- Nutze eine quadratische Vorlage, idealerweise 256×256 oder größer. Nicht-quadratische Bilder werden beschnitten oder mit Rand versehen.
- Halte es einfach — bei 16px verschwinden feine Details. Ein einzelner Buchstabe, eine Marke oder eine kräftige Form liest sich am besten.
- Ein PNG mit transparentem Hintergrund eignet sich gut.
Die .ico erstellen — nichts wird hochgeladen
Dein Logo ist deine Marke; es muss nicht an einen unbekannten Server gehen. Das läuft komplett im Browser:
- PNG zu ICO / Favicon-Generator — ein PNG hineinziehen und eine
favicon.icomit mehreren Größen erhalten.
In deine Website einbinden
Lege favicon.ico in das Stammverzeichnis deiner Website und verweise im Head der Seite darauf:
<link rel="icon" href="/favicon.ico" sizes="any">Moderne Browser akzeptieren auch ein PNG-Icon, und viele Websites liefern beides. Aktualisiert sich das Icon nicht, lade mit Strg+F5 neu — Browser cachen Favicons sehr aggressiv.
Brauchst du ein skalierbares Logo statt eines Icons fester Größe? Siehe PNG in SVG umwandeln.