Sie fragen sich vielleicht: Warum sollte ich ein Favicon erstellen? Was ist ein Favicon überhaupt, und was ist mit diesem Gerede von Format, Größen und Kompatibilität mit Geräten?
Es mag Sie überraschen: Sie sehen Favicons jeden Tag im Browser auf Ihrem PC, auf Ihrem "Home Screen" im Smartphone, auf Windows 10-Kacheln, auf allen möglichen Geräten, mit denen Sie mit Websites interagieren. Das Favicon gehört zum Herz des Firmenbrandings und verleiht einem Auftritt im Internet das letzte kleine Extra an Vertrauenswürdigkeit.
Ja gut, aber... Was ist ein Favicon?
"Das Favicon, das auch als Verknüpfungssymbol, Website-Symbol, Tab-Symbol, URL-Symbol oder Lesezeichen-Symbol bekannt ist, wurde 1999 eingeführt. Es war ursprünglich das kleine Symbol, das sich links vom Titel Ihrer Website in Browser-Tabs befindet." So steht es in unserem FAQ.
Über die Jahre hat es sich weiterentwickelt, neue Namen bekommen wie "Touch Icon", und erscheint in ganz verschiedenen Größen und Kontexten: auf Apple-Geräten, Windows 10-Kacheln, Android, Chrome-, Opera-, Safari-Tabs und mehr.
Deshalb ist es wichtig geworden, das richtige Format und die richtigen Größen zu erstellen. Außerdem muss man es professionell im Code einer Website einbinden.
Ich sehe leider immer wieder Websites, bei denen das Favicon komplett weggelassen wurde! Und das sogar in Fällen, wo der Betreiber eine Agentur oder einen professionellen Webdesigner angestellt hat.
Ich finde das ehrlich gesagt schlampig. Man baut doch auch kein Haus und lässt den Eingangsbereich unverputzt.
Wie kann ich ein Favicon erstellen?
"Ja, wie mache ich ein Favicon?" Auf ein paar Sachen müssen Sie achten. Da wären Skalierbarkeit, Dateiformat und die korrekten Größen für alle Endgeräte.
Skalierbarkeit
Ihr Favicon muss auch noch erkennbar sein, wenn es, wie oben zu sehen ist, im Tab eines Browsers erscheint. Da ist es gerade mal 16x16 Pixel groß!
Vielleicht können Sie das Logo Ihrer Firma so weit herunterskalieren, ohne dass es zu einem winzigen "Blob" wird, in dem alle Details verloren gehen. Wenn nicht, lassen Sie Ihren Grafikdesigner ein Symbol erschaffen, das Ihrem Branding entspricht - in Form, Farben, evtl. Schriftart - und das eine simple, klare Form hat.
Dieses Portraitfoto von mir kann man in 16x16 Pixeln kaum erkennen.
Dieses Symbol hat eine klare, einfache Form und lässt sich prima skalieren.
Format
Ein Favicon muss als PNG, GIF oder ICO-Datei in 8-bit oder 24-bit Farben abgespeichert werden. Alle drei Dateiformate unterstützen Transparenz (in der Grafikersprache: einen Alpha-Kanal), die Sie auch nutzen sollten.
Denn: Ein Favicon mit einem weißen Hintergrund (rechts) sieht einfach blöder aus als eins, bei dem jenseits der Kanten des Symbols der Hintergrund transparent ist (links):
Größe
Anfänglich war die richtige Größe eines Favicons 16x16 oder 32x32 Pixel, heute ist es ratsam, es in 512x512 Pixeln anzulegen, damit es z.B. in den Lesezeichen im Browser auf ihrem Telefon auch schick und scharf erscheint.
Ihre Website: Das Favicon einbinden
So. Da haben sie's, Ihr Favicon. Jetzt müssen Sie es nur noch auf Ihrer Website einbinden!
Eeeeeeigentlich müssten Sie jetzt noch mal mehrfach Ihr Favicon erstellen, und zwar in allen möglichen Größen, um verschiedenen Geräten oder Apps gerecht zu werden: dem Chrome Web Store, dem iPad, iPhone, Google Developer Web App, dem Android Home Screen... Der Creative Bloq hat dazu ein gutes "Cheat Sheet".
Zum Glück gibt es dafür eine Faulpelz-Lösung. Die heißt Real Favicon Generator.
Dieses großartige Tool nimmt Ihre 512x512 Pixel große PNG und erstellt daraus ganz automatisch die richtigen Dateien in den richtigen Größen, bastelt Ihnen noch den korrekten HTML-Quellcode für den Head-Bereich Ihrer Website, und drückt Ihnen alles als Download in die Hand.
Noch besser: Die Entwickler stellen sogar ein WordPress-Plugin zur Verfügung. Mit dem ist in nur wenigen Mausklicks Ihr Favicon erstellt und in Ihre WordPress-Website eingebettet.
Wenn Sie Ihre Website von Brand Artery bauen lassen, übernehmen wir natürlich den ganzen Job für Sie: Das Favicon erstellen, konvertieren und auf Ihrer Website einbinden.
Interesse?
