Favicon in deine Website einbinden

Du kannst ganz einfach ein Favicon in deine Website einbinden. Das „favourite icon“, wie es eigentlich heißt, ist ein kleines 16 x 16 oder 32 x 32 Pixel großes Bild. Der Browser zeigt es meist im Tab der Website und zudem in den Lesezeichen an.

Man setzt das Favicon im Grunde genommen als ein Erkennungsmerkmal für die eigene Website ein. Es sorgt dabei für eine Abwechslung zu den Standardsymbolen, die sonst in den Favoriten oder der Adresszeile zu finden sind. So lässt sich die Website besser erkennen, insbesondere bei vielen gleichzeitig geöffneten Tabs. Wenn man viele Lesezeichen im Browser hat, lässt sich so eine bestimmte Website besser erkennen.

Wie du ein Favicon in deine Webseite einbinden kannst, erfährst du im nächsten Abschnitt.

 

Favicon in die Website einbinden

Grundsätzliches

Du hast zwei Möglichkeiten, wie du ein Favicon in deine Website einbinden kannst:

  • Einbindung mittels eines Tags im <head>...</head>-Bereich deiner Webseite
  • Einbindung über die favicon.ico im root-Verzeichnis deiner Webseite.

 

Du kannst aber auch andere Dateiformate als .ico verwenden. GIF- und PNG-Dateien sind ebenso möglich.

 

Beispiel eines Favicons

Der Browser zeigt das Favicon auf dem Tab der Seite und in den Lesezeichen an. In den folgenden Beispielen siehst du, wie Chrome das Favicon anzeigt.

 

So sieht ein Favicon in der Adresszeile aus.
So sieht das Favicon in der Adresszeile des Browsers aus.

 

So sieht ein Favicon in den Lesezeichen aus
Favicon in den Lesezeichen

 

So kannst du das Favicon in deine Website einbinden

Beispiel:

<link rel="shortcut icon" href="https://webmasterparadies.de/favicon.png" type="image/png" />
<link rel="icon" href="https://webmasterparadies.de/favicon.png" type="image/png" />

 

Erläuterung:

Sowohl die Attribute rel="shortcut icon" als auch rel="icon" müssen laut HTML Standard angegeben werden. Den meisten Browsern reicht jedoch auch die Angabe über rel="icon". Aber nicht jeder Browser durchsucht automatisch das root-Verzeichnis einer Webseite nach einer favicon.ico.

Verwende daher am besten immer beide HTML Tags. Hierdurch arbeitest du nach Standard und vermeidest Fehler bei der Anzeige deines Favicons.

 

Besonderheiten der Dateitypen

Im vorigen Beispiel habe ich mit einer PNG Datei gearbeitet. Für GIF- und ICO Dateien gelten andere type="..." Attribute:

 

Übersicht der Attribute

Dateityp Type-Attribut
ICO: type="image/x-icon"
PNG: type="image/png"
GIF: type="image/gif"

 

 

Du musst auf jeden Fall auch auf die Größe und Farbtiefe der Grafik achten. Sonst kann der Browser sie später nicht als Favicon anzeigen.
Übersicht der Formate für das Favicon

Dateityp Größe in Pixel Farbtiefe
ICO 16×16 oder 32×32 16 bis 16 Millionen Farben
PNG: 16×16 256 Farben
GIF: 16×16 256 Farben

 

Wenn du ein bereits vorhandenes Favicon mit einem neuen Symbol ersetzten möchtest, solltest du zuvor den Cache des Browsers leeren. Sonst kann es vorkommen, dass der Browser das neue Favicon nicht direkt erneuert. Sollte das ebenfalls nicht klappen, probiere den privaten Modus deines Browsers aus. Der Browser sollte das Favicon nun aber anzeigen. Manchmal „zicken“ die Browser etwas herum, wenn es um das Favicon geht.

 

Fazit

Du kannst im Grunde genommen recht einfach ein Favicon in deine Website einbinden. Wichtig ist, dass du bei der Wahl des Formats auf die richtige Größe und die richtige Farbtiefe achtest. Sonst kann der Browser das Favicon nicht anzeigen. Du solltest für deine Website auf jeden Fall ein solches Icon einsetzen. Denn deine Website lässt sich so wesentlich besser erkennen.


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.