Favicon – was ist das? Bedeutung, Größen und Beispiele
Ein Favicon ist das kleine Symbol, das eine Website darstellt. Sie sehen es im Browser-Tab, in Lesezeichen und im Verlauf, auf dem Startbildschirm des Smartphones und neben dem Namen Ihrer Website in den Google-Suchergebnissen.
Was bedeutet „Favicon“?
Das Wort ist eine Abkürzung für Favorite Icon, also „Favoriten-Symbol“. Der Internet Explorer führte es 1999 ein, um neben Seiten im Menü „Favoriten“ ein Icon anzuzeigen. Der Name ist geblieben, obwohl Favicons heute fast überall erscheinen, wo eine Website auftaucht.
Wo Favicons angezeigt werden
- Browser-Tabs – daran erkennen Besucher Ihren Tab unter vielen anderen
- Lesezeichen und Verlauf
- Google-Suchergebnisse – neben dem Namen Ihrer Website, mobil und am Desktop
- Startbildschirm von iPhone und Android, wenn jemand Ihre Seite dort ablegt
- Link-Vorschauen in manchen Chat-Apps und Feedreadern
Warum ein Favicon wichtig ist
Ohne Favicon zeigt der Browser ein leeres Blatt oder eine Weltkugel. Das wirkt unfertig und macht Ihren Tab schwer auffindbar. In den Suchergebnissen hilft ein klares Favicon, Ihre Seite zu erkennen, bevor jemand klickt.
So sieht ein gutes Favicon aus
Ein Favicon wird oft nur 16×16 Pixel groß angezeigt. Die besten sind deshalb schlicht:
- eine kräftige Form oder ein bis drei Buchstaben
- starker Kontrast zwischen Symbol und Hintergrund
- die Farben Ihrer Marke
Feine Details, dünne Linien und lange Wörter verschwinden bei dieser Größe.
Favicon-Dateiformat und Größen
Heute reicht meist dieses Set:
| Datei | Verwendung |
|---|---|
| favicon.ico (mit 16, 32, 48) | Fast alle Browser |
| favicon-16x16.png, favicon-32x32.png | Browser-Tabs |
| apple-touch-icon.png (180×180) | Home-Bildschirm von iPhone und iPad |
| android-chrome-192x192.png, 512x512.png | Android und PWAs |
Das klassische Dateiformat ist ICO: Eine .ico-Datei enthält mehrere Größen auf einmal. Für alle anderen Größen wird PNG verwendet, für moderne Browser zusätzlich SVG.
Favicon kostenlos erstellen
Am einfachsten geht es mit dem kostenlosen Favicon Generator: Logo auswählen, und Sie erhalten das komplette Set samt HTML-Code als ZIP. Ohne Logo können Sie ein Favicon aus Text oder Emoji erstellen. Nach dem Hochladen prüfen Sie mit dem Favicon-Checker, ob alles richtig eingebunden ist.