Favicon: Unterschied zwischen den Versionen
(→Ähnliche Artikel) |
|||
| (8 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | <seo title="Favicon - Was ist das?" metadescription=" | + | <seo title="Favicon - Was ist das?" metadescription="Beim Favicon handelt es sich um ein kleines Symbol, welches neben dem Seitentitel einer Webseite im Browser-Tab angezeigt wird." /> |
== Definition == | == Definition == | ||
| − | + | [[File:Favicon.png|mini|450px|rechts|alt=Favicon|'''Abbildung:''' Favicon - Autor: Seobility - Lizenz: [[Creative Commons Lizenz BY-SA 4.0|CC BY-SA 4.0]]|link=https://www.seobility.net/de/wiki/images/2/26/Favicon.png]] | |
| − | 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 | + | 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 User, die mehrere 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: |
[[Datei:favicon seobility.png|link=|alt=Favicon Seobility|Das Favicon von Seobility]] | [[Datei:favicon seobility.png|link=|alt=Favicon Seobility|Das Favicon von Seobility]] | ||
| Zeile 23: | Zeile 23: | ||
== Das Favicon am Desktop == | == Das Favicon am Desktop == | ||
| − | Vor | + | Vor etwa 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*32 und 48*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 . | + | 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, .jpg und später .svg 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 Not Found|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|Meta-Tags]] im HTML Head an: |
<pre><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"></pre> | <pre><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"></pre> | ||
<pre><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"></pre> | <pre><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"></pre> | ||
| − | |||
Auf unserer Website seobility.net sieht dieser Meta-Tag so aus: | Auf unserer Website seobility.net sieht dieser Meta-Tag so aus: | ||
| − | <pre><link href=" | + | <pre><link href="https://www.seobility.net/dynamiccontent/www.seobility.net/favicon.gif" rel="shortcut icon" type="image/x-icon" ></pre> |
| − | In jüngerer Zeit kam das [[SVG (Scalable Vector Graphics)|.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. | + | In jüngerer Zeit kam das [[SVG (Scalable Vector Graphics)|.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. Inzwischen können beinahe alle modernen Browser .svg Grafiken als Favicon darstellen. 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 == | == Das Favicon auf Mobilgeräten == | ||
| Zeile 47: | Zeile 46: | ||
<pre><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"></pre> | <pre><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"></pre> | ||
| − | |||
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. | 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. | ||
| Zeile 59: | Zeile 57: | ||
== Web-Services == | == 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. | + | 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. [https://realfavicongenerator.net/ 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 == | == Grafische Gestaltung == | ||
| Zeile 79: | Zeile 77: | ||
[[Kategorie:Web Entwicklung]] | [[Kategorie:Web Entwicklung]] | ||
[[Kategorie:Web Design]] | [[Kategorie:Web Design]] | ||
| + | |||
| + | <html><script type="application/ld+json"> | ||
| + | { | ||
| + | "@context": "https://schema.org/", | ||
| + | "@type": "ImageObject", | ||
| + | "contentUrl": "https://www.seobility.net/de/wiki/images/2/26/Favicon.png", | ||
| + | "license": "https://creativecommons.org/licenses/by-sa/4.0/deed.de", | ||
| + | "acquireLicensePage": "https://www.seobility.net/de/wiki/Creative_Commons_Lizenz_BY-SA_4.0" | ||
| + | } | ||
| + | </script></html> | ||
| + | |||
| + | {| class="wikitable" style="text-align:left" | ||
| + | |- | ||
| + | |'''Über den Autor''' | ||
| + | |- | ||
| + | | [[File:Seobility S.jpg|link=|100px|left|alt=Seobility S]] Das Seobility Wiki Team besteht aus SEO-, Online-Marketing- und Web-Experten mit praktischer Erfahrung in den Bereichen Suchmaschinenoptimierung, Online-Marketing und Webentwicklung. Alle unsere Artikel durchlaufen einen mehrstufigen Redaktionsprozess, um Dir die bestmögliche Qualität und wirklich hilfreiche Informationen bieten zu können. <html><a href="https://www.seobility.net/de/wiki/Seobility_Wiki_Team" target="_blank">Mehr Informationen über das Seobility Wiki Team</a></html>. | ||
| + | |} | ||
| + | |||
| + | <html><script type="application/ld+json"> | ||
| + | { | ||
| + | "@context": "https://schema.org", | ||
| + | "@type": "Article", | ||
| + | "author": { | ||
| + | "@type": "Organization", | ||
| + | "name": "Seobility", | ||
| + | "url": "https://www.seobility.net/" | ||
| + | } | ||
| + | } | ||
| + | </script></html> | ||
Aktuelle Version vom 23. Januar 2024, 13:33 Uhr
Inhaltsverzeichnis
Definition
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 User, die mehrere 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
Favicon Check
Prüfe, ob Dein Favicon korrekt verlinkt ist
Das Favicon am Desktop
Vor etwa 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*32 und 48*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, .jpg und später .svg 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/dynamiccontent/www.seobility.net/favicon.gif" 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. Inzwischen können beinahe alle modernen Browser .svg Grafiken als Favicon darstellen. 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
Ähnliche Artikel
| Über den Autor |
 |