07.06.12

Favicon einbinden

Jeder kennt sie und fast jeder will sie: Favicons. Sie einzubinden ist dabei auch relativ einfach: man benötigt nur ein geeignetes Icon und muss 2 Zeilen in den head-Bereich der Website einfügen.

1, Das richtige Icon

Zunächst benötigt man das Bild, das man als Favicon verwenden möchte in Form eines Windows Icons (.ico) mit einer Auflösung von 16x16px oder 32x32px und einer Farbtiefe bis maximal 32bit.

Ein kostenloses Programm um Bilder in Favicons zu konvertieren bzw. generell Windows Icons zu erstellen und zu bearbeiten ist der GreenFish Icon Editor.

2, Das Icon einfügen

Nachdem man das Icon auf den Webspace geladen hat muss man dem head-Bereich der Seite nur noch folgendes hinzufügen:

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

Wobei die zweite Zeile nur der Kompatibilität mit älteren Browsern dient.

3, Testen

Zum Abschluss sollte man auch noch testen ob  das Favicon angezeigt wird. Auf dieser Seite findet sich ein Validator der prüft ob das Favicon richtig eingebunden wurde, bzw. der einem hilft Fehler zu finden: http://ifavicon.com/tools/favicon-validator.

Natürlich kann man auch mit seinem eigenen Browser testen, ob das Favicon angezeigt wird, jedoch sollte man nicht vergessen den Cache zu leeren, da es sonst u.U. nicht angezeigt wird.

Das könnte Sie auch interessieren:

• Internet Explorer: CSS Transparenz und Text
• Website mit Touchicon ausstatten
• CSS: Schriftfarbe von deaktivierten Textboxen ändern
• CSS: Nicht selektierbarer Text
• PHP: RSS Feed Reader in 10 Minuten

Sag deine Meinung

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