Start / Website-Ratgeber / Website-Pflege / Favicons richtig nutzen

Website-PflegeFavicons richtig nutzen

Favicons sind kleine Grafiken, die durch Darstellung z.B. des Unternehmenslogos dazu dienen, eine Website zu symbolisieren. Ursprünglich für die Darstellung im Kopf-/Tab-Bereich des Browser-Fenster oder in Lesezeichen- und Favoritenlisten (daher Favicon) verwendet, erfüllen diese Icons inzwischen viele weitere Funktionen. Wir zeigen, welche das sind und wie Sie sie nutzen.

Matthias Speth, 16.12.2021

Bild eines schönen aufgeräumten Gartens

Favicons sind kleine Grafiken, die durch Darstellung z.B. des Unternehmenslogos dazu dienen, eine Website zu symbolisieren.
Früher nutze man sie eher im Kopf-/Tab-Bereich des Browser-Fensters oder in der Lesezeichen- und Favoritenlisten (daher Favicon). Heute erfüllen diese Icons viele weitere Funktionen. Das hat auch mit der stärkeren Nutzung von Handys zu tun.

So ist es zum Beispiel möglich, eine Homepage direkt auf dem Bildschirm eines Smartphones zu verknüpfen. So können Sie diese jederzeit mit nur einem Fingertipp öffnen.
Dafür müssen die Favicon-Grafiken Eigenschaften haben, die über die früher üblichen Anforderungen hinaus gehen.
Für die ursprünglichen Browser-Funktionen reichte eine Bildgröße von 16×16 px aus. Aktuell sollte die Größe mindestens 512×512 px sein. Kleinere Favicons sehen auf hochauflösenden Tablet- oder Smartphone-Displays oft grob und pixelig aus.

Bei Favicons sind Farbtransparenzen möglich. Die Darstellung etwa des eigenen Logos auf transparentem Hintergrund führt dazu, dass das Logo jeweils ohne eventuell störenden Rahmen auf dem jeweils vorhandenen Hintergrund gezeigt wird. Was im Browser besonders elegant wirkt, kann aber bei der Verknüpfung auf dem Tablet-Display eher ungünstig sein. Hier kann es je nach Beschaffenheit des Logos sauberer und übersichtlicher wirken, einen definierten Hintergrund und damit gerade einen sichtbaren Rahmen zu haben.

Dann gilt es, die bereitgestellte Grafik jeweils für die verschiedenen Systeme (iOS/MacOS, Android, Windows, …) in geeigneter Weise im Quellcode der Website einzubinden.

Ganz einfach ist das alles natürlich mit dem RundUmsorgt Paket von Mainetcare: Wir erstellen Ihr Favicon nach Ihren Wünschen und Vorgaben und binden es auf der Webseite ein.