Was ist ein Favicon?
Die meisten Browser können ein kleines Bild in den Bookmarks
, also den Favoriten
oder Lesezeichen
anzeigen, wenn man die Seite dort hinzufügt. Das Wort Favicon verdeutlicht dies als Kombination aus Favoriten und Icon. Grafische Browser wie Mozilla, Firefox, Opera, Konqueror, Safari … zeigen es auch in der Adressleiste und in Tabs an.
Warum Favicons?
Sie sind eine großartige Möglichkeit, um eine Seite wiedererkennbar zu machen. Sie fördern die Benutzerfreundlichkeit und Popularität der Webseite, indem Sie dieses kleine Bild korrekt einbinden. Gute Favicons sind echte Eye-Catcher in der Liste ihrer Besucher.
Was passiert beim bookmarken
?
Um Probleme bei der Anzeige von Favicons zu vermeiden, hilft es, sich über den Vorgang des zu den Favoriten hinzufügens
klar zu sein.
Sie finden im www die Seite http://www.example.com
, welche Sie sich gern merken würden, um sie später schnell wieder zu finden. Dafür gibt es die Funktion des zu den Favoriten hinzufügen
, auch Lesezeichen hinzufügen
oder englisch bookmark this page
benannt.
In allen Fällen wird eine Verknüpfung mit der Adresse http://www.example.com
im Menü Favoriten/Lesezeichen/bookmarks angelegt. Als lesbarer Text wird der Titel der Seite verwendet.
Gleichzeitig wird vom Webserver, auf dem die Seite http://www.example.com
liegt, eine Datei namens favicon.ico angefordert. Dies ist ein kleines, frei gestaltbares Bild, welches anstatt des Voreingestellten angezeigt wird. In eben der Favoriten-Liste vor dem Titel.
Webmaster!
erleichtere dem Browser die Arbeit! Komm deinen Besuchern entgegen! Die Datei favicon.ico:
- auf dem Webspace ablegen
- in Webseiten verlinken
- prüfen, ob sie vom Server richtig ausgeliefert wird
- das Bildmotiv einen Bezug zur Seite erkennen lassen (z.B. Logo)
Favicon-Auslieferung erfolgt mit und durch den Webserver! Im lokalen Dateisystem kann man eine Adresse zwar bookmarken - ein eventuell vorhandenes/zugehöriges Favicon will jedoch per http angefordert sein.
Der ursprüngliche Weg, ein favicon zu definieren, war eine Datei namens favicon.ico
im Wurzelverzeichnis des Webservers abzulegen. Später fand man einen flexibleren Weg: den Link zur Datei in der Webseite anzugeben.
Wie mache ich so etwas für meine Seite?
Sie benötigen dafür:
- das Bild selbst
- die Referenz auf das Bild in der Seite
Das Bild muss eine icon-Datei (*.ico) sein, platziert im Hauptverzeichnis der Domain
mit dem Dateinamen favicon.ico
. Ich empfehle, ein eigenes Bild anzufertigen.
1. Favicon Bild anfertigen
Anforderungen: Dateiformat und Größe
Benutzen Sie ein Bildbearbeitungsprogramm ihrer Wahl, um ein 16 mal 16 Pixel großes Bild zu erstellen. Speichern Sie das Bild als *.ico oder wandeln (konvertieren) es in *.ico um!
Kein guter Stil ist es, *.bmp, *.gif, *.jpg Bilder einfach in *.ico umzubenennen.
Anforderungen: Farbtiefe
Verwenden Sie eine geringe Farbtiefe (wenige Farben), um keine Webspace-Ressourcen zu verschwenden und das Bild schneller laden zu lassen. Wenige Farben verwenden - keine Bandbreite verschwenden!
Tipp:
Bringen Sie das Bild mit 32 bit (Fotoqualität) auf die richtige Grösse und rechnen Sie die Farbtiefe dann auf 8 bit herunter. Dies stellt einen guten Kompromiss zwischen Dateigröße und Qualität dar.
2. Favicon im Hauptverzeichnis ablegen
Das Bild ist 16x16 Pixel groß und ico - Format? Dann die Datei im Hauptverzeichnis der Domain/des Verzeichnisses ablegen. Falls die Domain http://www.example.com heißt, sollte die URL http://www.example.com/favicon.ico lauten.
Root-Verzeichnis?
favicon.ico im selben Pfad wie ihre index.html ablegen: das schafft Ordnung und macht Sinn.
Beispiel: Das Hauptverzeichis (auch root - Wurzelverzeichnis - genannt) dieser Seite ist http://michael-hocke.de/.
Verwenden Sie Frames, so verweisen Sie auf das Favicon in der Datei ihres Framesets.
3. auf Favicon verweisen
Nun benötigen Ihre Webseiten noch die Information, wo das Bild gespeichert ist. Denn auch, wenn Sie mit dem An- und Ablegen des Bildes den wichtigsten Schritt getan haben, ist es eine gute Idee auch den <link ...> Tag zu verwenden. Die richtige Syntax des link - Tags ist:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Der richtige Platz für diese Zeile ist in Ihrem HTML-Quelltext zwischen <head> und </head>.
Denken Sie immer daran, dass GROSS und kleinschreibung auf UNIX-Servern beachtet wird! Jede HTML / PHP / ASP … Seite kann eine anderes favicon haben, aber nur eines auf einmal.
Online Favicon Validator
Der Favicon Validator bei html-kit.com bietet eine kostenlose Prüfung:
- favicon vorhanden?
- favicon lesbar?
- <link ...> Tag gültig?
- macht Vorschläge zur Verbesserungs der Browserkompatibilität …
- (in Englischer Sprache)
bekannte Probleme mit Favicons vermeiden:
Trotz Standards behandeln Internet-Browser Favicons unterschiedlich.
- Icons größer als 16x16 Pixel werden vom Browser verkleinert, nur im Ausschnitt oder gar nicht angezeigt.
- Niemals den wichtigen MIME-Typ im <link> - Tag vergessen!
- Internet Explorer halten das Favicon im Browser-Cache. Beim Leeren verliert man alle bis dahin
gesammelten
Bildchen. - Viele Browser fordern auch ohne
<link ...>-Tag das favicon.ico vom Server an, um es in Tabs und Adresszeile anzuzeigen. Ohne favicon.ico im Hauptverzeichnis entsteht so mit jedem Aufruf ein error 404. - Firefox sichert Favicons direkt mit in die Datei bookmarks.html
Tipps
- Provider unterstützt favicon nicht? (Workaround) Wenn Sie den HTML-head Bereich Ihrer HTML-Dateien nicht bearbeiten können: Legen Sie einfach die Datei favicon.ico im Hauptverzeichnis ihres Webspace ab. So wird das Bild oft auch ohne HTML-Referenz-Tag im Browser angezeigt.
- Sorgen Sie dafür, dass ihr Webserver *.ico - Dateien wirklich als
type="image/x-icon"ausliefert. Dies können Sie einfach überprüfen, in dem sie den vollen Pfad zum favicon (http://www.example.com/favicon.ico
) in die Adresszeile des Browsers eingeben. Wird das Bild gefunden und im Browser angezeigt? Oder ist statt dessen eine wirre Zeichenkette zu sehen? Sehen Sie sich die Seiteneigenschaften an. Internet Explorer= Datei:Eigenschaften. Firefox= Extras: Seiteninformationen. Dort sollte nebenTyp
auf jeden Fallimage/x-icon
stehen. Falls nicht, dann ist in der MIME-Typ Konfiguration des Webservers kein oder ein falscher Typ für Dateien mit der Endung .ico eingetragen.
Apache-Server-Konfiguration: Dateien vom Typ ico richtig ausliefern
Ico - Dateien werden von Web-Servern nur dann korrekt an den aufrufenden Browser übertragen, wenn in ihrer Konfiguration ein MIME-Typ für den entsprechenden Dateityp eingetragen ist. Bitten Sie gegebenenfalls Ihren Webmaster/Provider/Administrator, den erforderlichen Eintrag image/x-icon
für Dateien mit der Endung .ico in der Webserver-Konfiguration vorzunehmen.
Ist ihr Webserver ein Apache, so können Sie selbst diese Webserver-Konfiguration vornehmen: fügen Sie die Zeile AddType image/x-icon .ico in der Datei .htaccess hinzu.
kein Favicon im IE6!
Die Anzeige von Favicons im Microsoft Internet Explorer 6 ist höchst unzuverlässig. Sie können davon ausgehen, dass der IE6 kein Favicon in der Adresszeile anzeigt. Verwenden sie neuere Browser wie Internet Explorer7, Mozilla Firefox, Opera oder Safari, um Favicons in Adresszeile, auf Tabs und in der Favoritenliste anzeigen zu lassen.
für Spezialisten
Multi-Image-Icons, die Bilder in verschiedenen Größen und Farbtiefen enthalten, lassen sich als favicon verwenden. Auch animierte Favicons sind möglich. Empfehlenswert: Icons mit transparentem Hintergrund verwenden. Möglicherweise beschränkt sich die Transparenz aber nur (wie bei *.gif) auf eine Farbe und ein Alpha-Kanal kann nicht dargestellt werden.
Programme
Es gibt viele Vollpreis, Share- und Freeware - Programme, die sich zum konvertieren ins *.ico Format oder zum Erstellen und Verwalten von Icon-Bibliotheken eignen: Irfan View, Microangelo, snicoedit, Axialis IconWorkshop (formerly known as Axialis AX Icons), GIMP etc.
aufmerksam gelesen?!
Vielen Dank für das aufmerksame Lesen dieses Artikels! Bitte berücksichtigen Sie, dass ich keinen weiteren kostenlosen Support rund um Favicons bieten kann.
