Ein Favicon ist ein grafisches Element (eigentlich die Abkürzung für „Favorites Icon“), welches zum Beispiel im Browser in der Adressleiste angezeigt wird, und die angezeigte Website zusätzlich individualisiert.
So kann dort beispielsweise das Logo eines Unternehmens integriert werden. Favicons werden auch vor Lesezeichen (Bookmarks) im Browser angezeigt, und können dem Benutzer helfen, die gesuchte Seite schneller wieder zu finden. Im folgenden möchten wir kurz zeigen, wie man eine Website mit einem passenden Favicon versehen kann.
Ein Favicon in die eigene Website integrieren
- Favicon erstellen: Ein Favicon kann mit einem beliebigen Grafikprogramm erstellt werden. Ein Favicon ist standardmässig 16 x 16 Pixel gross, es gibt aber auch bestimmte Fälle, wo es in einer Grösse von 32 x 32 Pixel verwendet wird (für Darstellungen in der Toolbar oder auf dem Desktop). Es ist daher ratsam, das Favicon in einer Grösse von 32 x 32 Pixel zu erstellen und gleichzeitig darauf zu achten, dass es auch in einer Auflösung von 16 x 16 Pixel noch erkennbar ist und gut aussieht. Das Bild kann dann im JPG- oder GIF-Format abgespeichert werden.
- Umwandeln der Bilddatei in das Icon-Format (.ico): Um ein Favicon nutzen zu können, muss es in einem speziellen Format vorliegen, dem sogenannten Icon-Format. Um eine solche Datei zu erstellen, gibt es verschiedene Tools. Ein sehr praktisches Online-Tool, welches diese Aufgabe übernimmt, ist FavIcon from Pics. Man wählt einfach das erstellte Bild aus, und drückt „Generate FavIcon.ico“. Die Website liefert einem dann bequem alle benötigten Favicons, inklusive einer animierten Version. Auf Wunsch können nicht benötigte Favicon-Varianten entfernt werden, bevor die Icons heruntergeladen werden. Dazu klickt man auf den grün hinterlegten Link „Download FavIcon Package“ (Achtung: nicht den prominenten „Download“ Button auf der rechten Seite)
- Favicon in die Website einbinden: Damit das neue Favicon in der Website angezeigt wird, muss dieses auf den Webserver geladen werden (dies kann mit einem normalen FTP-Programm gemacht werden). Wenn das Favicon auf jeder Seite der Website erscheinen soll, sollte es reichen, wenn es in das Hauptverzeichnis der Website geladen wird. Wichtig hierbei ist es, dass die Favicon-Datei den Namen „favicon.ico“ trägt. Soll das Favicon nur für ein bestimmtes Verzeichnis angezigt werden, wird die Datei einfach in den entsprechenden Ordner geladen (Wichtig: ebenfalls wieder mit dem Namen „favicon.ico“). Als dritte Möglichkeit gibt es die Variante, die Favicon-Datei im Quellcode der Website zu referenzieren:
<link rel=“shortcut icon“ href=“/pfad/dateiname.ico“>
Dieser Code wird im head-Bereich der Website platziert (zwischen <head> und </head>) und bietet damit nicht nur die Möglichkeit einen anderen Dateinamen des Favicons zu definieren, sondern auch Favicons nur für bestimmte Webseiten einzufügen.
Man sollte immer im Hinterkopf haben, dass nicht alle Browser gleich mit den Favicons umgehen, und diese auch nicht von allen (aber doch von den meisten) Browsern unterstützt werden.
Trackbacks/Pingbacks