Favicon: Bedeutung & Einrichtung

Was ist ein Favicon?

Ein Favicon (kurz für "Favoriten-Icon") ist das kleine Symbol, das eine Webseite repräsentiert. Es erscheint im Browser-Tab neben dem Seitentitel, in der Lesezeichenliste und, wenn eine Seite auf dem Smartphone-Homescreen abgelegt wird, als App-ähnliches Icon. So klein es ist, erfüllt es eine wichtige Funktion: Es macht eine Webseite sofort wiedererkennbar.

Warum ist das Favicon wichtig?

Wiedererkennung: Wer viele Tabs geöffnet hat, findet die gewünschte Seite anhand des Favicons deutlich schneller als über den Text allein.
Markenidentität: Das Favicon ist ein kleiner, aber konstanter Bestandteil des Markenauftritts und stärkt den Wiedererkennungswert.
Professioneller Eindruck: Eine Seite ohne Favicon zeigt im Tab nur ein neutrales Standard-Symbol. Das wirkt schnell unfertig und unprofessionell.
Sichtbarkeit in den Suchergebnissen: Google zeigt das Favicon inzwischen auch direkt in den mobilen Suchergebnissen neben dem Seitentitel an. Ein klares, eindeutiges Favicon kann hier dazu beitragen, dass ein Eintrag stärker auffällt.

Wie wird ein Favicon eingebunden?

Das Favicon wird im <head>-Bereich der Seite über ein <link>-Tag eingebunden. Eine moderne, gängige Variante sieht so aus:

<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Das apple-touch-icon wird verwendet, wenn ein Nutzer die Seite auf dem iPhone- oder iPad-Homescreen ablegt. Es sollte größer sein (in der Regel 180x180 Pixel), damit es auch dort scharf dargestellt wird.

Welche Formate und Größen sind sinnvoll?

Formate: Das klassische .ico-Format funktioniert in allen Browsern. Moderne Seiten setzen zusätzlich auf .png und .svg. Ein SVG-Favicon hat den Vorteil, dass es bei jeder Auflösung gestochen scharf bleibt.
Größen: Statt nur 16x16 Pixel sollten mehrere Größen bereitgestellt werden, etwa 32x32 und 48x48 Pixel. Für die Anzeige in den Google-Suchergebnissen empfiehlt Google ein Favicon, dessen Kantenlänge ein Vielfaches von 48 Pixeln beträgt (zum Beispiel 48x48 oder 96x96 Pixel).

Tipps für ein gutes Favicon

Einfach halten: Bei wenigen Pixeln gehen Details verloren. Ein klares Symbol oder ein einzelner Buchstabe wirkt besser als ein verkleinertes, komplexes Logo.
Guter Kontrast: Das Favicon muss sowohl auf hellem als auch auf dunklem Hintergrund erkennbar sein, da Browser unterschiedliche Tab-Designs nutzen.
Zur Marke passen: Idealerweise greift das Favicon Farben oder Form des Markenlogos auf, um den Wiedererkennungswert zu sichern.

Hinweise für die Praxis

Für die Erstellung eines kompletten Favicon-Pakets in allen nötigen Größen und Formaten gibt es kostenlose Online-Tools wie den RealFaviconGenerator, der aus einem einzigen Bild alle benötigten Dateien und den passenden HTML-Code erzeugt. WordPress-Nutzer können das Favicon (dort "Website-Icon" genannt) bequem über den Customizer unter "Design" hochladen, ohne den Code anzufassen.

Fazit

Das Favicon ist ein kleines Detail mit spürbarer Wirkung. Es stärkt die Wiedererkennung, vermittelt Professionalität und ist mittlerweile sogar in den Google-Suchergebnissen sichtbar. Der Aufwand für die Einrichtung ist gering, der Nutzen für Branding und Außenwirkung dagegen dauerhaft. Jede Webseite sollte daher ein sauber eingerichtetes Favicon besitzen.