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.
Wie mache ich so etwas für meine Seite?
Generell braucht man dafür 2 Dinge:
1. das Bild selbst
2. 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. Wenn das Bild schon vorliegt, kann der nächste Schritt übersprungen werden.
Anfertigen des Favicon Bildes
Anforderungen: Dateiformat und Größe
die Standard - Größe eines Favicons ist 16x16 Pixel. Benutze ein Bildbearbeitungsprogramm deiner Wahl, um ein Bild als .ico zu erstellen. Nicht jedes Programm kann dieses Format schreiben. Das Format 16 mal 16 Pixel sollest Du aus Kompatibilitäts- und Speicherplatzgründen verwenden. Sonst ergeben sich hier schon die ersten Probleme - doch dazu später.
Kein guter Stil ist es, *.bmp, *.gif, *.jpg Bilder einfach in *.ico umzubenennen.
Anforderungen: Farbtiefe
Ich empfehle einen Blick auf die Farbtiefe zu werfen: Viele Probleme lassen sich vermeiden, wenn man eine Palette mit wenigen Farben benutzt. So wird das Favicon weniger Resourcen verschwenden und es wird schneller geladen. Wenige Farben verwenden - keine Bandbreite verschwenden!
Tipp:
Bringe das Bild mit 32 bit (Fotoqualität) auf die richtige Grösse und rechne die Farbtiefe dann auf 8 bit herunter. Dies stellt einen guten Kompromiss zwischen Dateigröße und Qualität dar.
Das Favicon - Bild im Verzeichnis 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.harald.com heißt, sollte die URL
http://www.harald.com/favicon.ico lauten.
die Referenz zum Bild in der Webseite
Fast geschafft! Nun benötigt die Webseite noch die Information, wo das Bild gespeichert ist. Denn auch, wenn Du mit dem An- und Ablegen des Bildes den wichtigsten Schritt getan hast, 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 deinem HTML-Quelltext zwischen <head> und </head>. Denke 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.
bekannte Probleme mit Favicons vermeiden:
Selbst wenn Browser immer besser werden, viele Leute empfinden the support for Favicons is entirely voodoo. Ich habe einige Unterschiede zwischen Browsern bei der Behandlung von Favicons festgestellt.
* Ein Favicon-Bild wird in den Favoriten gespeichert, wenn man eine Seite zu den Favoriten hinzufügt und man gerade online ist! In diesem Fall wird die Datei favicon.ico vom HTTP-SERVER angefordert.
* Niemals: ein Bild (z.B. Bitmap- oder jpg- Datei) einfach in .ico umbenennen.
* Niemals: das Favicon - Bild größer als 16x16 Pixel machen.
Icons in der Größe 32x32 Pixel oder größer werden vom Browser verkleinert, nur im Ausschnitt oder gar nicht angezeigt.
* Niemals: den wichtigen MIME-Typ im <link> - Tag vergessen!
* Microsoft Internet Explorer unterstützt Favicons erst seit Version 5.0
* Internet Explorer halten das Favicon im Browser-Cache. Beim Leeren verliert man alle bis dahin gesammelten Bildchen.
* Sorge dafür, dass dein Webserver *.ico - Dateien wirklich als type="image/x-icon" ausliefert. Dies kannst Du einfach überprüfen, in dem Du den vollen Pfad zum favicon (
http://www.harald.com/favicon.ico) in die Adresszeile des Browsers eingibst. Wird das Bild gefunden und im Browser angezeigt? Oder ist statt dessen eine wirre Zeichenkette zu sehen? Schau dir die Seiteneigenschaften an. Internet Explore r= Datei:Eigenschaften. Firefox= Extras: Seiteninformationen. Dort sollte neben Typ auf jeden Fall image/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.
Ico - Dateien werden von Web-Servern nur dann korrekt an den aufrufenden Browser übertragen, wenn in der Konfiguration des Web-Servers ein MIME-Typ für den entsprechenden Dateityp eingetragen ist.
* Viele Browser fordern immer (auch ohne <link ...> Tag) die Datei favicon.ico vom Server an, um das Bildchen in Tabs und Adresszeile anzeigen zu können. Dies bedeutet, dass jedes Mal ein error 404 entsteht, wenn die Datei nicht gefunden wird.
* Anders als im Internet Explorer sichert der Browser Firefox 1.x seine Favicons direkt in die Datei bookmarks.html Dies lässt die Bookmarks-Datei in ihrer Größe anschwellen.
* Provider unterstützt favicon nicht? (Workaround) Wenn Du den HTML-head Bereich deiner HTML-Dateien nicht bearbeiten kannst: Lege einfach die Datei favicon.ico im Hauptverzeichnis deines Webspace ab. So wird das Bild oft auch ohne HTML-Referenz-Tag im Browser angezeigt.
für Spezialisten
Oder hoffnungslose Individualisten: Du kannst auch multi-image icons als favicon verwenden, die Bilder in verschiedenen Größen und Farbtiefen enthalten. Genauso sind animierte Favicons möglich. Man kann 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.
Für maximale Kompatibilität bieten sich Windows XP Icons an, die über alpha transparency verfügen.
Programme
Es gibt eine Vielzahl Vollpreis, Share- und Freeware - Programmen, die sich entweder nur zum konvertieren ins *.ico Format oder gar zum Erstellen und Verwalten von Icon-Bibliotheken eignen: Irfan View, Microangelo, snicoedit, Axialis IconWorkshop (formerly known as Axialis AX Icons). Freunde des Betriebssystems Linux können sich an der Bildbearbeitungs-Software GIMP erfreuen, mit der man auch Icons erstellen kann.
Wie bekomme ich ein Favicon neben die Linkadresse?
,
Linear-Darstellung
