Favicon

Aus besserwiki.de
Das Favicon von Wikipedia, dargestellt in einer älteren Version von Firefox (von 2008) ⓘ

Ein Favicon (/ˈfæv.ɪˌkɒn/; kurz für Lieblingssymbol), auch bekannt als Verknüpfungssymbol, Website-Symbol, Tab-Symbol, URL-Symbol oder Lesezeichen-Symbol, ist eine Datei mit einem oder mehreren kleinen Symbolen, die mit einer bestimmten Website oder Webseite verknüpft sind. Ein Webdesigner kann ein solches Symbol erstellen und es auf verschiedene Weise auf eine Website (oder Webseite) hochladen, und grafische Webbrowser verwenden es dann. Browser, die Favicon-Unterstützung bieten, zeigen das Favicon einer Seite in der Regel in der Adressleiste des Browsers (manchmal auch im Verlauf) und neben dem Namen der Seite in einer Liste von Lesezeichen an. Bei Browsern, die eine Schnittstelle für Dokumente mit Registerkarten unterstützen, wird das Favicon einer Seite in der Regel neben dem Titel der Seite auf der Registerkarte angezeigt, und bei standortspezifischen Browsern wird das Favicon als Desktop-Symbol verwendet. ⓘ

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

Geschichte

Im März 1999 veröffentlichte Microsoft den Internet Explorer 5, der zum ersten Mal Favicons unterstützte. Ursprünglich war das Favicon eine Datei namens favicon.ico, die im Stammverzeichnis einer Website abgelegt wurde. Es wurde in den Favoriten (Lesezeichen) des Internet Explorers und neben der URL in der Adressleiste verwendet, wenn die Seite mit einem Lesezeichen versehen war. Ein Nebeneffekt war, dass die Anzahl der Besucher, die die Seite mit einem Lesezeichen versehen hatten, anhand der Anfragen für das Favicon geschätzt werden konnte. Dieser Nebeneffekt funktioniert nicht mehr, da alle modernen Browser die Favicon-Datei laden und in ihrer Adressleiste anzeigen, unabhängig davon, ob die Seite mit einem Lesezeichen versehen ist. ⓘ

Standardisierung

Das Favicon wurde vom World Wide Web Consortium (W3C) in der Empfehlung für HTML 4.01, die im Dezember 1999 veröffentlicht wurde, und später in der Empfehlung für XHTML 1.0, die im Januar 2000 veröffentlicht wurde, standardisiert. Die Standardimplementierung verwendet ein Link-Element mit einem rel-Attribut im <head>-Abschnitt des Dokuments, um das Dateiformat, den Dateinamen und den Speicherort anzugeben. Im Gegensatz zum vorherigen Schema kann sich die Datei in einem beliebigen Website-Verzeichnis befinden und ein beliebiges Bilddateiformat haben. ⓘ

Im Jahr 2003 wurde das .ico-Format von einer dritten Partei bei der Internet Assigned Numbers Authority (IANA) unter dem MIME-Typ image/vnd.microsoft.icon registriert. Bei der Verwendung des .ico-Formats zur Anzeige von Bildern (z. B. nicht als Favicon) kann der Internet Explorer jedoch keine Dateien anzeigen, die mit diesem standardisierten MIME-Typ bereitgestellt werden. Eine Abhilfe für Internet Explorer besteht darin, .ico mit dem nicht standardisierten image/x-icon-MIME-Typ in Webservern zu verknüpfen. ⓘ

Mit RFC 5988 wurde ein IANA-Register für Link-Relations eingerichtet, und rel="icon" wurde 2010 auf der Grundlage der HTML5-Spezifikation registriert. Die populäre <link rel="shortcut icon" type="image/png" href="image/favicon.png"> identifiziert theoretisch zwei Relationen, nämlich "shortcut" und "icon", aber "shortcut" ist nicht registriert und somit redundant. Im Jahr 2011 wurde im lebenden HTML-Standard festgelegt, dass aus historischen Gründen Shortcut unmittelbar vor Icon zulässig ist; Shortcut hat in diesem Zusammenhang jedoch keine Bedeutung. ⓘ

Ältere

Internet Explorer 5-10 unterstützt nur das ICO-Dateiformat. Netscape 7 und die Internet Explorer-Versionen 5 und 6 zeigen das Favicon nur an, wenn die Seite mit einem Lesezeichen versehen ist, und nicht nur, wenn die Seiten besucht werden, wie in späteren Browsern. ⓘ

Beispiele für Favicons

Browser-Implementierung

Die folgenden Tabellen veranschaulichen die Unterstützung verschiedener Funktionen in den wichtigsten Webbrowsern. Sofern nicht anders angegeben, geben die Versionsnummern die Anfangsversionsnummer einer unterstützten Funktion an. ⓘ

Unterstützung von Dateiformaten

Die folgende Tabelle veranschaulicht die Unterstützung von Bilddateiformaten für das Favicon. ⓘ

Browser Bilddateiformat ⓘ
ICO PNG GIF animierte GIFs JPEG APNG SVG
Rand Ja Ja Ja Nein Ja Unbekannt Ja
Firefox 1.0 1.0 1.0 Ja Ja 3.0 41.0
Google Chrome Ja Ja 4.0 Nein 4.0 Nein 80
Internet Explorer 5.0 11.0 11.0 Nein Nein Nein Nein
Oper 7.0 7.0 7.0 7.0 7.0 9.5 44.0
Safari Ja 4.0 4.0 Nein 4.0 Nein Nicht-Standard (12.0)

Außerdem können solche Icon-Dateien 16×16, 32×32, 48×48 oder 64×64 Pixel groß sein und eine Farbtiefe von 8-bit, 24-bit oder 32-bit haben. Der Artikel über das ICO-Dateiformat erklärt die Details für Icons mit mehr als 256 Farben auf verschiedenen Microsoft Windows-Plattformen. ⓘ

Verwendung des Favicons

Diese Tabelle veranschaulicht die verschiedenen Bereiche des Browsers, in denen Favicons angezeigt werden können. ⓘ

Browser Adressleiste Dropdown-Liste in der Adressleiste Links-Leiste Lesezeichen Registerkarten Auf den Desktop ziehen ⓘ
Rand Nein Ja Ja Ja Ja Ja
Firefox 1.0-12.0: Ja
> v13: Nein 		Ja Ja Ja Ja Ja
Google Chrome Nein Nein Ja Ja 1.0 Nein
Internet Explorer 7.0 Nein 5.0 5.0 7.0 5.0
Oper 7.0-12.17: Ja
> v14: Nein 		Nein 7.0 7.0 7.0 7.0
Safari Ja Ja Nein Ja 1.0-8.0: Ja
9.0-11.0: Nein
> 12.0: Wahlweise 		Nein

Opera Software hat die Möglichkeit hinzugefügt, das Favicon in der Schnellwahl in Opera 10 zu ändern. ⓘ

Wie man es benutzt

Diese Tabelle veranschaulicht die verschiedenen Möglichkeiten, wie das Favicon vom Webbrowser erkannt werden kann. Die Standardimplementierung verwendet ein Link-Element mit einem rel-Attribut im <head>-Abschnitt des Dokuments, um das Format, den Namen und den Speicherort der Datei anzugeben. ⓘ

Rand Firefox Google Chrome Internet Explorer Oper Safari ⓘ 
<link rel="shortcut icon"
 href="https://example.com/myicon.ico">
 Ja Ja Ja Ja Ja Ja 
<link rel="icon"
 type="image/vnd.microsoft.icon"
 href="https://example.com/image.ico">
 Ja Ja Ja Ja (aus IE 9) Ja Ja 
<link rel="icon" type="image/x-icon"
 href="https://example.com/image.ico">
 Ja Ja Ja Ja (aus IE 9) Ja Ja 
<link rel="icon"
 href="https://example.com/image.ico">
 Ja Ja Ja Ja (aus IE 11) Ja Ja 
<link rel="icon" type="image/gif"
 href="https://example.com/image.gif">
 Ja Ja Ja Ja (aus IE 11) Ja Ja 
<link rel="icon" type="image/png"
 href="https://example.com/image.png">
 Ja Ja Ja Ja (aus IE 11) Ja Ja 
<link rel="icon" type="image/svg+xml"
 href="https://example.com/image.svg">
 Ja Ja Ja Ja Ja Nein 
<link rel="mask-icon"
 href="https://example.com/image.svg" color="red">
 Nein Nein Nein Nein Nein Ja
favicon.ico im Stammverzeichnis der Website Ja Fakultativ Ja Ja Fakultativ Ja
Vorrang: Root oder (X)HTML verlinkte Version bevorzugen verlinkt verlinkt verlinkt verlinkt ? ?

Wenn Links sowohl für PNG- als auch für ICO-Favicons vorhanden sind, wählen PNG-favicon-kompatible Browser das zu verwendende Format und die Größe wie folgt aus. Firefox und Safari verwenden das Favicon, das als letztes erscheint. Chrome für Mac verwendet das Favicon im ICO-Format, ansonsten das 32×32-Favicon. Chrome für Windows verwendet das Favicon, das an erster Stelle steht, wenn es 16×16 ist, ansonsten das ICO. Wenn keine der oben genannten Optionen verfügbar ist, verwenden beide Chromes das Favicon, das als erstes erscheint, genau das Gegenteil von Firefox und Safari. Chrome für Mac ignoriert das 16×16-Favicon und verwendet die 32×32-Version, nur um es auf Nicht-Retina-Geräten wieder auf 16×16 zu verkleinern. Opera wählt eines der verfügbaren Icons nach dem Zufallsprinzip aus. ⓘ

Nur SeaMonkey ruft standardmäßig keine favicon.ico-Dateien im Stammverzeichnis der Website ab. ⓘ

HTML5-Empfehlung für Icons in verschiedenen Größen

Die aktuelle HTML5-Spezifikation empfiehlt die Angabe mehrerer Größen für die Icons unter Verwendung der Attribute rel="icon" sizes="space-separated list of icon dimensions" innerhalb eines <link> Tag. Mehrere Icon-Formate, einschließlich Container-Formate wie Microsoft .ico- und Macintosh .icns-Dateien, sowie Scalable Vector Graphics können bereitgestellt werden, indem der Content-Typ des Icons in das Format type="file content-type" innerhalb des <link> Tag. ⓘ

Seit iOS 5 ignorieren die mobilen Geräte von Apple die HTML5-Empfehlung und verwenden stattdessen die oben beschriebene proprietäre Apple-Touch-Icon-Methode. Der Google Chrome-Webbrowser wählt jedoch die am besten passende Größe aus den in den HTML-Headern angegebenen Größen aus, um 128×128 Pixel große Anwendungssymbole zu erstellen, wenn der Benutzer die Option Anwendungsverknüpfungen erstellen... aus dem Menü "Extras" wählt. ⓘ

Startbildschirm-Symbole auf mobilen Geräten

Auf Apple iPhones und iPads sowie auf Android-Mobilgeräten können Benutzer Webseiten als Verknüpfungssymbole an ihren Startbildschirm anheften. Diese Verknüpfungssymbole sehen ähnlich aus wie normale Apps, und Webentwickler können spezielle Symbole für sie bereitstellen. ⓘ

Apple-Geräte

Bei Apple-Geräten mit dem Betriebssystem iOS, Version 1.1.3 oder höher, können Nutzer eine Website über die Schaltfläche Zum Startbildschirm hinzufügen in der Freigabeleiste in Safari an den Startbildschirm anheften. ⓘ

Dies funktioniert für jede Website. Damit iOS die Verknüpfung mit einem Symbol anzeigt, muss die Website jedoch ein <link rel="apple-touch-icon" ...> im <head>-Abschnitt der von der Website bereitgestellten Dokumente. Wenn das benutzerdefinierte Symbol nicht bereitgestellt wird, wird stattdessen eine Miniaturansicht der Webseite auf dem Startbildschirm angezeigt. ⓘ

Die Größe der App-Symbole ist für die verschiedenen Geräteklassen unterschiedlich. Die empfohlenen Größen für die Icons sind 152x152 für iPads (bis iPad 2, erschienen 2011), 167x167 für iPads mit Retina-Bildschirm (iPad 3 und später) und 180x180 für iPhones. Wenn kein Icon in der passenden Größe angegeben wird, wählt iOS das größte Icon mit rel="apple-touch-icon" und skaliert es automatisch. ⓘ

Beispiel-Code
<!-- Für iPad -->
 <link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png"> <span title="Aus: Englische Wikipedia, Abschnitt &quot;Apple devices&quot;" class="plainlinks">[https://en.wikipedia.org/wiki/Favicon#Apple_devices <span style="color:#dddddd">ⓘ</span>]</span>
<!-- Für iPhone -->
 <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png"> <span title="Aus: Englische Wikipedia, Abschnitt &quot;Apple devices&quot;" class="plainlinks">[https://en.wikipedia.org/wiki/Favicon#Apple_devices <span style="color:#dddddd">ⓘ</span>]</span>

Die Icon-Datei, auf die apple-touch-icon verweist, wurde geändert, um abgerundete Ecken hinzuzufügen. Bei iOS-Versionen vor iOS 7 werden ein Schlagschatten und ein reflektierender Glanz hinzugefügt, und apple-touch-icon-precomposed icon kann bereitgestellt werden, um Geräte anzuweisen, keinen reflektierenden Glanz auf das Bild anzuwenden. ⓘ

Browser und mobile Geräte benötigen auch kein HTML, um diese Symbole abzurufen. Das Stammverzeichnis der Website ist der Standardspeicherort für die Datei apple-touch-icon.png (in der Reihenfolge der Priorität). ⓘ

Android-Geräte

Auf Android-Geräten können Benutzer die Funktion Zum Startbildschirm hinzufügen im Chrome-Menü verwenden, um eine Webseite an ihren Startbildschirm zu heften. ⓘ

Dies funktioniert auch für jede andere Website, aber wenn kein Favicon angegeben ist, wird ein allgemeines Symbol verwendet. Da die Icons von Android-Apps eine Größe von 48x48 Punkten haben, sollten Websites Favicons in Vielfachen von 48x48 Pixeln bereitstellen. Für moderne hochauflösende Geräte empfiehlt Google die Bereitstellung von Icons in 192x192 Pixeln.

Beispiel-Code
<!-- Für Android -->
 <link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
 <link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png"> <span title="Aus: Englische Wikipedia, Abschnitt &quot;Android devices&quot;" class="plainlinks">[https://en.wikipedia.org/wiki/Favicon#Android_devices <span style="color:#dddddd">ⓘ</span>]</span>

Android unterstützt auch Web-Manifest-Dateien, die es ermöglichen, Websites tiefer in das System zu integrieren. Ein Web Manifest ist eine JSON-Datei, die Metadaten für eine progressive Web-App angibt. Sie ermöglicht es dem Entwickler, nicht nur die Icons, sondern auch einen Kurznamen für die Anzeige auf dem Startbildschirm sowie die Themenfarben anzugeben. Die Bereitstellung einer Webmanifestdatei ist jedoch nicht erforderlich, damit die Funktion Zum Startbildschirm hinzufügen funktioniert. ⓘ

Animierte Favicons

Verschiedene Browser wie Chrome, Firefox und Opera unterstützen die Animation von Favicons. Für Firefox liegt seit 2001 ein Fehlerbericht vor, in dem eine Möglichkeit zur Deaktivierung dieser Funktion gefordert wird. ⓘ

Beschränkungen und Kritik

Da das Favicon immer an einem festen Ort gesucht werden muss, kann es zu einer künstlich verlangsamten Ladezeit der Seite und zu unnötigen 404-Einträgen im Server-Log führen, wenn es nicht vorhanden ist. ⓘ

Das W3C hat das rel-Attribut nicht standardisiert, daher gibt es andere Schlüsselwörter wie z.B. Shortcut-Icon, die ebenfalls vom User-Agent akzeptiert werden. ⓘ

Favicons werden oft als Teil von Phishing- oder Lauschangriffen gegen HTTPS-Webseiten manipuliert. Viele Webbrowser zeigen Favicons in der Nähe von Bereichen der Benutzeroberfläche des Webbrowsers an, z. B. in der Adressleiste, die anzeigen, ob die Verbindung zu einer Website über ein sicheres Protokoll wie TLS erfolgt. Durch Ändern des Favicons in ein vertrautes Vorhängeschloss-Bild kann ein Angreifer versuchen, dem Benutzer vorzugaukeln, dass er sicher mit der richtigen Website verbunden ist. Automatisierte Man-in-the-Middle-Angriffstools wie SSLStrip nutzen diesen Trick aus. Um dies zu verhindern, zeigen einige Webbrowser wie Firefox oder Google Chrome das Favicon innerhalb der Registerkarte an, während der Sicherheitsstatus des für den Zugriff auf die Website verwendeten Protokolls neben der URL angezeigt wird. ⓘ

Da sich Favicons in der Regel im Stammverzeichnis der Website auf dem Server befinden, können sie mit einer gewissen Zuverlässigkeit eingesetzt werden, um zu erkennen, ob ein Web-Client bei einem bestimmten Dienst angemeldet ist. Dazu wird die Funktion "Umleitung nach Anmeldung" vieler Websites genutzt, indem das Favicon in einer Umleitungs-URL nach Anmeldung abgefragt und die Serverantwort getestet wird, um festzustellen, ob der Benutzer die angeforderte Ressource erhält (was bedeutet, dass er angemeldet ist) oder stattdessen auf die Anmeldeseite umgeleitet wird (was bedeutet, dass er nicht bei dem Dienst angemeldet ist). ⓘ

Im Jahr 2021 wurde von Forschern der Universität von Illinois eine Methode für das Browser-Tracking mithilfe von Favicons vorgestellt. ⓘ

Dateiformat

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 ab einer Auflösung von 256×256 Pixeln als 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 ist in JavaScript geschrieben. Der Code erzeugt jeden Frame des Spiels in der Favicongröße (16×16 Pixel). Anschließend wird er in ein PNG konvertiert. ⓘ

Abgerufen von „http://besserwiki.de/index.php?title=Favicon&oldid=45691“