Sie sind hier: Startseite -> Webdesign-Lexikon -> Favicon

Mit dem Favicon auf die Webseite aufmerksam machen

Logo zum Wiederfinden

Das Favicon setzt sich aus den Begriffen Favoriten und Icon zusammen. Ein Icon ist ein kleines Bild, das symbolisch für einen bestimmten Inhalt steht und die Favoriten sind jene Webseiten und deren Unterseiten, die man in seinen persönlichen Favoriten im Browser speichert.

Was ist das Favicon?

Damit ist die Idee auch schon verraten, denn ein Favicon ist ein kleines Icon, das in der Adresszeile des Browsers - dort, wo man die URL´s eingeben kann - dargestellt, wenn die Webseite geladen wird. Es handelte sich in der ursprünglichen Version um ein Bild in der Größe von 16x16 Pixel, das mit jedem Grafikprogramm hergestellt werden kann. Aufgrund der Dimension sind allerdings besonders ausgefallene Grafiken nicht möglich, man muss sich auf einen Buchstaben oder ein Symbol wie Sonne oder ähnlichem beschränken.

Ursprünglich deshalb, weil in der Zwischenzeit mehr Möglichkeiten und Notwendigkeiten entstanden sind, worauf ich noch eingehen werde. Das betrifft vor allem die unterschiedliche Darstellung in den mobilen Geräten.

Was bringt das Favicon jetzt eigentlich?

Schön, im Browser sieht man das Symbol links neben der Internetadresse - und weiter? Der eigentliche Grund für die Idee, die von Microsoft für den Internet Explorer ausgegangen war, war das schnelle Auffinden bestimmter Internetseiten in den persönlichen Favoriten. Wenn man beispielsweise viele Webseiten gespeichert hat, sucht man durchaus etwas länger, bis man die gewünschte Seite im Verzeichnis gefunden hat.

Hier soll das Favicon helfen, denn das Symbol wird nicht nur bei der Adresse nach dem Aufruf der Seite oder deren Unterseiten dargestellt, sondern auch in den Favoriten des Browsers selbst. So lässt sich das Symbol leicht wiedererkennen und damit auch die Adresse der Webseite, die man dann schneller anklicken kann.

Ob das allerdings ein Effekt ist, der auch dann eintritt, wenn jeder Eintrag ein solches Symbol hat, sei dahingestellt. Es gilt auch zu bedenken, dass viele die Webseite direkt über die Suchmaschine aufrufen, auch wenn sie oftmals schon auf der Seite zu Gast waren. Eine Zeit lang gab es Social Bookmark-Dienste, in denen Links gespeichert werden konnte, aber einige davon gibt es gar nicht mehr, weil sie sich nicht gerechnet hatten.

Favicon neu: Favicon mal vier

Durch den viel häufigeren Einsatz von mobilen Geräten ist die Empfehlung deutlich erweitert worden. Das originale Favicon ist weiterhin 16 x 16 Pixel groß. Man sollte aber für die verschiedenen Geräte vier Stück anbieten. Das Favicon bleibt, wie es ist, dazu gibt es aber eine Version mit 32 x 32 Pixel, eine Version mit 96 x 96 Pixel und eine große mit 180 x 180 Pixel für die iPhones.

Verlinkt werden sie wie am Beispiel dieser Seite im Kopfteil so:

<link rel="shortcut icon" href="URL/favicon.ico" /> <link rel="icon" type="image/png" href="URL/favicon-32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="URL/favicon-96.png" sizes="96x96" />
<link rel="apple-touch-icon" sizes="180x180" href="URL/apple-touch-icon.png" />

Durch diese Technik kann man je nach Gerät sicherstellen, dass das Favicon auch gefunden und dargestellt wird und den Wiedererkennungswert entsprechend gestalten. Es gibt noch einen ganz anderen Effekt neben der URL-Zeile im Browser - nämlich bei vielen Browsern die Seite mit den am häufigsten aufgerufenen Webseiten. Betrifft das Favicon nun eine gerne und oft aufgerufene Seite, so sieht man dankt des größeren Logos dieses Logo auch unter den Angeboten, die man besonders gerne nutzen möchte und muss nicht lange suchen.

Das kann für Entwickler oder Webmaster auch interessant sein, weil sie oft ihre eigene Seite zur Kontrolle aufrufen und ebenfalls per großem Logo die Seite zur Hand haben.

Lesen Sie auch

Das Grafikformat ist wichtig, damit der Browser weiß, was er wie darstellen kann und soll. Die klassischen drei Formate bleiben vorerst GIF, JPEG (JPG) und PNG. Fotos sind JPG, transparente Grafiken GIF oder PNG, animierte Bilder sind als GIF möglich.

Ein ganz anderes Thema in Sachen Bildmaterial ist das Favicon, das für die Wiedererkennung der Webseite genutzt werden kann.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

Favicon für die WebseiteArtikel-Thema: Mit dem Favicon auf die Webseite aufmerksam machen
Beschreibung: Das 🖥 Favicon ist eine Möglichkeit per kleinem Logo für einen zusätzlichen ✅ Wiedererkennungswert der Webseite zu sorgen.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel