Zurück zu den Anleitungen

Was ist ein Favicon?

Was Favicons sind, wozu sie dienen und wie sie Marke und Nutzung Ihrer Website stärken. Plus: wie Sie eines für Ihre Seite anlegen.

Definition des Favicons

Ein Favicon (kurz für „favorite icon“) ist ein kleines Symbol, das eine Website oder Seite repräsentiert. Es taucht an vielen Stellen in Browsern und auf Geräten auf: am häufigsten in Tabs neben dem Seitentitel, in Lesezeichen, im Verlauf und auf dem Startbildschirm, wenn die Seite als Verknüpfung gespeichert wird.

Favicons sind in der Regel quadratisch, oft 16×16, 32×32 oder 48×48 Pixel. Moderne Umsetzungen gehen bis 512×512 Pixel für hochauflösende Displays und Mobilgeräte.

Wo Favicons erscheinen

Favicons helfen an mehreren Stellen, Ihre Website zu erkennen und zu finden:

  • Browser-Tabs: Der sichtbarste Ort: neben dem Seitentitel im Browser-Tab
  • Lesezeichen: Neben dem Namen in der Lesezeichenliste
  • Browser-Verlauf: Im Verlaufsmenü des Browsers
  • Adressleiste: Manche Browser zeigen sie in der Adressleiste
  • Mobile Startbildschirme: Wenn Nutzer die Seite auf den Startbildschirm legen, dient das Favicon als App-Symbol
  • Suchergebnisse: Einige Suchmaschinen zeigen Favicons neben den Treffern
Beispiele, wie Favicons in Browser-Tabs, Lesezeichen und der Adressleiste erscheinen

Beispiel: Favicons in Tabs und Lesezeichen

Warum Favicons wichtig sind

Favicons prägen Marke und Nutzung einer Website spürbar:

Wiedererkennung

Ein klares Favicon lässt Nutzer Ihre Seite zwischen vielen offenen Tabs sofort finden. Es stärkt die Marke und bleibt im Gedächtnis.

Professioneller Eindruck

Ein eigenes Favicon wirkt durchdacht. Fehlt es, zeigt der Browser ein Standard-Symbol — die Seite wirkt unfertig.

Bessere Orientierung

In Lesezeichen, Verlauf und offenen Tabs finden Nutzer Ihre Seite schneller. Wer oft vorbeischaut, merkt das besonders.

Mobil

Auf dem Handy wird das Favicon zum App-Symbol, wenn die Seite auf den Startbildschirm kommt. Ein klares Motiv verbessert das.

Formate und Größen

Moderne Sites sollten Favicons in mehreren Formaten und Größen anbieten, damit sie in allen Browsern und auf allen Geräten funktionieren:

ICO-Format

Die klassische favicon.ico, meist 16×16 oder 32×32 Pixel. Am weitesten verbreitet und in jedem Browser nutzbar.

PNG-Format

PNG-Favicons gibt es in 16×16, 32×32, 48×48, 96×96, 180×180, 192×192 und 512×512 Pixel. Gegenüber ICO oft schärfer und mit Transparenz.

SVG-Format

SVG-Favicons sind auflösungsunabhängig und bleiben in jeder Größe scharf. Moderne Browser unterstützen sie — ideal für hochauflösende Displays.

Apple Touch Icon

Apple-Geräte nutzen apple-touch-icon.png, typischerweise 180×180 Pixel, als Startbildschirm-Symbol. So wirkt die Seite auf iOS professionell.

Größenbeispiele

16×16-Pixel-Favicon, Beispiel16×16
32×32-Pixel-Favicon, Beispiel32×32
48×48-Pixel-Favicon, Beispiel48×48
96×96-Pixel-Favicon, Beispiel96×96

Beispiel: dasselbe Favicon in verschiedenen Größen

Gestaltung: was sich bewährt

Beim Entwurf eines Favicons gelten ein paar klare Regeln:

  • Einfachheit: Favicons sind klein. Schlichte Motive funktionieren. Feine Details verschwinden in Miniatur
  • Hoher Kontrast: Farben mit gutem Kontrast, damit das Symbol auf hellen und dunklen Browser-Hintergründen lesbar bleibt
  • Zur Marke passend: Das Favicon sollte zur Marke gehören und als Teil des Gesamtbilds erkennbar sein
  • Skalierbarkeit: Es sollte von 16×16 bis 512×512 Pixel funktionieren
  • Testen: In verschiedenen Browsern und auf verschiedenen Geräten prüfen, ob es korrekt erscheint
Gute Favicon-Beispiele: einfach, mit hohem Kontrast

Gute Beispiele: einfach, hoher Kontrast

Schlechte Favicon-Beispiele: zu komplex oder kontrastarm

Vermeiden: zu komplex oder kontrastarm

So erstellen Sie ein Favicon

Ein Favicon anzulegen ist mit heutigen Tools unkompliziert. Ob von Grund auf oder aus vorhandenem Material:

Online-Generator nutzen

Mit Tools wie logo87.com geht es schnell: Text eingeben, Farben und Schriften wählen, ein komplettes Paket mit den nötigen Größen und Formaten herunterladen. Design-Erfahrung ist nicht nötig.

Aus vorhandenen Bildern konvertieren

Haben Sie bereits ein Logo oder Bild, können Sie mit SVG zu PNG die nötigen Favicon-Formate und -Größen erzeugen — passend zur Marke.

Von Grund auf gestalten

Designer können mit Grafiksoftware pixelgenau arbeiten und alle Größen selbst kontrollieren.

Fazit

Ein Favicon ist klein, aber Teil der Identität Ihrer Website. Es hilft beim Erkennen, stärkt die Marke und erleichtert die Orientierung. Mehrere Formate und Größen sorgen dafür, dass die Seite in allen Browsern und auf allen Geräten vollständig wirkt.

Ob Generator, vorhandenes Bild oder eigener Entwurf: Die Zeit für ein sauberes Favicon zahlt sich in Professionalität und Nutzung aus.