Menu

Ein Icon (Favicon) in der Adresszeile erstellen

USESDEFRITBR
Stellen Sie Ihre Frage
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

Für das Erstellen eines Favicons gibt es mehrere Möglichkeiten: Sie können ein Grafikprogramm (zum Beispiel GIMP, Pixia oder Inkscape) benutzen (siehe Grafikprogramme auf CCM) oder ein anderes spezialisiertes Programm verwenden (wir empfehlen IconEdit32 oder IconWare). Schließlich können Sie mit Hilfe einer Reihe von Webseiten ein Bild in ein Favicon umwandeln:

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


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

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

http://favikon.com/

Wenn Favicons den Standards entsprechen

Zuerst brauchen Sie ein Bild im 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 erfüllt 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 mit der Größe 16x16 Pixel im ICO- oder BMP-Format benutzen. Da das BMP-Format kein Standard ist, sollten Sie es möglichst vermeiden.

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. Dies ist ein Beispiel mit einem Bild im PNG-Format: 
 <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 erfüllt, ä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 einfügen, 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, letzteres nicht in den Stamm mit aufzunehmen. Die Browser weisen darauf hin, wenn sie das Bild nicht im 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">

Foto: © CCM.

Lesen Sie auch