ilimitado Web Entwickler Blog

Wem es nicht bereits aufgefallen ist, ilimitado.de und der ilimitado Entwickler Blog haben nun eigene Favicons.

Favicons (von Favorit und Icon) sind kleine, 16×16 Pixel großes Bildchen. Sie werden in der Adresszeile eines Browsers links von der URL angezeigt, sowie auch in den Lesezeichen (Favoriten).
Das Format ist das Microsoft .ICO Format (MIME-Type image/vnd.microsoft.icon).
Eingebunden in die Homepage werden sie über die HTML – Meta Angabe

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

innerhalb des HTML – HEAD Bereichs.

Leider kann man aus gängigen Graphikprogrammen dieses Format nicht ohne weiteres exportieren. Es gibt allerdings eine Homepage welche einen Online Favicon Editor, bzw einen Online Favicon Creator anbietet. Dort können .gif, .png oder .jpg Dateien importiert werden und im .ico Format gespeichert werden. Ausserdem ist es möglich Online das Favicon zu verändern durch setzen von Pixeln. Einfach mal testen!

Etwas komfortabler ist das Feeware Desktop Tool IcoFX. Es bietet alles, was ein Icon Editor braucht. Hier lassen sich ebenfalls png, gif, jpg etc. importieren. Außerdem ist es möglich, transparente Icons zu erzeugen. Für Unterwegs gibt es sogar eine lauffähige standalone Version für den USB Stick (unter downloads)
Da dies nicht alle Browser unterstützen bietet das .ICO Format die Möglichkeit mehrere Versionen des Icons in eine Datei zu speichern. Z.B. ein 16×16 großes Icon mit (alpha) Transparenz und ein 16×16 großes Icon ohne (alpha) Transparenz. Ausserdem kann man auch noch zusätzlich ein 32×32 Icon oder andere Größen mit in das Favicon speichern. In Browser wird aber nur das 16×16 Icon benötigt.

Favicons sind meiner Meinung nach auch etwas, was man im weiten Sinn als Pflicht für barrierefreies Webdesign sehen kann. Ich surfe oft mit vielen offenen Tabs und anhand der Favicons kann ich doch um einiges schneller zwischen den Tabs umschalten, da ich anhand des Icons sofort sehe, welche Homepage unter welchem Tab ist.

Es ist übrigens z.B. im Mozilla Firefox auch möglich über die zusätzliche zweite HTML – Meta Angabe

<link href="/path/to/favicon.ico" rel="Shortcut Icon" />
<link href="animated_favicon.gif" rel="icon" type="image/gif" />

innerhalb des HTML – HEAD Bereichs, zusätzlich zum normalen Favicon ein animiertes Favicon bereitzustellen. Hierzu wird ein normales animiertes GIF benötigt. Der Firefox zeigt dann an der Stelle des Favicons das animierte Favicon (gif) an. Alle anderen Browser das normale Favicon (ico).

In Bezug auf barrierefreies Webdesign ist von animierten Favicons dann aber doch eher abzuraten und auch meine persönliche Meinung ist, dass dies hin und wieder ganz nett und effektvoll ist, aber im Endeffekt irgendwann nervt und nur ablenkt, ich rate von animierten Favicons also eher ab.

update
Ideen, und wie man sein eigenes Favicon gestalten kann bietet seit neustem das Smashing Magazin im Beitrag “Creative Favicons: When Small Is Beautiful”