Webdesign - Webseiten planen, gestalten - Free-Hack Library

Interfacedesign
6.7.10 Favorite-Icons
Ein heute immer weiter verbreitetes Zusatzfeature bei Websites ist
das „favicon“ (favorite icon). Dabei handelt es sich (im Web) um
ein meist 16 x 16 Pixel kleines Bildchen, das in der Adresszeile des
Browsers neben der URL angezeigt wird (Abb. 6.9.10a).
Die Gestaltung des Favicons kann man auch dem Interfacedesign
zuordnen, da es als Orientierungsmerkmal dient und die Wiedererkennbarkeit
der Seite erhöht. Das trifft insbesondere dann zu,
wenn eine Seite als Bookmark gespeichert wird. In der Favoritenliste
erscheint dann das Favicon mit dem Bookmarktext. Es erscheint
außerdem in den Registerkarten des Browsers und unter Windows
beim Abspeichern einer Seite auf dem Desktop. Aus diesem Grunde
lohnt es, diesem kleinen Add-on ein wenig Aufmerksamkeit zu
widmen.
Technisch gesehen handelt es sich beim favicon.ico um ein ICO-
Format (image/x-icon oder image/vnd/microsoft.icon). Anders als
„normale“ Bitmap-Dateiformate erlaubt das ICO-Dateiformat,
mehrere Einzelbilder (mit unterschiedlichen Abmessungen und
Farbtiefen) in einer Datei unterzubringen. Die das Icon nutzende
Anwendung sucht sich dann das benötigte Bildformat heraus.
Alternativ zum ICO-Format können auch GIF und PNG-Grafiken
zum Einsatz kommen, diese jedoch mit Einschränkungen in der
Farbtiefe. Auch erlauben die beiden letztgenannten Formate
lediglich ein einzelnes Bild innerhalb der Datei.
Um ein Favicon in die Website einzubinden, reicht es aus, das
entsprechende Favicon als favicon.ico im Wurzelverzeichnis Ihres
Webangebots abzulegen. Dann erkennt der Browser das
Icon automatisch und zeigt es entsprechend an. Geeignete Tools
zur Erzeugung des ico-Formates sind als Freeware im Internet
verfügbar.
Kommt ein GIF oder PNG zum Einsatz, oder sollen innerhalb einer
Website mehrere unterschiedliche Icons verwendet werden, muss
das Favicon im -Bereich referenziert werden.
Damit das Favicon angezeigt wird, müssen Größe und Farbtiefe stimmen.
Folgende Größen kommen am häufigsten zum Einsatz:
DESIGNENTWURF 6
Abb. 6.7.10a: Designs von Favicons
(Screenshots in Originalgröße)
Kleine Anekdote
Der Webentwickler und Designer Mathieu
Henri realisierte das Arcade-Spiel „Defender“
komplett in einem Favicon.
Linktipp:
Defender: http://www.p01.org/releases/DHT-
ML_contests/files/DEFENDER_of_the_favicon/
Linktipps zur Erzeugung von favicons:
Favicon-Generator: http://www.favicongenerator.de/
Bilder in Favicons umwandeln: http://www.
html-kit.com/favicon
231