- Favicon.ico
-
In vielen Browsern werden Favicons in allen geöffneten Registerkarten, der Liste der Favoriten (Lesezeichen) und in der Adressleiste neben der URL angezeigt.Ein Favicon (kurz für favourite icon) ist ein kleines, 16×16 oder 32×32 Pixel großes Bildsymbol oder Logo, das in der Adresszeile eines Browsers links von der URL angezeigt wird und meist dazu dient, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen. Es taucht auch in der Lesezeichenleiste (Favoriten), bei den Registerkarten bzw. Tabs und unter Windows beim Speichern einer Seite auf dem Desktop auf. Früher wurden Favicons durch die Speicherung eines Icons mit dem Namen favicon.ico auf dem Server festgelegt, was auch heute noch funktioniert, allerdings ist es möglich, Favicons im
<head>-Element einer Seite festzulegen, was mehr Möglichkeiten bietet, wie die Nutzung von z. B. PNG und GIF (animiert) in neueren Browsern.Inhaltsverzeichnis
Umsetzung
Technisch handelt es sich um eine Datei im ICO-Format (MIME-Type image/x-icon oder seltener image/vnd.microsoft.icon). Das ICO-Format ist ein Grafik-Format, welches vor allem in Microsoft-Windows-Betriebssystemen Verwendung findet.
Einbindung in eine HTML-Seite
Es gibt zwei Möglichkeiten, ein Favicon in eine Seite einzubinden:
- Hinterlegung unter dem festen Namen „favicon.ico“ im Basisverzeichnis der Domain, wie zum Beispiel bei http://de.wikipedia.org/favicon.ico
- Referenzierung über ein HTML-Element, das in die Kopfdaten (
<head>) einer HTML-Seite eingebunden wird. Laut HTML-Standard ist dies ein Link mit zwei Beziehungen: shortcut und icon. In vielen Browsern reicht es, nur icon anzugeben und shortcut wegzulassen.
<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">
Verwendet man XHTML statt HTML, so sollte ein abschließender Slash am Ende des Tags stehen, da es sich hierbei um ein leeres Element handelt.
Eigentlich wird nur das erste
<link>-Element benötigt, das zweite ist nötig, wenn andere Formate als .ico verwendet werden sollen. Wichtig ist, dass sich beide Elemente im<head>-Tag befinden und dass die Codes für<link type>richtig gesetzt werden:- Für ICO: "image/x-icon" oder "image/vnd.microsoft.icon"
- Für GIF: "image/gif"
- Für PNG: "image/png"
Defaultgröße und -Farbtiefe:
- Für ICO: 16×16 oder 32×32 und 16 bis 16 Millionen Farben.
- Für GIF: 16×16 und 256 Farben
- Für PNG: 16×16 und 256 Farben
Die zweite Methode erlaubt es, für verschiedene Webseiten unter einer Domain unterschiedliche Icons zu verwenden. Für einige Browser-Versionen ist der Weg über
<link...>zwingend notwendig, wenn ein Favicon angezeigt werden soll, andere Browser versuchen automatisch, immer die Datei „favicon.ico“ im Basisverzeichnis einer Domain zu laden.Spiele
Mittlerweile existieren bereits Spiele, die komplett im Favicon des Browsers realisiert werden. Die Pionierleistung erbrachte der französische Webentwickler und Designer Mathieu Henri. Das kleine Remake des Arcadespiels Defender ist in JavaScript geschrieben.[1] Der Code erzeugt jeden Frame des Spiels in der Favicongröße (16×16 Pixel). Anschließend wird er in ein PNG konvertiert.
Weblinks
Einzelnachweise
Wikimedia Foundation.
