Technik
Ein Favicon ist ein kleines Bild, das eine Website im Browser-Tab, in Lesezeichen, auf dem Startbildschirm und in den Google-Suchergebnissen kennzeichnet.
Der Name Favicon ist laut Mozilla und WordPress eine Kurzform von „favorite icon“, und als vorgesehenen Einsatz nennt WordPress in erster Linie das Setzen von Lesezeichen im Browser. Heute erscheint das Favicon auf den Tabs des Browsers und in der Lesezeichenliste, während viele aktuelle Browser es laut Mozilla aus der Adressleiste entfernt haben. An seiner Stelle zeigen sie dort ein Symbol, das darüber Auskunft gibt, ob die Seite per HTTPS geladen wurde. Auf Mobilgeräten dient es nach Angaben von WordPress außerdem als Symbol für Anwendungen.
Technisch entsteht das Favicon aus einem Element link mit dem Wert icon im Attribut rel, das nach dem HTML-Standard der WHATWG auf ein Icon für die Seite oder die gesamte Website verweist. Der Browser soll dieses Icon überall dort verwenden, wo er die Seite in seiner eigenen Oberfläche darstellt. Neben Bildern lässt der Standard ausdrücklich auch akustische und andere Icons zu, schreibt Browsern beim Bestimmen des Dateityps aber die Annahme eines Bildes vor. Für Dateien im Format ICO verwendet der Standard in seinem Beispiel den Medientyp image/vnd.microsoft.icon.
Stehen mehrere Icons im Kopfbereich, wählt der Browser nach dem Standard anhand der Attribute type, media und sizes das passende aus und nimmt bei gleich geeigneten Dateien die zuletzt angegebene. Erweist sich die gewählte Datei als unbrauchbar, etwa weil ihr Format nicht unterstützt wird, muss der Browser zur nächstpassenden Datei greifen. Fehlt ein Verweis vom Typ icon ganz, dürfen Browser bei Seiten mit HTTP oder HTTPS selbstständig die Adresse /favicon.ico im Hauptverzeichnis abrufen.
Das Attribut sizes gibt die Abmessungen eines Icons nach dem HTML-Standard in Gerätepixeln statt in den CSS-Pixeln an, mit denen Layouts gewöhnlich rechnen. Ein Icon, das auf einem Bildschirm mit doppelter Pixeldichte 50 CSS-Pixel breit erscheinen soll, misst nach dem Beispiel des Standards deshalb 100 Pixel. Der Wert any kennzeichnet eine skalierbare Datei wie eine SVG-Grafik, und genannt werden dürfen nur Größen, die in der Datei tatsächlich enthalten sind.
Viele Icon-Formate speichern laut Mozilla nur eine einzige Größe, während das Format ICO von Microsoft und das Format ICNS von Apple mehrere Größen in einer Datei bündeln. Für eine breite Unterstützung in den Browsern empfiehlt Mozilla von beiden das Format ICO. In seinem Glossar nennt Mozilla als übliche Ausführung ein Bild mit 16 mal 16 Pixeln in den Formaten GIF, PNG oder ICO. In der Liste der Formate, die Google für die Suchergebnisse unterstützt, fehlt SVG, sodass eine SVG-Grafik mit dem Wert any am besten durch eine zusätzliche PNG- oder ICO-Datei ergänzt wird.
Für Web Clips, wie Apple die Verknüpfungen auf dem Startbildschirm nennt, nutzt iOS laut Mozilla eine eigene Angabe außerhalb des HTML-Standards und lässt den Linktyp icon samt Attribut sizes außer Acht. Stattdessen legen Sie nach der Entwicklerdokumentation von Apple eine PNG-Datei namens apple-touch-icon.png im Hauptverzeichnis ab oder verweisen mit rel="apple-touch-icon" auf eine eigene Datei. Apple nennt in einem Beispiel seiner archivierten Safari-Dokumentation die Größen 152 Pixel für das iPad, 167 Pixel für das iPad mit Retina-Display und 180 Pixel für das iPhone mit Retina-Display. Fehlt eine exakt passende Datei, greift iOS laut Apple zum nächstgrößeren Icon.
Google akzeptiert für die Suchergebnisse neben icon auch apple-touch-icon sowie apple-touch-icon-precomposed, eine Variante für frühere iOS-Versionen. Laut Apple versahen ältere Versionen von Safari Icons mit grafischen Effekten, sofern der Dateiname nicht auf -precomposed.png endete, während Safari unter iOS 7 keine Effekte mehr hinzufügt. Für installierbare Web-Apps legt das Web App Manifest im Feld icons eigene Bilddateien fest, bei denen laut Mozilla allein die Quelle Pflicht ist und Größe, Typ und Verwendungszweck optional bleiben. Mozilla stuft die Unterstützung dieses Feldes in den verbreiteten Browsern als eingeschränkt ein.
WordPress erzeugt das Favicon seit Version 4.3 aus dem Website-Icon, für das die Dokumentation ein quadratisches Bild mit mindestens 512 Pixeln Kantenlänge verlangt und PNG empfiehlt. Ab Version 6.5 wählen Sie das Bild unter Einstellungen, Allgemein aus, wie es die Anleitung zum Einrichten eines Favicons Schritt für Schritt zeigt. Die Funktion wp_site_icon() schreibt daraus laut Entwicklerdokumentation vier Angaben in den Kopfbereich, nämlich Icons mit 32 und 192 Pixeln, ein apple-touch-icon mit 180 Pixeln und eine Kachelgrafik mit 270 Pixeln. Prüfen lässt sich die Ausgabe, indem Sie im Quelltext Ihrer Startseite nach 192x192 suchen.
In den Suchergebnissen zeigt Google je Hostname genau ein Favicon und verlangt, dass der Googlebot die Startseite und der Googlebot-Image als Crawler für Bilder die Datei abrufen können. Favicons mit unangemessenen Motiven wie Pornografie oder Hasssymbolen ersetzt Google nach eigener Aussage durch ein Standardsymbol. Die Adresse der Datei soll laut Google stabil bleiben, weshalb Sie bei einer Website-Migration am besten auch den Pfad des Favicons unverändert übernehmen. Eine Anzeige garantiert Google auch bei erfüllten Vorgaben nicht, und ein neues Icon erscheint erst, nachdem Google die Startseite erneut gecrawlt hat, was einige Tage bis mehrere Wochen dauern kann.
Verwendet Ihre Website eine Content Security Policy, gilt diese laut Mozilla auch für das Favicon. Lädt das Icon nicht, prüfen Sie am besten, ob die Direktive img-src im Header Content-Security-Policy die Adresse der Bilddatei zulässt. Liegt die Datei wie von Google ausdrücklich erlaubt auf einem fremden Server oder in einem Content Delivery Network, muss dessen Adresse in dieser Direktive freigegeben sein. Das Attribut crossorigin unterstützen Chromium-basierte Browser beim Linktyp icon laut Mozilla nicht, sodass es an dieser Stelle keine Wirkung zeigt.