Favicon

Das Favicon: Dein Freund und Helfer

Die Gestaltung von Websites beschränkt sich schon lange nicht mehr nur auf ansprechende Inhalte. Schließlich geht es bei einem guten Internetauftritt um weit mehr: der Aufbau einer Marke, die einen hohen Wiedererkennungswert besitzt. Ein Begriff, der in diesem Zusammenhang immer wieder fällt, ist das sogenannte Favicon.

Vielleicht stellt sich auch Dir die Frage, was das ist und wie Du die Eigenschaften und Vorteile dieses Instruments für Deine Website nutzen kannst. Diesen Fragen möchten wir an dieser Stelle auf den Grund gehen.

Das Favicon: dein Freund und Helfer

Was ist ein Favicon?

Der Begriff „Favicon“ ist eine kreative Wortschöpfung, die zwei Begriffe in einem vereint. Der erste Teil steht für „favourite“, also zu Deutsch so viel wie „beliebt“. Das „Icon“ im zweiten Teil bedeutet in etwa „Zeichen“ oder „Symbol“. Damit erklärt der Begriff gewissermaßen von selbst, was es bedeutet: Ein Favicon ist ein kleines Symbol oder Logo, das in den „Favoriten“ oder Lesezeichen Deines Browsers angezeigt wird. Verwendet wird dieses Wort in erster Linie in Verbindung mit der Gestaltung von Websites. Das Favicon ist von der Größe her überschaubar: Ursprünglich messen diese lediglich 16 x 16 oder 32 x 32 Pixel. Diese Symbole werden vor allem von Internetbrowsern verwendet. Dadurch wird Dir beim Aufruf einer Internetseite in der Adresszeile auch gleich das Logo angezeigt. Das Ziel dieser Favicons ist es, den Wiedererkennungswert einer Webseite dadurch zu steigern, indem das Logo so präsent wie möglich integriert wird. Dafür werden diese Logos neben der Adresszeile auch in den Lesezeichen (oder „Favoriten“), auf den Registerkarten („Tabs“) und auch auf dem Startbildschirm bei Smartphones angezeigt, wenn der Link auf eine Seite dort abgelegt wird. In den meisten Fällen handelt es sich bei dem Favicon auch gleichzeitig um das (Firmen-)Logo auf der Webseite. Doch aufgrund der sehr begrenzten Größe ist das nicht immer möglich.

Mit der Einführung des Internet Explorer 5 im Jahr 1999 wurden Favicons das erste Mal verwendet. Durch seine Wirkung, den Wiedererkennungswert einer Internetseite zu steigern, wird das Favicon auch als Instrument im Online-Marketing angesehen. Denn durch die Integrierung dieses Symbols kannst Du Deine Internetseite deutlich von anderen abheben lassen. Daher solltest Du darauf achten, dass das Favicon identisch zu Deinem Firmenlogo ist. Wenn das nicht möglich ist, solltest Du trotzdem versuchen, zumindest farblich und vom Design her Deinem Logo nahezukommen. Denn wenn Du gar kein Favicon einbindest, wird entweder ein leeres Dokumenten-Symbol angezeigt (zum Beispiel bei Google Chrome) oder gar kein Symbol (wie bei Safari oder Firefox).

Wie mache ich mir ein Icon?

Um ein Favicon zu erstellen, nutzt Du zunächst ein handelsübliches Bildbearbeitungsprogramm. Adobe Photoshop und Illustrator bilden die ideale Grundlage. Das Logo, das auf Deiner Website zu sehen ist, eignet sich gut für Favicons mit Wiedererkennungswert. Achte allerdings darauf, dass das Icon später nur wenige Pixel groß ist. Zu detailreiche Logos werden somit nicht korrekt dargestellt. Möglicherweise musst Du Dein Logo manuell auf die Größe eines Icons herunterbrechen.

Von Haus aus bieten nur die wenigsten Programme die Möglichkeit, Favicons direkt im .ico Format zu speichern. Nutze dafür einfach einen kostenlosen Generator. Auf Webseiten wie favicon.io oder favicon.cc kannst Du Deine Bilddatei mit nur wenigen Klicks ins richtige Format umwandeln.

Wie groß muss ein Favicon sein?

Die Zeiten, in denen ein Favicon entweder 16 x 16 oder 32 x 32 Pixel groß sein muss, sind längst vorbei. Heute darf ein Icon bis zu 512 x 512 Pixel groß sein. Auch geringere Maße sind möglich, solange die Bilddatei rechteckig ist. Dies ist besonders hilfreich, um auch größere Icons ohne Qualitätsverlust darstellen zu können.

Beachten solltest Du, dass Favicons im Browser des PCs weiterhin im kleinstmöglichen Format von 16 x 16 Pixeln dargestellt werden. Anders sieht es auf dem Bildschirm von Smartphones und Tablets aus. Dort sind die Icons größer und erlauben deutlich mehr Details.

Wo werden Favicons gespeichert?

Zu den Anfangszeiten des Favicons wurden die Dateien im .ico Format abgespeichert. Angezeigt wurde das Symbol beim Aufruf einer Internetseite neben der Adressleiste sowie in den Lesezeichen angezeigt. Aus diesem Grund waren Favicons zu den Anfangszeiten eine beliebte Möglichkeit, die Anzahl der Besucher auf einer Website festzustellen. Dafür wurde einfach die gezählt, wie viele Nutzer die Seite als Lesezeichen gespeichert haben.

In neuerer Zeit steigen jedoch auch die Anforderungen an die erstellten Favicons. Da der technische Fortschritt zu immer neuen Endgeräten und Webbrowsern führt, müssen auch Favicons diesem Wandel angepasst werden. Inzwischen sind neben dem .ico Format auch die Formate .gif und .png sowie auch .jpg und .svg in der Praxis üblich. In erster Linie sind Favicons heute ein Instrument im Marketing, um das Nutzererlebnis einer Seite zu verbessern. Nahezu alle gängigen Websites verwenden diese Symbole, um die Benutzerfreundlichkeit zu steigern. Denn wer schon einmal im Browser die komplette Tab-Leiste mit Internetseiten offen hatte, weiß es zu schätzen, anhand des kleinen Icons sofort zum gewünschten Tab springen zu können. Gleichzeitig steigt durch Favicons auch der Wiedererkennungswert einer Internetseite und eine Marke wird aufgebaut. Denn nicht zuletzt steigt auch die Vertrauenswürdigkeit einer Website mit dem Vorhandensein eines Favicons. Es mag im ersten Blick vielleicht nicht auffallen, wenn es vorhanden ist – aber umso unangenehmer sticht Deine Seite aus der Masse heraus, wenn statt eines hübschen Symbols nur ein generisches Zeichen oder einfach gar nichts angezeigt wird.

Da die Internetbrowser automatisch nach den Symbolen suchen, solltest Du diese im Root-Verzeichnis Deiner Webseite einpflegen.

Wie kannst Du Favicons einbinden?

Über den HTML-Code Deiner Internetseite kannst Du das Favicon im Head-Bereich einpflegen. Dazu muss der Befehl jedoch ein paar Voraussetzungen erfüllen. Du brauchst

Alternativ gibt es noch die Möglichkeit, das Icon direkt im Root-Verzeichnis abzulegen. Dafür musst Du die Datei „Favicon.ico“ im Basisverzeichnis Deiner Domain hochladen. Solltest Du irgendwelche Grafiken in einem anderen Verzeichnis hochladen, werden diese bei der Darstellung nicht berücksichtigt.

Es gibt eine Vielzahl von Möglichkeiten, wie Du ein Favicon erstellen kannst. Beispielsweise bieten bereits die meisten Bildbearbeitungsprogramme entsprechende Funktionen an, mit denen Du ein Symbol Deinen Wünschen entsprechend entwerfen kannst. In den meisten Fällen kannst Du diese dann jedoch nicht als .ico-Datei abspeichern. Über Hilfsprogramme im Internet, sogenannten „Online Favicon Generatoren“, kannst Du die entworfene Grafik jedoch anschließend in ein passendes Dateiformat umwandeln, beispielsweise .ico. Anschließend kannst Du diese Datei über die oben genannten Befehle im HTML-Code einbauen. Allerdings solltest Du bei diesem Dateiformat darauf achten, dass es von Haus aus keine transparenten Hintergründe gibt. Möchtest Du etwa ein rundes Icon erstellen, erscheinen die Rahmen standardmäßig weiß. Um dies zu ändern, bedarf es wiederum eines speziellen Programms, welches die weißen Hintergründe in transparente Flächen umwandelt.

Weniger Arbeit hast Du an dieser Stelle mit anderen Dateiformaten. Bei .png und .gif beispielsweise werden Hintergründe bereits ohne separate Bearbeitung transparent gestaltet.

Mit der Hilfe professioneller Bildbearbeitungsprogramme kannst Du auch auf die Hilfe diverser Online-Tools verzichten. Denn diese bieten Dir die Möglichkeit an, Deine Grafik direkt im Dateiformat .ico zu speichern. Das bietet Dir den Vorteil, dass Du nicht erst umständlich auf mehrere Internetseiten zugreifen musst, sondern alles direkt „aus einer Hand“ hast. Jedoch solltest Du dann darauf achten, dass Du die Datei in verschiedenen Größen abspeicherst. Denn je nach Endgerät des Besuchers Deiner Webseite werden für die korrekte Darstellung im Browser unterschiedliche Größen für die Grafik verwendet. Ein entsprechender Generator im Internet kann Dir diese Arbeit abnehmen und spuckt gleich sämtliche benötigten Größen aus. Weiterer Vorteil: In den meisten Fällen erhältst Du zusätzlich zu den Grafiken die passenden Befehle in HTML-Code, sodass Du diese nur noch in Dein Root-Verzeichnis einfügen musst. Das kann Dir deutlich Zeit beim Bearbeiten sparen.

Grundsätzlich solltest Du jedoch darauf achten, dass die Symbole eine quadratische Form haben, damit sie sich gut an die Pixel-Vorgaben anpassen können. Auch sollten die Symbole nicht zu detailreich sein, damit diese auch bei kleiner Darstellung noch gut erkennbar sind (beispielsweise auf dem Display kleiner Handys).

Natürlich sollte das Symbol sich aus Gründen des Marketings deutlich von anderen Icons abheben. Besonders, wenn es sich dabei um Internetseiten der Konkurrenz handelt.

Auch wenn die ursprünglichen Auflösungen mit 16 x 16 und 32 x 32 Pixeln eher niedrig waren, werden inzwischen immer höher aufgelöste Favicons benötigt. Web-Apps werden immer häufiger entwickelt. Damit die Seite auch korrekt und optisch ansprechend auf dem Home-Bildschirm des Smartphones angezeigt werden kann, brauchst Du hoch aufgelöste Grafik-Dateien. Eine Auflösung von 512 x 512 Pixel sollte in diesem Fall ausreichend sein. Dabei solltest Du jedoch darauf achten, dass ein Icon sowohl in niedriger als auch in hoher Auflösung korrekt dargestellt wird. Das kann unter Umständen eine Herausforderung sein, weshalb Du bei den kleinen Auflösungen zur Not auch einfach ein paar Details in der Grafik weglassen kannst. Dabei sollte jedoch das Gesamtbild weiterhin wiedererkennbar sein, um einen einheitlichen Auftritt zu gewährleisten.

Für das Einbinden von Favicon in Apps auf Mobilgeräten ist der Aufwand ein Stück weit größer. In Apples Betriebssystem iOS musst Du den Ablageort Deines Icons im Meta-Tag des HTML-Codes angeben. Dies kannst Du beispielsweise über folgenden Befehl erreichen:

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

Für die Einbindung von Favicons in Betriebssystemen auf Android-Basis hast Du etwas mehr Arbeit. Hierfür benötigst Du eine .json-Datei, die im Meta-Tag angegeben wird. Diese Datei wiederum verlinkt auf die Symbole, die im .png-Format abgespeichert sein müssen. Der Befehl sieht entsprechen so aus:

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

Favicon verwenden: So integrierst Du Icons bei WordPress

Normalerweise müssen Icons umständlich per FTP-Programm auf den Webserver vom Hosting Provider geladen werden. Einfacher machen es Dir viele Content-Management-Systeme wie WordPress. Dort ist der Upload intuitiv und in wenigen Sekunden erledigt.

Um Dein Favicon bei WordPress zu ändern, navigierst Du einfach zum Menüpunkt Design und weiter zum Customizer. Unter den Website-Informationen hast Du nun die Möglichkeit, Dein Website-Icon per Upload zu ändern. Dafür wählst Du die gespeicherte Datei auf Deinem Rechner aus. Favicons bei WordPress dürfen maximal 512 x 512 Pixel groß sein.

Formate

Verschiedene Systeme benötigen unterschiedliche Formate:

Fazit zum Favicon

Zusammenfassend lässt sich sagen, dass das Favicon inzwischen ein wichtiges Instrument im Marketing geworden ist und weit mehr darstellt als eine kleine Grafik in Browser-Tab. Mit diesem Symbol kannst Du den Wiedererkennungswert Deiner Seite steigern und eine Marke etablieren. Auch das Image Deiner Website verbessert sich durch die höhere Nutzerfreundlichkeit deutlich. Mit einem entsprechenden Generator für Favicons im Internet lassen sich die verschiedenen Grafiken mit ein paar Klicks bearbeiten und erstellen. Außerdem können Dir diese Tools dabei helfen, die passenden HTML-Codes einzufügen, sodass bei der Darstellung der Symbole keine Fehler auftreten. Mit diesen Tipps ist die Erstellung Deiner eigenen Favicons kein Problem, und einem erfolgreichen Marketing Deiner Website steht nichts mehr im Weg!