Favicon Anleitung

Wie werden Favicons erstellt?

Ein Icon-File besteht immer aus einigen Bitmap-Graphiken.
Ein gängiges Favicon ist 16 x 16 Pixel groß und besteht aus 16 Farben. Um ein Favicon zu erstellen genügt es aber nicht eine beliebige Bilddatei als *.ico abzuspeichern.
Favicons kann man mit der Hand in einem Grafikprogramm erstellen, es als Icon-Format formatieren und mit der Endung .ico abspeichern. Hilfreich sind aber auch Tools, welche Icons automatisch generieren. Wichtig ist, dass das ursprüngliche Icon in einer Größe von 32 x 32 Pixel erstellt wird. An manchen Stellen wird das Icon aber kleiner dargestellt, so z.B. in der Adresszeile des Browsers und in der Task-, wie auch Favoritenliste. Daher ist es wichtig, dass das entworfene Icon auch noch in einer Auflösung von 16 x 16 Pixel gut erkennbar ist.

Favicons selber entwerfen?

Der einfachste Weg ein Favicon zu erstellen, ist mit Hilfe von sogenannten Favicon-Editoren. Zuerst zeichnet man dazu online das gewünschte Icon. Hierfür stehen so gut wie alle Funktionen eines gängigen Grafikprogramms zur Verfügung. Mit den gewünschten Einstellungen und den vorhandene Werkzeugen (Lupe, Rechteck, Stift und Radiergummi, Fülleimer oder Sprayer)bastelt man das gewünschte Icon in entsprechender Größe. Um dann das fertig erstellte Favicon per Mail zu erhalten, ist meist eine kostenlose Registrierung notwendig. Fast immer sind die erstellten Favicons kostenfrei.

Eine andere Möglichkeit, um von einer bereits vorhandene Grafik ein Favicon zu erstellen, ist der Download eines Konvertierungsprogrammes, welches die gewünschte Bilddatei in das Icon-Format umändert. Viele dieser Programme erhält man als Freeware-Tools.

Tutorial für die Erstellung eines Favicons mit einem Grafikprogramm

Mit dem Grafikprogramm ihrer Wahl erstellen Sie erst einmal ein Logo in einer Größe von 32 x 32 Pixel und einer Farbtiefe von 256 Farben (natürlich empfiehlt es sich das Bildchen zusätzlich als 16 x 16 großes Bild zu entwerfen). Dieses Logo speichern Sie dann in eine Bitmap-Datei (.bmp) ab. Beinahe jedes Grafikprogramm unterstützt dieses Bildformat. Das Icon sollte eine möglichst geringe Farbtiefe haben, damit keinerlei Ressourcen gefressen werden und das Icon schnell vom Webserver geladen werden kann.

Nun öffnen Sie die Bitmap-Grafik mit dem entsprechenden Konvertierungsprogramm und speichern es dort als Icon Grafik (.ico) ab. Oder aber man speichert das gewählte Bild mit einem vorhandenen Grafikprogramm als Icon Grafik ab.

Favicons in eine Internetseite einfügen

Um später Probleme beim Anzeigen des Favicons zu vermeiden, sollte jeder Webmaster sich klar darüber sein, wie das eigentlich funktioniert „zu den Favoriten hinzufügen“. In jedem Browser gibt es daher eine Funktion, womit sich Webseiten als Favoriten abspeichern lassen.
Oftmals findet man in gängigen Browser hierfür die Bezeichnungen „bookmark this page“, „zu den Favoriten hinzufügen“ oder „Lesezeichen hinzufügen“.
Nach einem „Klick“ auf die entsprechende Schaltfläche, wird die Adresse (URL) der Seite als Verknüpfung im Menü der Favoritenliste angelegt. Der Titel der Seite ist zugleich der Name dieser Verknüpfung. Der Webserver auf dem die favorisierte Seite liegt, fordert eine kleine Datei mit der Bezeichnung favicon.ico an. Dieses erscheint nun vor der URL in der Adresszeile.

Nachdem man das Bild abgespeichert hat legt man es am besten im Hauptverzeichnis der Domain ab. Bei www.beispiel.de sollte die URL dann www.beispiel.de/favicon.ico lauten. Den meisten Sinn macht es, wenn man das favicon.ico im selben Pfad wie die index.htm(l) ablegt und zwar im sogenannten Root Verzeichnis. Das sorgt für Übersicht und Ordnung auf dem Webserver. Liegt das Favicon im Root Verzeichnis, nimmt der Browser das Favicon als Standardfavicon für sämtliche Unterseiten der jeweiligen Webpräsenz. Werden auf der Seite Frames verwendet, verweist man auf das Favicon in der Datei des Framesets.

Der InternetExplorer (IE) sucht natürlich nach dem Öffnen einer Seite nach einem favicon.ico. Dabei untersucht der IE zu allererst den HEAD-Bereich der aufgerufenen Datei. Nun sucht der IE in der aufgerufenen Datei nach dem favicon.ico, um dann letztendlich seine Suche im Hauptverzeichnis zu beenden.

Natürlich benötigt die Webseite die entsprechende Information, wo denn nun das Favicon abgelegt ist. Am besten verwendet man hierfür den Tag. Mit der richtigen Syntax ist man dann auch schon fast am Ziel seiner Träume angelangt:

<link rel="SHORTCUT ICON" href="/pfad/dateiname.ico">

Diese Zeile setzt man in den HTML-Quelltext zwischen <head> und </head>. Linux-Server beachten immer noch die Groß- und Kleinschreibung. Das ist wichtig bei der Eingabe des Syntax und beim Ablegen des Favicon.

Nicht zu vergessen: Jede PHP, HTML oder ASP-Seite kann ein eigenes Favicon verwenden!

Es besteht außerdem die Möglichkeit einen absoluten oder relativen Verweis zu erstellen. Hierbei wird der vollständige Pfad, bzw. die komplette Internetadresse angegeben. Manche Provider unterstützen keine Icon-Dateien. Hier besteht dann die Möglichkeit ein Favicon einzubinden, welches auf einer ganz anderen Internetadresse liegt. Der Syntax hierfür lautet:

<link rel="SHORTCUT ICON" href="http://www.andere-internetseite.de/verzeichnis/favicon.ico">

Tipp! Multi-Image-Icons

Multi-Image-Icons sind Grafiken, welche Bilder in unterschiedlichen Größen und Farbtiefen enthalten. Auch diese Icons lassen sich als Favicons verwenden. Mittlerweile gibt es auch Konverter, welche animierte Favicons herstellen. Animierte Favicons wirken wie ein „Aha-Effekt“. Am besten setzt man diese Favicons gezielt ein. Ein animiertes Favicon sollte daher dezent sein und die Animation sollte sich nicht ständig wiederholen. Auch ein langsamer Animationsablauf ist von Vorteil. Da einige Webbrowser animierte Favicons nicht unterstützen, ist es sinnvoll, dass das erste Bild der Animation, das statische Bild des nicht animierten Favicons darstellt.

Im Gegensatz zu einem herkömmlichen Favicon, sollte das animierte Favicon im GIF-Format (.gif) vorliegen. Die Farbtiefe darf 256 Farben nicht überschreiten und die Größe sollte 16 x 16 Pixel betragen. Parallel zum animierten Icon, erstellt man aus dem ersten Bild der Animation, ein statisches Favicon, welches ebenfalls eine Größe von 16 x 16 Pixel und eine Farbtiefe von 256 Farben hat. GIF-Bilder erstellt man ganz einfach mit dem eigenen Grafikprogramm, wer keins besitzt, der benutzt dafür einen Konverter.

Normalerweise speichert man das Favicon als .ico (MS Windows Symbol Ressource Format) ab, welches man dann die Bezeichnung favicon.ico gibt. Die animierte Variante speichert man im GIF-Format ab und gibt dem Icon die Bezeichnung favicon_animated.gif. Hiermit wird die größte Browserkompatibilität erreicht. Das animierte Icon legt man dann ebenfalls im Hauptverzeichnis des Webservers ab (http://www.blubb.de/favicon_animated.gif).

Damit der Webbrowser das animierte Favicon darstellen kann, wird das Icon im Quellcode referenziert. Dann setzt man in den HTML <head> Bereich ein <link> und verlinkt so das animierte Favicon.

Damit auch alles funktioniert, referenziert man das Favicon doppelt. So wird die Referenzierung einmal für das herkömmliche Favicon und einmal für das animierte Favicon gesetzt.