{"id":31943,"date":"2024-11-12T12:39:38","date_gmt":"2024-11-12T12:39:38","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31943"},"modified":"2025-03-18T13:50:51","modified_gmt":"2025-03-18T13:50:51","slug":"Favicon","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/de\/wiki\/Favicon","title":{"rendered":"Favicon"},"content":{"rendered":"

Definition<\/span><\/h2>\n
\n
\"Favicon\"<\/a> <\/p>\n
Abbildung:<\/b> Favicon – Autor: Seobility – Lizenz: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

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\u00fcr User, die mehrere Tabs gleichzeitig nutzen oder Tabs im Browser anheften, kann das kleine, quadratische Icon mitunter die einzige Orientierungshilfe zwischen gerade ge\u00f6ffneten Websites sein. Als Beispiel ist hier das Favicon von seobility.net dargestellt:\n<\/p>\n

\"Favicon\n<\/p>\n

Abbildung: Favicon von Seobility, Autor: Seobility\n<\/p>\n

\n
\n

Favicon Check<\/h3>\n

Pr\u00fcfe, ob Dein Favicon korrekt verlinkt ist<\/p>\n<\/div>\n

\n
\n<\/form>\n<\/div>\n

Das Favicon am Desktop<\/span><\/h2>\n

Vor etwa 20 Jahren begann die Entwicklungsgeschichte des Favicons mit der Ver\u00f6ffentlichung des Internet Explorers 5. Gerade einmal 16 mal 16 Pixel standen zur Verf\u00fcgung, um die Bildmarke einer Website darzustellen. Auch wenn sp\u00e4ter die Aufl\u00f6sung auf 32*32 und 48*48 Pixel anstieg, gilt das 16 Pixel-Bild im .ico-Format noch heute als g\u00e4ngiger Web-Standard.\n<\/p>\n

Mit der steigenden Anzahl von Browsern und Endger\u00e4ten wurden auch die Anforderungen an das Favicon immer h\u00f6her. Das .ico-Format wurde bald durch .png, .gif, .jpg und sp\u00e4ter .svg erg\u00e4nzt, wobei die ersten zwei von allen g\u00e4ngigen Browsern unterst\u00fctzt werden. Abgelegt wird ein Favicon wenn m\u00f6glich im Root-Verzeichnis einer Website, denn Browser suchen automatisch an dieser Stelle nach den Icons. Findet ein Browser die erwarteten Dateien dort nicht, f\u00fchrt dies zu einem 404-Status<\/a> des Webservers, was nicht nur die Ladezeit einer Website verlangsamen kann, sondern sich auch negativ auf die Usability<\/a> des Internetauftritts auswirkt. Wer sicherstellen will, dass die Dateien vom Browser gefunden werden, gibt deren Pfad \u00fcber Meta-Tags<\/a> im HTML Head an:\n<\/p>\n

<link rel=\"icon\" type=\"image\/png\" sizes=\"16x16\" href=\"\/favicon-16x16.png\"><\/pre>\n
<link rel=\"icon\" type=\"image\/png\" sizes=\"32x32\" href=\"\/favicon-32x32.png\"><\/pre>\n
Auf unserer Website seobility.net sieht dieser Meta-Tag so aus:\n<\/p>\n
<link href=\"https:\/\/www.seobility.net\/dynamiccontent\/www.seobility.net\/favicon.gif\" rel=\"shortcut icon\" type=\"image\/x-icon\" ><\/pre>\n
In j\u00fcngerer Zeit kam das .svg-Format<\/a> hinzu, welches zum Bedauern vieler Web-Designer f\u00fcr den Einsatz als Favicon bislang ein Nischendasein fristet, lie\u00dfe sich dieses Format doch besonders gut skalieren. Inzwischen k\u00f6nnen beinahe alle modernen Browser .svg Grafiken als Favicon darstellen. Einzig Safari setzt f\u00fcr das Symbol bei angehefteten Tabs .svg als Format voraus. Bisher l\u00e4sst sich diese Funktion allerdings nur am Desktop nutzen.\n<\/p>\n
Das Favicon auf Mobilger\u00e4ten<\/span><\/h2>\n
Seit Apple mit der Ver\u00f6ffentlichung seines Smartphone-Betriebssystem iOS verst\u00e4rkt auf Web-Apps setzt, sind Favicons auch in h\u00f6heren Aufl\u00f6sungen eine technische Notwendigkeit. Neben Apple setzt auch Google mit Android inzwischen verst\u00e4rkt auf die quadratischen Bilddateien. Das Icon wird hier beim Speichern einer Webseite als App-Icon am Homescreen angezeigt, wobei aufgrund der teilweise hohen Aufl\u00f6sungen von Smartphone-Bildschirmen ein Bild von 512 Pixeln Seitenl\u00e4nge ben\u00f6tigt wird. Die h\u00f6here Aufl\u00f6sung bringt den Vorteil komplexerer Gestaltungsm\u00f6glichkeiten mit sich.\n<\/p>\n
W\u00e4hrend das Einbinden von Favicons f\u00fcr Desktop-Browser einzig das Ablegen im Root-Verzeichnis voraussetzt, ist die Installation f\u00fcr Mobilger\u00e4te und Tablets ein gutes St\u00fcck komplexer. Dabei unterscheiden sich die Anforderungen der Plattformen sehr stark.\n<\/p>\n
Damit iOS die sogenannten Touch-Icons auffinden kann, muss der Speicherort \u00fcber ein Meta-Tag im Head-Bereich des HTML-Codes angegeben werden. W\u00e4hrend in der Vergangenheit eine gro\u00dfe Anzahl von verschiedenen Gr\u00f6\u00dfen notwendig war, begn\u00fcgt sich Apple seit j\u00fcngster Zeit mit einer 180 Pixel gro\u00dfen .png-Datei.\n<\/p>\n
<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\/apple-touch-icon.png\"><\/pre>\n
Etwas komplexer ist die Einbindung f\u00fcr das Android-Betriebssystem. \u00dcber 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\u00dferdem Datenquelle f\u00fcr App-Name und Farbschema einer Website. Das als Standard gedachte Format wird bisher allerdings ausschlie\u00dflich von Chrome f\u00fcr Android und Opera Mini unterst\u00fctzt. Eine detaillierte Beschreibung \u00fcber den Aufbau der .json-Datei findet man unter https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Manifest<\/a>.\n<\/p>\n
<link rel=\"manifest\" href=\"\/manifest.json\"><\/pre>\n
Icons im Startmen\u00fc von Windows<\/span><\/h2>\n
Leider setzt auch Windows beim Ablegen einer Website in den Kacheln seines Startmen\u00fcs nicht auf das Manifest im .json-Format. Microsoft ben\u00f6tigt eine propriet\u00e4re .xml-Datei, welche zwar \u00e4hnliche Informationen wie die manifest.json beinhaltet, aber formatbedingt einen anderen Aufbau enth\u00e4lt. 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.\n<\/p>\n
Web-Services<\/span><\/h2>\n
Da sich gerade im Mobilbereich bisher kein Standard etablieren konnte, ist das richtige Integrieren von Favicons f\u00fcr Webdeveloper inzwischen zu einer Herausforderung geworden. Zum Gl\u00fcck muss man als Entwickler und Grafiker nicht zwangsl\u00e4ufig selbst in Photoshop und Co die einzelnen Dateien erstellen. Websites wie z.B. realfavicongenerator.net<\/a> k\u00f6nnen bei der Konvertierung des Bildmaterials helfen. Weil im Konfigurator au\u00dferdem 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\u00fcr Safari wird vom Generator \u00fcbernommen. Ob man die erstellten Dateien richtig hochgeladen und die Meta-Tags richtig gesetzt hat, l\u00e4sst sich praktischerweise \u00fcber einen einfachen Check auf der Website pr\u00fcfen.\n<\/p>\n
Grafische Gestaltung<\/span><\/h2>\n
Ein Problem, welches sich nicht automatisiert l\u00f6sen l\u00e4sst, ist die Schwierigkeit ein Icon zu erstellen, welches sowohl in hohen als auch in niedrigen Aufl\u00f6sungen ansprechend dargestellt wird. Dabei ist es empfehlenswert f\u00fcr niedrige Aufl\u00f6sungen Details einzusparen, ohne die Wiedererkennbarkeit der Bildmarke au\u00dfer Acht zu lassen.\n<\/p>\n
Fazit<\/span><\/h2>\n
Favicons haben sich in den letzten Jahren weit entwickelt und sind mittlerweile mehr als einfache Icons im Browser-Tab. Gerade bez\u00fcglich der Usability ist das Favicon inzwischen ein unerl\u00e4ssliches Werkzeug f\u00fcr die Wiedererkennbarkeit und Markenbildung. Den umst\u00e4ndlichen Weg \u00fcber Bildbearbeitungs-Software und Texteditoren muss inzwischen keiner mehr w\u00e4hlen. Dank Favicon-Generatoren im Internet lassen sich alle ben\u00f6tigten Dateien einfach und schnell erstellen. Die technischen Herausforderungen sollten allerdings nicht von dem eigentlichen Problem ablenken: ein grafisches Symbol zu erstellen, welches in Gro\u00df und in Klein wiedererkennbar und doch einzigartig ist.\n<\/p>\n
Weiterf\u00fchrende Links<\/span><\/h2>\n