FavIcon auf einer Website einbinden

Mit einem FavIcon Generator (Beispiel) kannst du FavIcons als .ico-Datei im Format 16*16px schnell und einfach erstellen. Größere Bilddateien werden automatisch verkleinert. In diesem Artikel möchte ich darauf eingehen, wie du einen solchen FavIcon denn dann am besten in deine Website integrierst, damit er angezeigt wird.

FavIcon einbinden

Einen FavIcon kannst du ganz einfach einbinden füge dazu einfach folgenden Code zwischen den head-Tags ein (nur bei XHTML den / lassen):

<link rel="shortcut icon" href="[PFAD zum favicon.ico]" type="image/x-icon" />

Was ist ein FavIcon?

FavIcons sind kleine Grafiken, die du in deinem Browser meist neben der Adresseleiste oder in dem Tab angezeigt bekommt. Der FavIcon wird dort in der Regel mit einer Grösse von 16*16px dargestellt. Auch ist bei vielen Internetbrowsern so, dass dir das FavIcon von bereits besuchten Internetseiten bei der Eingabe einer Webseite angezeigt wird.

Die meisten FavIcons, die du bisher gesehen hast, werden vermutlich das .ico Format haben, es ist in etwa vergleichbar mit einer Bitmap (.bmp)-Datei.

Wofür sollte ich einen FavIcon verwenden?

Ein FavIcon kann einen höheren Wiedererkennungswert bieten, sodass der Nutzer beispielsweise nach einer Suche schneller weiß, um was für eine Seite es sich handelt. Hat er bisher gute Erfahrungen gemacht so kann sich dies positiv für dich und dein Webprojekt auswirken.

Zudem sorgt es einfach für eine bessere Nutzererfahrung, denn die FavIcon kann dem Besucher auch die Möglichkeit bieten, schneller zu wissen, was für eine Webseite in dem Tab überhaupt geöffnet ist.
Solltest du jedoch eine animierte Grafik verwenden, so solltest du vorsichtig sein. Nerviges „Geblinke“ kann schon mal den einen oder anderen Besucher verschrecken.

Woher kommt eigentlich das Wort?

Das Wort FavIcon kommt aus dem Englischen von „favorite icon“ (Favoriten-Symbol), was damit zusammenhängt, dass die FavIcons auch oft in der Liste der Favoriten angezeigt werden.

Ein Gedanke zu „FavIcon auf einer Website einbinden“