Favicon

Was ein Favicon ist, wo es erscheint, welche Formate und Größen sinnvoll sind und welche Fehler beim Erstellen häufig passieren.

Ein Favicon ist das kleine Symbol, das eine Website in Browser-Tabs, Lesezeichen, Verläufen und manchen Suchergebnissen kennzeichnet. Der Name stammt von „favorites icon“, dem Begriff, den Internet Explorer für Lesezeichen verwendete.

Browser haben ursprünglich eine Datei namens favicon.ico aus dem Stammverzeichnis der Website angefordert. Das ICO-Format kann mehrere Größen in einer Datei enthalten, etwa 16×16, 32×32 und 48×48 Pixel. Aktuelles HTML deklariert Symbole mit einem link-Element, dessen rel-Attribut icon lautet, und die Datei kann neben ICO auch PNG oder SVG sein.

Apple-Geräte verwenden für Verknüpfungen auf dem Home-Bildschirm ein eigenes Touch-Icon, meist ein PNG mit 180×180 Pixeln. Installierbare Web-Apps führen größere Symbole, oft 192×192 und 512×512, in einem Web-App-Manifest auf.

Favicon-Formate und -Größen

Datei	Format	Übliche Größen
favicon.ico	ICO	16, 32, 48 px in einer Datei
Icon-Link	PNG oder SVG	32×32 PNG oder ein skalierbares SVG
Apple Touch Icon	PNG	180×180
Manifest-Symbole	PNG	192×192, 512×512

Wo Favicons erscheinen

In Browser-Tabs und in der Adressleiste.
In Lesezeichen, Leselisten und im Verlauf.
In Verknüpfungen auf dem Home-Bildschirm von Smartphones und Tablets.
In Suchergebnissen und Linkvorschauen mancher Dienste.

So erstellen Sie ein Favicon

Beginnen Sie mit einer quadratischen Bildmarke, nicht mit dem vollständigen Schriftzug.
Vereinfachen Sie sie, bis sie bei 16×16 Pixeln erkennbar bleibt.
Exportieren Sie PNG-Größen, optional ein SVG und eine ICO-Datei.
Fügen Sie die link-Elemente im head der Seite ein und testen Sie in mehreren Browsern.

Favicons im echten Veröffentlichungsablauf

Fehlt das Favicon, erscheint in Tab-Screenshots und Dokumentation ein generisches Symbol. Prüfen Sie vor der Aufnahme von Browserfenstern für eine Anleitung oder einen Launch-Beitrag, ob das Favicon geladen wird. Browser speichern Favicons hartnäckig im Cache, daher kann nach einem Update noch das alte Symbol erscheinen.

Häufige Fehler

Ein detailreiches Logo verwenden, das bei 16 Pixeln verschwimmt.
Das Apple Touch Icon vergessen, sodass Smartphones stattdessen einen Screenshot der Seite zeigen.
Ein transparentes Symbol ausliefern, das in dunklen Browser-Designs verschwindet.
Nur in einem Browser testen.

Sie möchten gleich ein Bild bearbeiten?

Wandeln Sie ein Logo mit Image Converter zwischen PNG, JPG und WebP um und prüfen Sie seine Pixelgröße mit Screenshot Resolution Checker.

Häufige Fragen

Wird favicon.ico noch benötigt?

Viele Websites liefern die Datei weiterhin aus, weil manche Tools sie im Stammverzeichnis anfragen. Ein Icon-Link auf PNG oder SVG deckt aktuelle Browser ab.

Kann ein Favicon animiert sein?

Manche Browser zeigen animierte GIF-Favicons an, die Unterstützung ist jedoch uneinheitlich. Ein statisches Symbol ist die zuverlässige Wahl.

Quellen

Weiterführende Ressourcen

Open-Graph-Bild: das größere Vorschaubild für geteilte Links.
Image Compressor: die Dateigröße von Symbolen verringern.

Machen Sie immer wieder dieselben Screenshots?

Temposhot erfasst einen Bildschirm, ein Fenster oder einen Bereich zeitgesteuert und exportiert die Serie als PDF, Bilder, ZIP oder MP4. Kostenlose Browser-Tools erstellen nur einzelne Bilder.

Für Mac herunterladen Funktionen ansehen