Favicon: Unterschied zwischen den Versionen

Version vom 23. September 2020, 09:52 Uhr

Definition

Abbildung: Favicon - Autor: Seobility - Lizenz: CC BY-SA 4.0

Beim Favicon handelt es sich um ein kleines Symbol, welches der Wiedererkennbarkeit einer Website dient. Dabei handelt es sich meist um eine vereinfachte Form eines Logos oder einer Bildmarke, welche neben dem Seitentitel im Browser-Tab angezeigt wird. Für Power-User, die sehr viele Tabs gleichzeitig nutzen oder Tabs im Browser anheften, kann das kleine quadratische Icon mitunter die einzige Orientierungshilfe zwischen gerade geöffneten Websites sein. Als Beispiel ist hier das Favicon von seobility.net dargestellt:

Abbildung: Favicon von Seobility, Autor: Seobility

Das Favicon am Desktop

Vor beinahe 20 Jahren begann die Entwicklungsgeschichte des Favicons mit der Veröffentlichung des Internet Explorers 5. Gerade einmal 16 mal 16 Pixel standen zur Verfügung, um die Bildmarke einer Website darzustellen. Auch wenn später die Auflösung auf 32 und 48 Pixel anstieg, gilt das 16 Pixel-Bild im .ico-Format noch heute als gängiger Web-Standard.

Mit der steigenden Anzahl von Browsern und Endgeräten wurden auch die Anforderungen an das Favicon immer höher. Das .ico-Format wurde bald durch .png, .gif und .jpg ergänzt, wobei die ersten zwei von allen gängigen Browsern unterstützt werden. Abgelegt wird ein Favicon wenn möglich im Root-Verzeichnis einer Website, denn Browser suchen automatisch an dieser Stelle nach den Icons. Findet ein Browser die erwarteten Dateien dort nicht, führt dies zu einem 404-Status des Webservers, was nicht nur die Ladezeit einer Website verlangsamen kann, sondern sich auch negativ auf die Usability des Internetauftritts auswirkt. Wer sicherstellen will, dass die Dateien vom Browser gefunden werden, gibt deren Pfad über Meta-Tags im HTML Head an:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

Auf unserer Website seobility.net sieht dieser Meta-Tag so aus:

<link href="https://www.seobility.net/favicon.ico" rel="shortcut icon" type="image/x-icon" >

In jüngerer Zeit kam das .svg-Format hinzu, welches zum Bedauern vieler Web-Designer für den Einsatz als Favicon bislang ein Nischendasein fristet, ließe sich dieses Format doch besonders gut skalieren. Während Opera und Firefox das vektorbasierte Bildformat inzwischen unterstützen, können Chrome, Edge und Internet-Explorer bisher nicht damit umgehen. Einzig Safari setzt für das Symbol bei angehefteten Tabs .svg als Format voraus. Bisher lässt sich diese Funktion allerdings nur am Desktop nutzen.

Das Favicon auf Mobilgeräten

Seit Apple mit der Veröffentlichung seines Smartphone-Betriebssystem iOS verstärkt auf Web-Apps setzt, sind Favicons auch in höheren Auflösungen eine technische Notwendigkeit. Neben Apple setzt auch Google mit Android inzwischen verstärkt auf die quadratischen Bilddateien. Das Icon wird hier beim Speichern einer Webseite als App-Icon am Homescreen angezeigt, wobei aufgrund der teilweise hohen Auflösungen von Smartphone-Bildschirmen ein Bild von 512 Pixeln Seitenlänge benötigt wird. Die höhere Auflösung bringt den Vorteil komplexerer Gestaltungsmöglichkeiten mit sich.

Während das Einbinden von Favicons für Desktop-Browser einzig das Ablegen im Root-Verzeichnis voraussetzt, ist die Installation für Mobilgeräte und Tablets ein gutes Stück komplexer. Dabei unterscheiden sich die Anforderungen der Plattformen sehr stark.

Damit iOS die sogenannten Touch-Icons auffinden kann, muss der Speicherort über ein Meta-Tag im Head-Bereich des HTML-Codes angegeben werden. Während in der Vergangenheit eine große Anzahl von verschiedenen Größen notwendig war, begnügt sich Apple seit jüngster Zeit mit einer 180 Pixel großen .png-Datei.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Etwas komplexer ist die Einbindung für das Android-Betriebssystem. Über ein Meta-Tag wird der Speicherort einer .json-Datei angegeben. Diese .json-Datei wiederum verlinkt ihrerseits auf die Icons im .png-Format. Das sogenannte manifest.json ist außerdem Datenquelle für App-Name und Farbschema einer Website. Das als Standard gedachte Format wird bisher allerdings ausschließlich von Chrome für Android und Opera Mini unterstützt. Eine detaillierte Beschreibung über den Aufbau der .json-Datei findet man unter https://developer.mozilla.org/en-US/docs/Web/Manifest.

<link rel="manifest" href="/manifest.json">

Icons im Startmenü von Windows

Leider setzt auch Windows beim Ablegen einer Website in den Kacheln seines Startmenüs nicht auf das Manifest im .json-Format. Microsoft benötigt eine proprietäre .xml-Datei, welche zwar ähnliche Informationen wie die manifest.json beinhaltet, aber formatbedingt einen anderen Aufbau enthält. Der Speicherort der .xml-Datei muss dabei nicht als Meta-Tag im Header angegeben werden, Windows erwartet die Datei immer im Root-Verzeichnis einer Website.

Web-Services

Da sich gerade im Mobilbereich bisher kein Standard etablieren konnte, ist das richtige Integrieren von Favicons für Webdeveloper inzwischen zu einer Herausforderung geworden. Zum Glück muss man als Entwickler und Grafiker nicht zwangsläufig selbst in Photoshop und Co die einzelnen Dateien erstellen. Websites wie z.B. realfavicongenerator.net können bei der Konvertierung des Bildmaterials helfen. Weil im Konfigurator außerdem Parameter wie Farbe und App-Name eingegeben werden, kann der Generator auch gleich alle notwendigen .xml- und .json-Dateien erstellen. Selbst die Erstellung des .svg für Safari wird vom Generator übernommen. Ob man die erstellten Dateien richtig hochgeladen und die Meta-Tags richtig gesetzt hat, lässt sich praktischerweise über einen einfachen Check auf der Website prüfen.

Grafische Gestaltung

Ein Problem, welches sich nicht automatisiert lösen lässt, ist die Schwierigkeit ein Icon zu erstellen, welches sowohl in hohen als auch in niedrigen Auflösungen ansprechend dargestellt wird. Dabei ist es empfehlenswert für niedrige Auflösungen Details einzusparen, ohne die Wiedererkennbarkeit der Bildmarke außer Acht zu lassen.

Fazit

Favicons haben sich in den letzten Jahren weit entwickelt und sind mittlerweile mehr als einfache Icons im Browser-Tab. Gerade bezüglich der Usability ist das Favicon inzwischen ein unerlässliches Werkzeug für die Wiedererkennbarkeit und Markenbildung. Den umständlichen Weg über Bildbearbeitungs-Software und Texteditoren muss inzwischen keiner mehr wählen. Dank Favicon-Generatoren im Internet lassen sich alle benötigten Dateien einfach und schnell erstellen. Die technischen Herausforderungen sollten allerdings nicht von dem eigentlichen Problem ablenken: ein grafisches Symbol zu erstellen, welches in Groß und in Klein wiedererkennbar und doch einzigartig ist.

Weiterführende Links

• https://praxistipps.chip.de/wordpress-favicon-erstellen-und-einbinden-so-gehts_49610

Ähnliche Artikel

• Screendesign