Ein Icon (Favicon) in der Adresszeile erstellen

Juni 2017

Vielleicht ist Ihnen schon mal links neben der URL in der Adresszeile Ihres Browsers ein Icon aufgefallen. Manche Symbole sind konkret von den Eigentümern der Webseite festgelegt worden. Die Zuteilung eines Icons für Ihre Webseite ist ganz leicht.


Favicon erstellen

Es gibt mehrere Möglichkeiten:

Über ein Grafikprogramm (GIMP, Pixia, Inkscape...) (zu Grafikprogrammen gehen)

Über ein spezialisiertes Programm (wir empfehlen IconEdit32 oder IconWare)

Über Webseiten, die ein Bild in ein Favicon umwandeln:

http://www.chami.com/html-kit/services/favicon/

http://www.favicon.co.uk/

http://www.genfavicon.com/de/

http://tools.dynamicdrive.com/favicon/

http://favikon.com/

Wenn Favicons den Standards entsprechen

Zu Beginn brauchen Sie ein Bild in PNG- oder GIF-Format (Standardformate).
(Sie können aber auch weniger geläufige Formate benutzen). Sie können zwischen zwei Größen auswählen: 16x16 oder 32x32 Pixel.

Wenn Favicons den Standards nicht entsprechen

Gewöhnlich respektiert der Internet Explorer die Standards nicht und benutzt auch nicht die Bilder in den richtigen Formaten. Für diesen Browser müssen Sie also ein Bild im ICO- (oder BMP-)Format benutzen (kein Standard, deswegen besser vermeiden) sowie die Größe 16x16 Pixel.

Favicon online stellen

Danach müssen Sie das Favicon auf Ihre Webseite stellen und den Pfad mit dem Tag-Link zwischen den Kopf-Tags (head) angeben.
Schauen wir uns ein Beispiel mit einem Bild in PNG-Format an:
 <link rel="icon" type="image/png" href="/images/mifavicon.png" /> 


Abhängig vom Format ändert sich das Attribut “type”:

PNG-Format: image/png

GIF-Format: image/gif

JPEG-Format (Erweiterung .jpg oder .jpeg): image/jpeg

Wenn Sie ein Favicon haben, das nicht die Standards respektiert, ändert sich auch das Attribut “rel”:
 <link rel="shortcut icon" type="image/x-icon" href="/images/icon1.ico" /> 


Sie können auch eine favicon.ico Datei direkt in den Stamm der Webseite eingeben, damit manche Browser die Datei automatisch benutzen können, was jedoch nicht dem Standard entspricht.

Hinweise

Es ist nicht sehr leicht und nützlich ein Favicon für den Internet Explorer zu erstellen, da dieser die Symbole nur für Favoriten benutzt.
Wenn Sie ein Icon in einem Standard-Format benutzen und ein anderes im ICO-Format, empfehlen wir letzteren nicht in den Stamm mit aufzunehmen. Die Browser weisen darauf hin, wenn sie das Bild nicht in PNG-Format finden.
Außerdem können Sie auch ein animiertes Icon benutzen. Der benötigte Tag dazu ist dieser:
 <link rel="icon" href="/images/animated_favicon1.gif" type="image/gif"> 

Lesen Sie auch


Artikel im Original veröffentlicht von . Übersetzt von PeterCCM. Letztes Update am 20. Juni 2017 13:59 von PeterCCM.
Das Dokument mit dem Titel "Ein Icon (Favicon) in der Adresszeile erstellen" wird auf CCM (de.ccm.net) unter den Bedingungen der Creative Commons-Lizenz zur Verfügung gestellt. Unter Berücksichtigung der Lizenzvereinbarungen dürfen Sie das Dokument verwenden, verändern und kopieren, wenn Sie dabei CCM deutlich als Urheber kennzeichnen.