#blog #news #infos #snippets

HTML: Favicon in die Website einbinden

Tutorial: Wie ihr ein Favicon in die Webseite einbinden könnt.

Das „favourite icon“, das so genannte Favicon, ist ein kleines 16×16 oder 32×32 Pixel großes Bild, das in der Adressleiste des Browsers oder in den Lesezeichen angezeigt wird. Dieses Icon wird eingesetzt, um für die eigene Webseite einen Wiedererkennungswert zu schaffen.

Davon abgesehen, dass ein Favicon zum optischen Escheinungsbild einer Webseite gehört, ist es auch für die Suchmaschinenoptimierung ein Rankingfaktor. Es sollte also keinesfalls vernachlässigt werden.

Das Einbinden:

• Mittels eines Tags im <head>-Bereich der Webseite
• Über die favicon.ico im root-Verzeichnis der Webseite (z.B. bei CMS wie WordPress usw.)

Dabei kannst du auch andere Dateiformate als .ico verwenden. .gif-, .png- und .svg-Dateien sind ebenso möglich.

Beispiel:


<link rel="shortcut icon" href="https://www.deinewebseite.de/favicon.png" type="image/png" />
<link rel="shortcut icon" href="https://www.deinewebseite.de/favicon.gif" type="image/gif" />
<link rel="shortcut icon" href="https://www.deinewebseite.de/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="https://www.deinewebseite.de/favicon.svg" type="image/svg+xml" />

Erklärung:

Sowohl die Attribute rel=“shortcut icon“ als auch rel=“icon“ sollten gemäß HTML-Standard angegeben werden. Den meisten Browsern reicht jedoch auch die Angabe über rel=“icon“. Nicht jeder Browser durchsucht automatisch das root-Verzeichnis einer Webseite nach einer favicon.ico. Verwende daher am besten immer beide HTML-Tags. So arbeitest du standardkonform und vermeidest Fehler bei der Anzeige des Symbols. Bitte beachte die geänderten „type“-Werte je nachdem welches Dateiformat du wählst:

  • ICO: type=“image/x-icon“
  • PNG: type=“image/png“
  • GIF: type=“image/gif“

Darüber hinaus musst du auch auf Größen- und Farbangaben achten (nicht bei svg), da sonst das Icon unter Umständen nicht angezeigt werden kann:

  • ICO: 16×16 oder 32×32 – 16 bis 16 Millionen Farben
  • PNG: 16×16 – 256 Farben
  • GIF: 16×16 – 256 Farben

Solltest du ein bereits vorhandenes Icon mit einem neuen Symbol ersetzen, bitte unbedingt den Browser-Cache leeren. Sonst kann es vorkommen, dass der Browser das neue Icon nicht automatisch aktualisiert.

Favicon–Generatoren:

http://www.favicon.cc
http://www.favicon-generator.de

Folgen und liken!