Favicon

Datei:Wikipedia favicon in Firefox on KDE.png

In vielen Webbrowsern werden Favicons in den Registerkarten, in der Adressleiste neben der URL oder in der Liste der Favoriten angezeigt.

Ein Favicon ist ein kleines, 16×16, 32×32 oder 48×48 Pixel messendes Icon, Symbol oder Logo, das von Webbrowsern verwendet wird, um eine Website auf wiedererkennbare Weise zu kennzeichnen. Es erscheint unter anderem in der Lesezeichenliste (Favoriten), neben den Titeln der Registerkarten (Tabs) oder wenn die Seite auf dem Startbildschirm von Smartphones gespeichert wird. Die Einführung geht auf den Computerkonzern Microsoft zurück, dessen Internet Explorer 5 im Jahr 1999 erstmals Favicons darstellte.

Der Begriff ist ein Kofferwort aus dem Englischen. Er besteht aus den Komponenten Favorite und Icon, die man etwa mit Favoriten-Symbol übersetzen kann.

Seit 2024 empfiehlt Google die Verwendung eines Favicons mit der Mindestgröße 48×48px<ref>Skriptfehler: Ein solches Modul „Vorlage:Internetquelle“ ist nicht vorhanden. Ehemals im Vorlage:Referrer (nicht mehr online verfügbar); Skriptfehler: Ein solches Modul „TemplatePar“ ist nicht vorhanden.</ref>.

Einbindung in eine HTML-Seite[Bearbeiten]

Es gibt zwei Möglichkeiten, ein Favicon in eine Seite einzubinden:

Hinterlegung unter dem festen Namen „favicon.ico“ im Basisverzeichnis der Domain, wie bei https://de.wikipedia.org/favicon.ico. Dateien mit Namen favicon.ico in anderen Verzeichnissen werden von Browsern nicht beachtet. Hierbei sollten keine anderen Formate als das ico-Format verwendet werden. Zudem wird dies nicht von allen Browsern unterstützt und wird u. a. vom W3C ausdrücklich nicht empfohlen.<ref>Skriptfehler: Ein solches Modul „Vorlage:Internetquelle“ ist nicht vorhanden. In: Skriptfehler: Ein solches Modul „Vorlage:Internetquelle“ ist nicht vorhanden. Ehemals im Vorlage:Referrer (nicht mehr online verfügbar); (Skriptfehler: Ein solches Modul „Multilingual“ ist nicht vorhanden.).Vorlage:Toter Link/Core (Seite nicht mehr abrufbar. Suche im Internet Archive)Skriptfehler: Ein solches Modul „TemplatePar“ ist nicht vorhanden. Skriptfehler: Ein solches Modul „TemplatePar“ ist nicht vorhanden.</ref>
Referenzierung über ein HTML-Element, das in die Kopfdaten (<head>) einer HTML-Seite eingebunden wird. Die Link-Bezeichnung lautet icon.<ref>Skriptfehler: Ein solches Modul „Vorlage:Internetquelle“ ist nicht vorhanden. W3C; ehemals im Vorlage:Referrer (nicht mehr online verfügbar); Skriptfehler: Ein solches Modul „TemplatePar“ ist nicht vorhanden.</ref> Hierbei können andere Formate als .ico verwendet werden.

Verwendet man XHTML statt HTML, so muss ein abschließender Schrägstrich am Ende des Tags stehen, da es sich hierbei um ein leeres XML-Element handelt. Zwingend benötigt wird dabei nur das href= Attribut; das type= Attribut empfiehlt sich, wenn andere Formate als .ico verwendet werden. Dabei müssen für folgende Formate folgende Codes verwendet werden:

Für ICO: image/vnd.microsoft.icon, früher auch image/x-icon<ref>Skriptfehler: Ein solches Modul „Vorlage:Internetquelle“ ist nicht vorhanden. IANA, Skriptfehler: Ein solches Modul „DateTime“ ist nicht vorhanden.; ehemals im Vorlage:Referrer (nicht mehr online verfügbar);.Vorlage:Toter Link/Core (Seite nicht mehr abrufbar. Suche im Internet Archive)Skriptfehler: Ein solches Modul „TemplatePar“ ist nicht vorhanden. Skriptfehler: Ein solches Modul „TemplatePar“ ist nicht vorhanden.</ref>
Für GIF: image/gif
Für PNG: image/png<ref>Karl Dubost: Skriptfehler: Ein solches Modul „Vorlage:Internetquelle“ ist nicht vorhanden. Ehemals im Vorlage:Referrer (nicht mehr online verfügbar); (Skriptfehler: Ein solches Modul „Multilingual“ ist nicht vorhanden.).Vorlage:Toter Link/Core (Seite nicht mehr abrufbar. Suche im Internet Archive)Skriptfehler: Ein solches Modul „TemplatePar“ ist nicht vorhanden. Skriptfehler: Ein solches Modul „TemplatePar“ ist nicht vorhanden.</ref>
Für SVG: image/svg+xml

Standardgrößen und Farbtiefen:

Für .ICO: 16×16, 32×32 oder 48×48px und 16 bis 16,7 Millionen Farben
Für .GIF und .PNG: 16×16 und 256 Farben

Dateiformat[Bearbeiten]

Das Dateiformat ico ist ein Container für Bilddaten. Es kann viele Bilder in unterschiedlicher Auflösung aufnehmen, die unkomprimiert als Bitmap (bzw. ab Windows Vista mit einer Auflösung von 256×256 Pixeln als PNG) abgelegt werden.

Interaktive Favicons[Bearbeiten]

Als Demonstration entwickelte der französische Webentwickler und Designer Mathieu Henri ein Spiel namens Defender of the favicon, welches das Favicon als Anzeigefläche verwendet. Das kleine Remake des Arcadespiels Defender ist in JavaScript geschrieben.<ref>Favicon-Spiel Defender</ref> Der Code erzeugt jeden Frame des Spiels in der Favicongröße (16×16 Pixel). Anschließend wird er in ein PNG konvertiert.

Literatur[Bearbeiten]

Oliver Bendel: Pixel um Pixel: Favicons erobern das Web. In: Manfred Blohm (Hrsg.): Texte zur Medienkunst (= Medien – Kunst – Pädagogik. Band 1). Flensburg University Press, Flensburg 2009, ISBN 978-3-939858-09-6, S. 9–18.
Steve Caplin: Icon-Design: professionelle Gestaltung von Computer-Icons. (= Design Direktories). Stiebner, München 2010, ISBN 978-3-8307-1269-5.
Sven Blankenberger: Effekte der Icon-Gestaltung auf die Mensch-Computer-Interaktion. Marburg 1987, OCLC 174714544 (Diplomarbeit Universität Marburg 1987).

Weblinks[Bearbeiten]

[[wikt:Skriptfehler: Ein solches Modul „WLink“ ist nicht vorhanden.|Wiktionary: Skriptfehler: Ein solches Modul „WLink“ ist nicht vorhanden.]] – Bedeutungserklärungen, Wortherkunft, Synonyme, Übersetzungen

Skriptfehler: Ein solches Modul „TemplatePar“ ist nicht vorhanden.

Favicon im SELFHTML-Wiki

Einzelnachweise[Bearbeiten]