~2025-35910-40: Link zu SELFHTML hat sich geändert

2025-11-23T23:17:03Z

Link zu SELFHTML hat sich geändert

Neue Seite

[[Datei:Wikipedia favicon in Firefox on KDE.png|mini|In vielen Webbrowsern werden Favicons in den Registerkarten, in der Adressleiste neben der [[Uniform Resource Locator|URL]] oder in der Liste der [[Lesezeichen (World Wide Web)|Favoriten]] angezeigt.]]

Ein '''Favicon''' ist ein kleines, 16×16, 32×32 oder 48×48 [[Pixel]] messendes [[Icon (Computer)|Icon]], Symbol oder Logo, das von [[Webbrowser]]n verwendet wird, um eine [[Website]] auf wiedererkennbare Weise zu kennzeichnen. Es erscheint unter anderem in der [[Lesezeichen (World Wide Web)|Lesezeichenliste]] (Favoriten), neben den Titeln der [[Registerkarte]]n (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#Versionen 5 und 5.5|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>{{Internetquelle |url=https://developers.google.com/search/docs/appearance/favicon-in-search?hl=de |titel=Website-Favicon für Suchergebnisse festlegen {{!}} Google Search Central {{!}} Dokumentation |abruf=2024-10-28}}</ref>.

== 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 (Internet)|Domain]], wie bei <code style="white-space:nowrap">[https://de.wikipedia.org/favicon.ico https://de.wikipedia.org/favicon.ico]</code>. Dateien mit Namen favicon.ico in anderen Verzeichnissen werden von Browsern nicht beachtet. Hierbei sollten keine anderen Formate als das [[ICO (Dateiformat)|ico-Format]] verwendet werden. Zudem wird dies nicht von allen Browsern unterstützt und wird u. a. vom W3C ausdrücklich nicht empfohlen.<ref>{{Internetquelle |url=https://www.w3.org/2005/10/howto-favicon |titel=How to Add a Favicon to your Site |werk=W3C |sprache=en |abruf=2021-06-30}}</ref>
* Referenzierung über ein [[Hypertext Markup Language|HTML]]-Element, das in die [[Header|Kopfdaten]] (<code><head></code>) einer HTML-Seite eingebunden wird. Die Link-Bezeichnung lautet ''icon.''<ref>{{Internetquelle|titel=How to Add a Favicon to your Site|url=https://www.w3.org/2005/10/howto-favicon|zugriff=14. August 2009|hrsg=[[World Wide Web Consortium|W3C]]}}</ref> Hierbei können andere Formate als .ico verwendet werden.
<syntaxhighlight lang="html" style="margin-left: 2em;">
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
</syntaxhighlight>

Verwendet man [[Extensible Hypertext Markup Language|XHTML]] statt HTML, so muss ein abschließender Schrägstrich am Ende des [[Tag (Informatik)|Tags]] stehen, da es sich hierbei um ein leeres [[Extensible Markup Language|XML]]-Element handelt. Zwingend benötigt wird dabei nur das <code>href=</code> Attribut; das <code>type=</code> Attribut empfiehlt sich, wenn andere Formate als .ico verwendet werden. Dabei müssen für folgende Formate folgende Codes verwendet werden:
* Für [[ICO (Dateiformat)|ICO]]: <code>image/vnd.microsoft.icon</code>, früher auch <code>image/x-icon</code><ref>{{Internetquelle|url=http://www.iana.org/assignments/media-types/image/vnd.microsoft.icon|titel=Published specification|datum=2003-09-03|hrsg=IANA|abruf=2023-12-22}}</ref>
* Für [[Graphics Interchange Format|GIF]]: <code>image/gif</code>
* Für [[Portable Network Graphics|PNG]]: <code>image/png</code><ref>{{Internetquelle|url=https://www.w3.org/2005/10/howto-favicon|titel=How to add a favicon to your Web site?|autor=Karl Dubost|sprache=en|zugriff=2017-04-17}}</ref>
* Für [[Scalable Vector Graphics|SVG]]: <code>image/svg+xml</code>
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 ==
{{Hauptartikel|ICO (Dateiformat)}}
Das Dateiformat ''ico'' ist ein Container für Bilddaten. Es kann viele Bilder in unterschiedlicher Auflösung aufnehmen, die unkomprimiert als [[Windows Bitmap|Bitmap]] (bzw. ab [[Windows Vista]] mit einer Auflösung von 256×256 Pixeln als [[Portable Network Graphics|PNG]]) abgelegt werden.

== Interaktive Favicons ==
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 (Computerspiel)|Defender]] ist in JavaScript geschrieben.<ref>[http://www.p01.org/defender_of_the_favicon 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 ==
* [[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 ==
{{Wiktionary}}
* ''[https://wiki.selfhtml.org/wiki/Favicon Favicon]'' im [[SELFHTML]]-Wiki

== Einzelnachweise ==
<references />

[[Kategorie:Grafische Benutzeroberfläche]]
[[Kategorie:Webbrowser]]
[[Kategorie:Kofferwort]]

Favicon - Versionsgeschichte

~2025-35910-40: Link zu SELFHTML hat sich geändert