Favicon erstellen und einbauen – Verschiedene Möglichkeiten und Techniken für Website Favicons

Favicon erstellen und einbauen - Verschiedene Möglichkeiten und Techniken für Website FaviconsDas Favicon ist für viele Webmaster nichts weiter als eine Kleinigkeit im Webdesign. Ein winziges Symbol, was per se erst einmal keine große Rolle zu spielen scheint. Dem ist aber nicht so, denn das Favicon wird inzwischen mehr verwendet als jemals zuvor.

Es wird nicht nur im Browser und den dortigen Lesezeichen und Tabs angezeigt, sondern mittlerweile auch in der Google-Suche präsentiert. Spätestens seit Google aktiv auf das Favicon setzt (DuckDuckGo macht das übrigens schon deutlich länger), haben Selbstständige wieder ein gesondertes Interesse daran, das Favicon entsprechend zu verfeinern, um innerhalb der Suche noch mehr aufzufallen und hervorzustechen.

Schließlich kann ein gut designtes Favicon durchaus zum Klick verführen, Aufmerksamkeit erzeugen oder einfach nur ein angenehmes Symbol bzw. Logo darstellen, dass sich bei den Besuchern einbrennt. Welche Techniken und Methoden es zur Umsetzung und dem Einbau eines Favicons gibt, verrate ich euch heute ein wenig genauer. Vor allem aber geht es darum, die beste Art der Implementierung zu finden.

Favicon Techniken und Probleme

Es gibt über zwanzig verschiedene Methoden, Größen und Angaben, die Entwickler im Quelltext ihrer Seite hinterlegen können oder müssen, um alle Browser, Geräte und Schnittstellen mit entsprechenden Icons zu versorgen.

Ganz schön viel, nicht wahr?

Ehrlicherweise sind eine Menge davon überflüssig, aber eben längst nicht alle. Es kommt immer auf die Frage an, welche Plattformen wirklich bedient werden sollen.

Auch das Dateiformat ist entscheidend. Früher waren Favicons kleine Icon-Dateien (.ico), die 16 x 16 Pixel groß waren. Heute sind es oft PNG-Dateien (min. 48 x 48 Pixel groß) und selbst animierte Favicons sind hier und da möglich.

Noch moderner ist aber der Einsatz eines Favicons als SVG. Letzteres hat den Vorteil, dass das Symbol skalierbar bleibt, also keine feste Größe mehr besitzt. SVG Favicons werden inzwischen von allen modernen Browsern unterstützt, wie hier zu sehen ist. Sie sind also eine Überlegung wert.

Als Backup bzw. Fallback empfiehlt es sich, eine Datei mit dem Namen favicon.ico in den Hauptordner der jeweiligen Website zu legen. Das hat damit zu tun, dass die favicon.ico Jahrzehnte lang ein Standard darstellt und einige Tools automatisch nach der entsprechenden Datei suchen, diese also immer finden sollten.

Das Problem ist auch hier wieder die allgemeine Kompatibilität, sodass eine einzelne Datei oft nicht ausreicht, um mit Sicherheit sagen zu können, dass das Favicon überall korrekt angezeigt wird. Deshalb sind meist zwei oder sogar drei Einträge notwendig, um dies sicherzustellen.

Nutzt du ein Favicon auf deiner Website?

Ergebnis anschauen

Minimaler Code für die Favicon-Implementierung

Also noch einmal kurz und kompakt. Alte Browser benötigen grundsätzlich eine favicon.ico im Hauptordner, ebenso wie einige Tools und Systeme, die immer erst nach dem Icon-File suchen. Das SVG Favicon ist für moderne Browser die beste Wahl und Apple-Geräte verlangen zusätzlich nach einer 180 x 180 Pixel großen PNG-Datei als Apple Touch Icon. Unter Android braucht es außerdem das Manifest im JSON-Format.

Verzichten wir also auf alles, was nicht zwingend notwendig ist, benötigen wir immer noch einen Vierzeiler im Head unserer Website, um für alle Geräte entsprechende Favicons und Icons ausgeben zu können. Der minimale Code sieht dann so aus:

<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Wir integrieren auf diese Art alles, was wir eben erwähnt haben. Die SVG für die modernen Browser, das Icon als Fallback und das Touch Icon für Apple-Geräte.

Das Manifest ist für Android und sollte den folgenden Code enthalten. Die JSON-Datei dient dabei als Schnittstelle und verlinkt auf zwei entsprechende Icons im PNG-Format.

{ "icons": [ { "src": "/192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/512.png", "type": "image/png", "sizes": "512x512" } ] }

Favicon Generatoren und Tools im Internet

Es gibt viele Tools im Internet, die alle benötigten Größen und Angaben automatisch erzeugen können, wenn ihr zuvor eine entsprechende Grafik hochladet. Die sind aber oft Quatsch, weil sie eben wirklich ALLE Größen und Angaben generieren, also auch die, die keiner mehr benötigt und die den Code nur unnötig aufblähen. Bleiben wir daher bei unseren vier Angaben von oben. Damit sind wir auf der sicheren Seite und überladen unsere Website nicht mit überflüssigen Icons und Verweisen.

Mein liebstes Online-Tool für Favicons ist dieses. Mit dem Tool kann ich entweder tatsächlich Pixel malen und so ein Favicon kreieren, besser ist es aber die eigene PNG-Datei hochzuladen. Diese wandelt das Tool dann automatisch um, sodass ich sie im Anschluss noch im Editor korrigieren kann. Das ist hin und wieder ganz praktisch, da PNG-Dateien oft feiner sind als Icons und ich die .ico-Datei somit etwas verfeinern kann, sollte dies notwendig sein. Favicon.cc erzeugt zudem sehr schlanke Dateien, die nicht weiter komprimiert werden müssen, was bei dem Dateityp .ico auch nicht ganz so einfach ist wie bei anderen Grafikdateien.

Favicon erstellen und einbauen - Verschiedene Möglichkeiten und Techniken für Website Favicons

Grundsätzlich kann ich euch zudem CloudConvert empfehlen. Das ist deshalb einen Blick wert, weil so die SVG-Datei die Grundlage des Favicons bilden kann. Wer auf seinem Computer nicht entsprechende SVG-Tools installiert hat, kann die SVG dann mittels CloudConvert in eine Icon-Datei umwandeln.

Favicon per WordPress Plugin integrieren

Wer das Thema Favicon gerne automatisieren möchte, weil er sich nicht so gut damit auskennt, findet für WordPress viele verschiedene Top 20 der besten WordPress-Plugins für Selbstständige im Netz, die genau das realisieren. Beachtet dabei aber bitte, dass die Erstellung eines Favicons keine große Sache ist und ich eben erst beschrieben habe, wie ihr alle Dateitypen mit Online-Tools erstellen könnt. Wollt ihr also wirklich ein Plugin für diesen Zweck installieren?

Falls ja, kann ich euch dieses Plugin empfehlen, welches ein Bild und einen Online-Service als Grundlage verwendet, um die Favicons automatisch zu erzeugen und in eure WordPress Website zu integrieren.

Favicon erstellen und einbauen - Verschiedene Möglichkeiten und Techniken für Website Favicons

Auch dieses Plugin macht es euch besonders einfach und lässt euch die entsprechenden Grafiken schnell und unkompliziert im Admin von WordPress hochladen.

Sinnvoll sind Plugins für solche Kleinigkeiten jedoch nicht. Ihr solltet sie nur dann verwenden, wenn ihr wirklich blutige Anfänger seid und euch mit allem, was mit Code und Anpassungen zu tun hat, gnadenlos überfordert fühlt. Wer sich auch nur ein bisschen auskennt, kann auf derartige Plugins aber verzichten.

SVG-Datei als Favicon-Grundlage

Eine SVG-Datei sollte immer die Grundlage für das Favicon bilden. Das liegt daran, dass die SVG skalierbar ist. Genau wie bei Logos, kann ich aus der SVG daher alle Größen erzeugen, ohne einen Qualitätsverlust in Kauf nehmen zu müssen. Erstellt das Favicon also als SVG und wandelt es von dort aus in andere Formate wie PNG und ICO um. Das geht, wie eben erwähnt, mit CloudConvert oder Desktop-Tools wie BoxySVG (persönliche Empfehlung von mir).

Mit der SVG ist es zudem theoretisch möglich, die Darstellung im Dark Mode anzupassen. Damit kann das Favicon seine Farbe ändern oder eben entsprechend dunkler dargestellt werden. Das geschieht innerhalb der SVG mittels:

@media (prefers-color-scheme: dark)

Wichtig bei dem Favicon ist immer, dass es quadratisch angelegt wird. Google selbst empfiehlt in seinem Guide für alle Dateien die Größen: 48 x 48 px, 96 x 96 px oder 144 x 144 px. Google verweist ebenso darauf, dass alle unterstützten Dateitypen als Favicon erlaubt sind, solange sie crawlbar, also für Google erreichbar erscheinen.

Favicons als Base64 integrieren

Meine Erfahrung ist, dass Google auch Base64 erkennen und interpretieren kann. Auf mehreren eigenen Projekten hatte ich bereits minimalistische Favicons, die ich als Base64 direkt in den Quelltext integriert habe. Das hat den Vorteil, dass keine weitere Anfrage für eine Datei erstellt werden muss.

Grundsätzlich kann jeder Dateityp auch als Base64 integriert werden. Je nach Größe, ist das mal mehr und mal weniger hilfreich. Grundsätzlich ist eine Anfrage weniger jedoch immer die Optimierung wert, jedenfalls wenn ihr mich fragt.

Als Encoder könnt ihr meinen Base64 Converter verwenden. Einfach die Datei öffnen und den Base64 Code entsprechend kopieren. Das Ganze sieht dann bei einem Icon z. B. wie folgt aus.

<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAg
AAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//wAA//8AAJkxAACZMQAAmT8AAJk/AACZMQAAgTEAAIExAACZMQAAmTEAAJnxAACZMQAAmTEAAP//AAD//wAA">

Wie erwähnt sind meine Erfahrungen mit Base64 Favicons durchweg positiv. Ihr könnt übrigens auch Webfonts als Base64 integrieren, was aufgrund der Dateigröße aber nicht immer Sinn macht bzw. weitere Tricks erfordert. Doch dazu an anderer Stelle mehr.

Meine Methode für Website Favicons

Persönlich handhabe ich es auf vielen Projekten so, dass ich nur noch eine SVG-Datei als Favicon in den Head meiner Website einbinde. Als Backup liegt oft eine favicon.ico bei mir im Hauptverzeichnis, aber ohne weiteren Verweis im Quellcode. Die Tools, die danach suchen, finden die Datei auch ohne Link. Auf die anderen Angaben oder das Apple Touch Icon verzichte ich komplett.

Mit dieser Methode spare ich mir überflüssigen Code für die Favicons und habe nur noch eine Zeile für die entsprechende SVG-Datei. Jetzt mag manch einer sagen, dass dies nicht ausreicht, um überall das beste Ergebnis zu erzielen, was durchaus stimmt, mir aber egal ist. SVG und ICO reichen für mich aus und gerade bei der SVG ist davon auszugehen, dass diese über kurz oder lang zum Standard werden wird. Schon jetzt wird sie fast überall unterstützt.

Wer alles komplett richtig machen möchte, nutzt das Beispiel von ganz oben. Damit sind die wichtigsten Punkte abgedeckt und bedient, ohne allzu viel Ballast mit in den Head zu packen. Denn auch hier gilt wie immer: Jede unnötige Zeile Code ist eine Zeile Code zu viel.

1 Gedanke zu „Favicon erstellen und einbauen – Verschiedene Möglichkeiten und Techniken für Website Favicons“

  1. Hallo David,

    vielleicht ist es nur eine kleine Spielerei aber ich mag noch immer die animierten Favicons 🙂 Gerade bei mehreren offenen Tabs ist ein solcher Effekt manchmal sehr angenehm und auch wenn ich GIF und andere “Wackelbilder” im Design nicht so gelungen finde (erinnert oft an webbaustelle.gif) ist dieses auch eine Möglichkeit um noch einmal sich etwas hervorheben zu können,

    Die Idee das Favicon per prefers-color-scheme: ebenfalls anzupassen klingt zumindest interessant und wäre zumindest auch eine gute Idee.

    Je nach Thema der Seite kann es auch interessant sein für jede Unterkategorie ein eigenes Favicon zu setzen, so dass sich hier die Frage stellt, ob die Seite als Ganzes oder das Thema per Favicon gewürdigt werden sollte. Gerade bei Blogs mit wenigen Kategorien würde mir spontan ein eigenes Favicon je Kategorie für einzelne Artikel gerade gut gefallen und ich bin am Überlegen, ob dies neben der Lust an einer Spielerei auch einen Mehrwert bringen kann.

    Viele Grüße
    Andreas Unkelbach

    Antworten

Schreibe einen Kommentar