+49(0)170 7360372 info@christiane-weigel.de

christiane weigel logo


Favicon in die Webseite 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 Erscheinungsbild einer Webseite gehört, ist es auch für die Suchmaschinenoptimierung ein Rankingfaktor. Es sollte also keinesfalls vernachlässigt werden.

Das Einbinden erfolgt auf 2 Wegen:

• Einbindung mittels eines Tags im <head>…</head>-Bereich der Webseite
• Einbindung über die favicon.ico im root-Verzeichnis der Webseite
Dabei kannst du auch andere Dateiformate als .ico verwenden. GIF- und PNG-Dateien sind ebenso möglich.

Beispiel:

<link rel="shortcut icon" href="http://www.deinewebseite.de/favicon.png" type="image/png" />

<link rel="icon" href="http://www.deinewebseite.de/favicon.png" type="image/png" />

Erklärung:

Sowohl die Attribute rel=”shortcut icon” als auch rel=”icon” müssen 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. Im Beispiel habe ich mit einer PNG-Datei gearbeitet. Für GIF- und ICO-Dateien gelten andere type=”…”-Werte:

  • 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, 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.

Online – Favicon – Generatoren:

http://www.favicon.cc

http://www.favicon-generator.de

christiane weigel logo

kontakt

christiane weigel
#webdesign #webconsulting #grafik
onkel-tom-straße 115
d-14169 berlin-z*dorf
mobil 0170 7360372
email info@christiane-weigel.de

kontaktformular

bitte um infos zu folgenden themen:

datenschutz

5 + 7 =