favicon.ico – Favicon einbinden

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

Posted in Grafik
4 Comments » for favicon.ico – Favicon einbinden
  1. Sebastian sagt:

    Toller Beitrag. Bitte änder aber noch deinen Code, da du die falschen Anführungszeichen hast.

    Richtig wäre:

  2. simooon sagt:

    wie kann ich das bild auf den server laden?

  3. admin sagt:

    @Sebastian, vielen Dank, habs geändert, weiß auch nicht, was ich da gemacht hab….

  4. MG sagt:

    wie gebe ich es genau ein:

    und muß es denn bei dieser Eingabe eine gif-Datei sein?

    Fragende Grüße
    MG

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>