Mit HTML ein Favicon einbinden

Du kannst ganz einfach in deine Website mit HTML ein Favicon 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.

Wie du dabei mit HTML ein Favicon in deine Website einbauen kannst, zeige ich dir in diesem Artikel.

 

Was ist eigentlich ein Favicon?

Bevor ich dir zeige, wie du ein Favicon zu deiner Website hinzufügst, erkläre ich zunächst was ein Favicon überhaupt ist. Springe einfach zum nächsten Abschnitt, wenn du das schon weißt.

Ein Favicon setzt man im Grunde genommen als Erkennungsmerkmal für die eigene Website ein. Es sorgt dabei für eine Abwechslung zu den Standardsymbolen, die man sonst in den Favoriten oder der Adresszeile sieht. So lässt sich die Website besser erkennen. So lässt sich eine Website insbesondere dann viel besser erkennen, wenn man viele Tabs gleichzeitig offen hat.

Das erleichtert schließlich die Navigation und erhöht so unbewusst die Zufriedenheit des Nutzers. Außerdem kann man so die eigene Marke durch das Symbol stärken.

 

Favicon mit HTML in die Website einbinden

In den folgenden Abschnitten zeige ich dir, wie du ein Favicon in deine Website einfügen kannst. Dabei gibt es mehrere Möglichkeiten, die alle mit HTML funktionieren. Du benötigst weder JavaScript noch sonstige Scripte.

 

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 mit HTML ein Favicon einfügen

Mit den nachstehenden Beispielen baust du das Favicon in deine Website ein.

 

Beispiel:

<link rel="shortcut icon" href="https://deine-url.de/favicon.png" type="image/png" />
<link rel="icon" href="https://deine-url.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. Du kannst aber auch GIF- und ICO Dateien einfügen. Hierbei gelten dann andere type="..." Attribute. Diese stelle ich dir nun vor.

 

PNG Favicon einbinden

Im Beispiel oben habe ich es bereits verwendet. Wenn du eine PNG-Datei als Favicon nutzen möchtest, musst du das Attribute type="image/png" nutzen.

 

Beispiel:

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

 

 

ICO Favicon einbinden

Benutzt du hingegen eine ICO-Datei für dein Favicon, gilt das Attribut type="image/x-icon" .

 

Beispiel:

<link rel="shortcut icon" href="https://deine-url.de/favicon.ico" type="image/x-icon" />
<link rel="icon" href="https://deine-url.de/favicon.ico" type="image/x-icon" />

 

 

GIF Favicon einbinden

Schließlich hast du noch die Möglichkeit, ein GIF als Favicon in deine Website einzufügen. Hierzu nutzt du das Attribut type="image/gif" .

 

Beispiel:

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

 

Hinweis:

Du hast mit einem GIF theoretisch auch die Möglichkeit, ein animiertes Favicon in deine Website einzubauen. Allerdings stellt z.Zt. (* August 2017) nur noch Firefox diese Animation dar. Chrome, Internet Explorer und auch Edge animieren das Favicon (zum Glück) nicht.

Da ein animiertes Favicon durchaus ein großes Spam- und Troll-Potential beinhaltet, rate ich an dieser Stelle entschieden von einem Einsatz ab.

 

Übersicht der Dateitypen und Attribute

Hier noch einmal eine tabellarische Übersicht der Dateitypen, die du für dein Favicon nutzen kannst.

 

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

 

Größe und Farbtiefe eines Favicons

Die Größe des Favicons spielt eine große Rolle. Ebenso auch die Farbtiefe des Symbols. Erstellst du deine Grafik nicht passend, kann der Browser sie hinterher nicht anzeigen. Dies gilt es daher zu vermeiden.

 

Übersicht der Formate für das Favicon

Die folgende Tabelle bietet dir dazu eine Übersicht, an der du dich orientieren kannst.

 

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

 

 

Ein vorhandenes Favicon ersetzen

Wenn du ein bereits vorhandenes Favicon mit einem neuen Symbol ersetzten möchtest, kannst du das ganz einfach tun. Ersetze dazu einfach die Grafik auf deinem Webspace.

Um das neue Symbol zu testen, solltest du danach 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. Daher können unter Umständen auch mehrere Versuche vonnöten sein.

 

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.