Favicon auf der Homepage

Logo zum Wiederfinden

Das Favicon setzt sich aus den Begriffen Favoriten und Icon zusammen. Ein Icon ist ein kleines Bild, das symbolisch für einen bestimmten Inhalt steht und die Favoriten sind jene Webseiten und deren Unterseiten, die man in seinen persönlichen Favoriten im Browser (Internet Explorer, Firefox, Safari & Co.) speichert.

Was bringt das Favicon?

Damit ist die Idee auch schon verraten, denn ein Favicon ist ein kleines Icon, das in der Adresszeile des Browsers - dort, wo man die URL´s eingeben kann - dargestellt, wenn die Webseite geladen wird. Es handelt sich um ein Bild in der Größe von 16x16 Pixel, das mit jedem Grafikprogramm hergestellt werden kann. Aufgrund der Dimension sind allerdings besonders ausgefallene Grafiken nicht möglich, man muss sich auf einen Buchstaben oder ein Symbol wie Sonne oder ähnlichem beschränken.

Was bringt das Favicon jetzt eigentlich? Schön, im Browser sieht man das Symbol links neben der Internetadresse - und weiter? Der eigentliche Grund für die Idee, die von Microsoft für den Internet Explorer ausgegangen war, war das schnelle Auffinden bestimmter Internetseiten in den persönlichen Favoriten. Wenn man beispielsweise viele Webseiten gespeichert hat, sucht man durchaus etwas länger, bis man die gewünschte Seite im Verzeichnis gefunden hat.

Hier soll das Favicon helfen, denn das Symbol wird nicht nur bei der Adresse nach dem Aufruf der Seite oder deren Unterseiten dargestellt, sondern auch in den Favoriten des Browsers selbst. So lässt sich das Symbol leicht wiedererkennen und damit auch die Adresse der Webseite, die man dann schneller anklicken kann.

Ob das allerdings ein Effekt ist, der auch dann eintritt, wenn jeder Eintrag ein solches Symbol hat, sei dahingestellt. Es gilt auch zu bedenken, dass viele die Webseite direkt über die Suchmaschine aufrufen, auch wenn sie oftmals schon auf der Seite zu Gast waren. Eine Zeit lang gab es Social Bookmark-Dienste, in denen Links gespeichert werden konnte, aber einige davon gibt es gar nicht mehr, weil sie sich nicht gerechnet hatten.

Favicon mal vier

Durch den viel häufigeren Einsatz von mobilen Geräten ist die Empfehlung deutlich erweitert worden. Das originale Favicon ist weiterhin 16 x 16 Pixel groß. Man sollte aber für die verschiedenen Geräte vier Stück anbieten. Das Favicon bleibt, wie es ist, dazu gibt es aber eine Version mit 32 x 32 Pixel, eine Version mit 96 x 96 Pixel und eine große mit 180 x 180 Pixel für die iPhones.

Verlinkt werden sie wie am Beispiel dieser Seite im Kopfteil so:

<link rel="shortcut icon" href="URL/favicon.ico" /> <link rel="icon" type="image/png" href="URL/favicon-32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="URL/favicon-96.png" sizes="96x96" />
<link rel="apple-touch-icon" sizes="180x180" href="URL/apple-touch-icon.png" />

Lesen Sie auch

Wie auch immer man die Seite mit seinen Seitenfunktionen aufbauen möchte, in den meisten Fällen wird oben und unten ein gleichartiger Abschluss angestrebt. Oben die Kopfzeile (englisch header) mit Logo und Aussage, unten die Fußzeile (englisch footer) mit Kontaktinfos, Impressum und Datenschutzerklärung.

Wichtig auf der Seite ist immer, dass sich die Leute zurechtfinden können. Das kann man mit weiterführenden Links am Ende der Artikel erreichen oder auch mit einer Navigation, die über die Ebenen und Themen führt. Auch die Pfadnavigation (Breadcrumbs) hilft bei der Orientierung.

Und dann gibt es natürlich den Inhalt selbst (englisch Content) mit den Artikeln zum Thema der Seite. Selbst ein offenbar kleinerer Blog kann es im Laufe der Zeit auf ein paar hundert Artikel bringen und der Content kann auch durch Funktionen wie einer eigenen Kontaktseite, einer Suchmaschine oder anderer Funktionen aufgewertet werden.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel