favicon.ico – Favicon einbinden

November 2nd, 2008 by admin | Filed under Grafik

Ein Favicon (favourite icon) ist ein 16×16 Pixel kleines Bildchen, das der Browser links von der URL in der Adresszeile anzeigt.

Favicon erstellenZahlreiche online-Dienste, wie z. B. der Favicon-Generator helfen beim Erstellen eines Pixelbildchens von Hand.

Mit jedem anderen Grafik-Programm, wie dem kostenlosen Gimp, oder sogar mit dem von Windows mitgelieferten “Paint” geht’s natürlich genauso einfach: Entweder ein vorhandenes Bild auf 16×16 Pixel verkleinern, oder ein neues Bild erstellen, Ansicht vergrößern, bearbeiten, danach als favicon.gif oder favicon.jpg speichern und schließlich in favicon.ico umbenennen. Natürlich muss das Bild so beschaffen sein, dass es in diesem winzigen Format erkennbar/wiedererkennbar ist.

Das Einbauen ist auch ziemlich einfach:

Bild mit dem Namen “favicon.ico” auf den Server (ins oberste Verzeichnis) laden und mit

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”> zwischen <head> und </head> einbinden.

Außer in der Adresszeile des Browsers taucht das Favicon auch auf Tabs und Registerkarten und bei den Lesezeichen auf.

Beim Wiener Datenschmutzblogger Ritchie Pettauer habe ich eine Möglichkeit gefunden, auch animierte Favicons ohne viel Aufwand zu erstellen:

animiertes FaviconDer Favinator ist ein kostenloses Online-Tool, mit dem man ein quadratisches Bild im Format GIF, JPG oder PNG in ein 16×16 Pixel großes Favicon umwandeln und danach herunterladen kann. Das Besondere am Favinator ist, dass man einen Text als Laufschrift durch das Favicon scrollen lassen kann:

Stimmt: Geht sicher auch etwas phantasievoller, als ich das hier gemacht habe!

Mit <link rel=”shortcut icon” href=”favicon.gif” type=”image/ico” /> zwischen <head> und </head> einbinden.

Ob man sowas braucht? Unbedingt!

Wissenswertes rund um das Favicon

tag_icon

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a comment.

To leave a comment, please fill in the fields below.