Favicon – wie kommt das Icon in die Adressleiste?
Im Design liegt der Erfolg meiner Meinung nach auch im Detail. Ähnlich verhält es sich für mich mit dem Favicon im Bereich des Webdesigns. Bei der Erstellung einer Webpräsenz sollte man das kleine Pixelpaket, bekannt aus der Adressleiste oder den Favoriten, nicht unterschätzen.
In den letzen Jahren hat das Favicon mehr Aufmerksamkeit von den Webdesignern und den Browserherstellern bekommen als zur Einführung. Das mit der Produktversion 5.0 des Internet Explorers im März 1999 eingeführte Favicon bekam nicht gleich die verdiente Beachtung. Das von Microsoft eingeführte Icon, das meist links in der Adresszeile des Browsers oder neben den persönlich gespeicherten Lesezeichen angezeigt wird, wurde erst einige Zeit später von den Konkurrenten, wie Mozilla oder anderen Browserherstellern übernommen.
Photoshopvorlage (16x16 Pixel)
Mittlerweile hat das nicht ganz sinnlose Pixelquadrat bei so manchem Webdesigner den Kultstatus erreicht und in einigen Galerien kann man sich die kleinen Pixel-Icons ansehen. Es ist denke ich wichtig dem Icon einen hohen Wiedererkennungswert zu verleihen. Zuviel Detailverliebtheit ist bei der Erstellung nicht gefragt, eher kommt es auf das Reduzieren auf leicht erkennbare Formen und Farben an.
Bei der Erstellung sollte man darauf achten, dass man gleich mit einer Arbeitsfläche von 16×16 Pixel arbeitet, denn das Herunterskalieren von größeren Formaten führt zu unschönen Interpolationen der Pixel und evtl. bis zur Unkenntlichkeit es Favicons.
Ich stelle meine Favicons direkt in Photoshop her und speicher mit Hilfe eines Plugins das Ergebnis im .ico-Format ab. Es gibt jedoch auch Onlinetools zur Herstellung von Favicons.
Eingebunden wird das im .ico-Format gespeicherte Icon im Header einer HTML-Datei wie folgt:
1 2 3 4 | <head> … <link rel="shortcut icon" href="http://beispiel.de/favicon.ico" type="image/x-icon"> <link rel="icon" href="http://beispiel.de/favicon.ico" type="image/x-icon"> … </head> |
Schönes Tutorial zur Erstellung eines Favicons in Photoshop (engl.)
http://www.photoshopsupport.com/tutorials/jennifer/favicon.html
Galerien und Beispiele
http://www.drweb.de/weblog/weblog/?cat=13
http://www.drweb.de/webgrafik/favicons-5.shtml?p=111
http://www.deltatangobravo.com/archive/2004/march/favourite
Photoshop Plugin
Zum Speichern im .ico-Format benötigt ihr ein Plugin, dass ihr kostenlos herunterladen könnt.
http://www.telegraphics.com.au/sw/
Animiertes Favicon
1 2 | <link rel="shortcut icon" href="http://www.beispiel.de/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://www.beispiel.de/favicon_animated.gif" type="image/gif" /> |
Bei animierten Favicons notiert man zwei link-Tags nacheinander. Browser, die animierte Favicons (.gif) nicht anzeigen können, greifen dann auf das statische Favicon zurück. Einen schönen Artikel zum Thema animierter Favicons findet ihr auf viomatrix.de.
http://www.eyestormstudio.com/blog/?p=8
http://www.viomatrix.de/cms-kostenlos-bilder-icons-animierte-favicon-webseite-gif.html
OnlineTools zur Herstellung eines Favicons:
http://www.favicon.cc/
http://www.favicongenerator.com/
Letzte Kommentare
Der/das Blog lebt!
Heute einfach mal wieder stehen bleiben?...
Hallo, bin gerade auf diese Seite gestoßen....