Favicon erstellen

Als Favicons bezeichnet man die Symbole, die bei bestimmten Websites oder einzelnen Webseiten in der Adressleiste, in der Lesezeichen-Symbolleiste und im Bibliotheksfenster angezeigt werden. Sie werden auch als Icon für Internet Verknüpfungen auf dem Desktop oder in Ordnern angezeigt. Die Grösse eines Favicons ist in der Regel 16 x 16 Pixel.

Alles was Sie brauchen um ein Favicon auf Ihrer Webseite hinzuzufügen, ist eine Windows Icon (.ico) Datei. Normalerweise wird sie favicon.ico genannt und wird ins Hauptverzeichnis der Webseite hochgeladen (z.B. http://www.onyou.ch/favicon.ico). Heutzutag verwenden die meisten Browser, ausser Internet Explorer GIF (auch animierte) oder PNG (auch transparente) anstelle von ICO-Dateien. Doch alle Browser inklusiv IE verwenden das .ico Format. Hier eine kleine Anleitung, wie man selber eine .ico Datei erstellt und auf der Webseite integriert.

Download des Plugins für Adobe Photoshop
Sie werden das Windows Icon (ICO) Datenformat Photoshop Plugin zum Exportieren von .ico Dateien benötigen. Das Plugin kann ICO Files in 1, 4 und 8-bit Indexed, 24-bit RGB Modus und auch 32-bit “XP” icons (mit 8-bit alpha Kanal).

Erstelle der ico Datei
Da 16 x 16 sehr klein ist, kann auch ein grösseres Bild (z.B. 64×64) erstellt werden und später auf 16×16 verkleinerd werden. Achten Sie darauf, das Sie beim verkleinern den Modus “Bicubic Sharper” vom Pulldown-Menü wählen. Das ist die beste Einstellung um sicher zu sein, dass das Bild beim Verkleinern nicht unscharf wird. Wenn es immer noch nicht scharf genug ist, versuchen Sie das Originalbild zu überschärfen und übersättigen oder erhöhen Sie den Kontrast.

Speichern der ico Datei
Speichern Sie die Datei als favicon.ico (Datei/Speichern unter). Unter Format müssen Sie Windows Icon (ICO) vom Pulldown-Menü wählen. Dies ist erst nach der Instalation des Photoshop Plugins verfügbar.

Hochladen und einbinden in die Webseite
Jetzt müssen Sie die Datei favicon.ico ins Hautpverzeichnis (root) oder ein andere Verzeichnis hochladen. Fügen Sie im head jeder Seite, die Sie mit dem Icon versehen möchten die folgende Zeile hinzu.

<link rel="Shortcut Icon" href="/favicon.ico">

Manche Leute sind der Ansicht, dass es so mehr korrekt ist:

<link rel="icon" href="/favicon.ico" type="image/x-icon">

Es gehen beide Varianten! Oder sie verwenden GIF oder PNG Dateien (aber das funktioniert nicht mit IE):

<link rel="icon" href="/favicon.png" type="image/png">
<link rel="icon" href="/favicon.gif" type="image/gif">