„Favicon“ – Versionsunterschied
| [ungesichtete Version] | [gesichtete Version] |
Inhalt gelöscht Inhalt hinzugefügt
K Link-Löschung von 84.179.143.175 rückgängig gemacht. |
K tk (WP:TYP#Auszeichnung) |
||
| (428 dazwischenliegende Versionen von mehr als 100 Benutzern, die nicht angezeigt werden) | |||
| Zeile 1: | Zeile 1: | ||
[[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, meist 16×16 oder 32×32 [[Pixel]] großes [[Icon (Computer)|Bildchen]] mit der Dateiendung ''.ico'', welches in der Adresszeile eines [[Browser]]s links von der [[URL]] angezeigt wird und meist dazu verwendet, die zugehörige [[Website]] auf wiederkennbare Weise zu kennzeichnen. Es taucht auch in der [[Lesezeichen (Internet)|Lesezeichen]]leiste (Favoriten) auf und beim Speichern einer Seite auf dem Desktop. [[Bild:Favicon_konqueror.png|right|Das Wikipedia-Favicon im Konqueror]] |
|||
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 erste Browser, der Favicons unterstützte, war die Betaversion des [[Internet Explorer]]s 5.0, welche offiziell [[1999]] veröffentlicht wurde. Der [[K Desktop Environment|KDE]] Browser [[Konqueror]] war eineinhalb Jahre später der zweite Browser, der die Anzeige von Favicons unterstützte. Mittlerweile unterstützen alle gängigen Browser die Anzeige dieser kleinen Bildchen. |
|||
Der Begriff ist ein [[Kofferwort]] aus dem Englischen. Er besteht aus den Komponenten ''Favorite'' und ''Icon,'' die man etwa mit Favoriten-Symbol übersetzen kann. |
|||
Technisch handelt es sich um eine Datei im Icon-Format ([[Content-Type|MIME-Type]] image/x-icon), die im Basisverzeichnis einer Website unter dem Namen "favicon.ico" abgelegt werden muss. Das Icon-Format ist ein Graphik-Format, welches vor allem in [[Microsoft]]-[[Microsoft_Windows|Windows]] Betriebssystemen Verwendung findet. Einige Browser können auch mit anderen [[Dateiformat]]en an statt "Icon" umgehen, wie z.B. BMP, PNG, GIF oder anderen. |
|||
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>. |
|||
Anstatt unter dem festen Namen "favicon.ico" im Basisverzeichnis abgelegt zu werden, kann die Datei auch über das [[Hypertext_Markup_Language|HTML]]-Tag <link ...> referenziert werden. Dies erlaubt es für verschiedene Seiten einer Website unterschiedliche Icons zu verwenden. Für einige Browserversionen 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 Website zu laden. |
|||
== Einbindung in eine HTML-Seite == |
|||
Fehlt die Datei "favicon.ico", so kann das Fehlerlog eines [[Webserver]]s durch die bei jedem Seitenaufruf (bzw. dem mit dem Seitenaufruf einhergehenden Versuch das Favicon zu laden) entstehende Fehlermeldung über die nicht zu findende Datei bis zur Unbrauchbarkeit mit dieser (sinnlosen) Meldung vollgeschrieben werden. |
|||
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: |
|||
Schritt-für-Schritt-Anleitungen zur Erstellung von Favicons finden sich in der Linkliste unten. |
|||
* 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 == |
|||
==Liste der Browser die Favicons unterstützen== |
|||
{{Hauptartikel|ICO (Dateiformat)}} |
|||
*[[Microsoft Internet Explorer]], seit Version 5.0-Beta, 1998 |
|||
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. |
|||
*[[Konqueror]], seit Anfang 2001 |
|||
*[[Mozilla]], seit Version 0.9.6, Ende 2001 |
|||
*[[Netscape-Navigator]], seit Version 7.0-PR1, Anfang 2002 |
|||
*[[Opera]], seit Version 7.0, 2002 |
|||
*[[Camino]] |
|||
*[[Galeon]] |
|||
*[[Safari (Browser)|Safari]] |
|||
*[[Mozilla Firefox]] |
|||
== 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. |
|||
*[http://favicon.de/ Favicon.de] |
|||
*[http://www.favicons.de/ Favicons.de] |
|||
*http://de.selfhtml.org/navigation/faq.htm#favoriten_icon |
|||
*[http://peerbot.de/ Favicon Suchmaschine] |
|||
*[http://iconsurf.com/ Suche nach 200.000 Icons] |
|||
*[http://mppierce66.home.comcast.net/web/fi/ Favicon Gallery] |
|||
*[http://www.tokyo-ouja.com/favicon/ Favicon Gallery] |
|||
*[http://www.patchwork.favicon.de/ Patchwork-Projekt (Sammlung von 1.024 Favicons)] |
|||
*[http://www.chami.com/html-kit/services/favicon/ Favicons online erstellen] |
|||
== 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). |
|||
| ⚫ | |||
[[en:Favicon]] |
|||
{{Wiktionary}} |
|||
[[fr:Favicon]] |
|||
* [https://wiki.selfhtml.org/wiki/Grafik/Favicon ''Favicon''] im [[SELFHTML]]-Wiki |
|||
[[nl:Favicon]] |
|||
[[pt:Favicon]] |
|||
== Einzelnachweise == |
|||
<references /> |
|||
[[Kategorie:Grafische Benutzeroberfläche]] |
|||
| ⚫ | |||
[[Kategorie:Kofferwort]] |
|||
Aktuelle Version vom 9. April 2025, 12:06 Uhr
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[1].
Einbindung in eine HTML-Seite
[Bearbeiten | Quelltext 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.[2] - Referenzierung über ein HTML-Element, das in die Kopfdaten (
<head>) einer HTML-Seite eingebunden wird. Die Link-Bezeichnung lautet icon.[3] Hierbei können andere Formate als .ico verwendet werden.
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
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 auchimage/x-icon[4] - Für GIF:
image/gif - Für PNG:
image/png[5] - 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 | Quelltext 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 | Quelltext 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.[6] Der Code erzeugt jeden Frame des Spiels in der Favicongröße (16×16 Pixel). Anschließend wird er in ein PNG konvertiert.
Literatur
[Bearbeiten | Quelltext 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 | Quelltext bearbeiten]Wiktionary: Favicon – Bedeutungserklärungen, Wortherkunft, Synonyme, Übersetzungen
Einzelnachweise
[Bearbeiten | Quelltext bearbeiten]- ↑ Website-Favicon für Suchergebnisse festlegen | Google Search Central | Dokumentation. Abgerufen am 28. Oktober 2024.
- ↑ How to Add a Favicon to your Site. In: W3C. Abgerufen am 30. Juni 2021 (englisch).
- ↑ How to Add a Favicon to your Site. W3C, abgerufen am 14. August 2009.
- ↑ Published specification. IANA, 3. September 2003, abgerufen am 22. Dezember 2023.
- ↑ Karl Dubost: How to add a favicon to your Web site? Abgerufen am 17. April 2017 (englisch).
- ↑ Favicon-Spiel Defender