Favicons, ein “must have” für jeden Blog und jede Website

Warum jeder Blog ein Favicon haben sollte und wie Du für dein Blog ein Favicon erstellst [Update]

Wer kennt sie nicht, die kleinen Bildchen, die in der Browserleiste vor der URL oder in den Tabs platziert werden, die Favicons. Diese Bilder sind zwar winzig klein und manch ein Blogger mag sie deshalb vielleicht als nebensächlich erachten, aber Favicons haben einige Vorteile für deinen Blog.

Du bist also gut damit beraten, dir ein eigenes Favicon für deinen Blog oder deine Website zuzulegen, wenn Du noch keines haben solltest. Wie Du das genau anstellst und was Du dabei beachten solltest, erkläre ich dir in diesem Blogartikel.

Was ist ein Favicon denn genau?

Die Bezeichnung Favicon ist zusammengesetzt aus den Begriffen Favoriten und Icon, was auf Deutsch so viel wie Favoriten-Symbol bedeutet.

Wie bereits gesagt, ist ein Favicon in erster Linie einfach ein Bild. In der Regel haben diese Bilder eine Größe von 16 x 16 Pixel. Favicons dürfen aber auch größer sein, die Auflösung ist nicht beschränkt. Allerdings zeigen Browser nur 16 x 16 Pixel als Favicon im Tab oder der Adressleiste an.

Im unteren Screenshot siehst Du das Blogsheet-Favicon in verschiedenen Browsern.

Im Screenshot siehst Du das Blogsheet-Favicon in verschiedenen Browsern.

Es ist dir im Zusammenhang mit der Bildgröße vielleicht schon Folgendes aufgefallen: Wenn Du irgendein Bild in beliebiger Größe im Browser öffnest, wird dieses Bild in manchen Browsern auch als Favicon im Tab oder in der Adressleiste angezeigt. Der Browser hat in dem Fall also einfach das Bild auf Favicon-Maße reduziert und zeigt es wie ein Favicon an.

Der untere Screenshot zeigt wie der Firefox das Bild einer Sonnenblume auch im Tab anzeigt.

Der Screenshot zeigt wie der Firefox das Bild einer Sonnenblume auch im Tab anzeigt.

Das bedeutet, dass manche Browser auch die Formate JPEG, GIF, PNG und weitere Grafikdateien für ein Favicon akzeptieren. Allerdings solltest Du für dein Favicon immer das ICO-Format verwenden um die Browserkompatibilität zu gewährleisten. Der IE zum Beispiel denkt nicht daran ein einfaches Bild als Favicon anzuzeigen, wie der Screenshot beweist.

bild-favicon-ie

Die Vorteile eines Favicons für deinen Blog

Ein Favicon für die eigene Website macht schon erheblich mehr her, als das langweilige Standardsymbol, dass der Browser anzeigt, wenn kein Favicon zur Verfügung steht. Zu einem modernen Blog oder Website gehört einfach ein Favicon dazu.

Außerdem sind Favicons mittlerweile weit verbreitet und wir haben uns inzwischen so an Favicons gewöhnt, dass es den meisten Usern sicherlich auffällt, wenn keines da ist. Mir geht es jedenfalls so, dass ich ein fehlendes Favicon schnell bemerke. So klein es auch ist, ein Favicon kann den Wiedererkennungswert deines Blogs erheblich unterstützen.

Ein weiterer Vorteil eines Favicons ist, dass Google und andere Suchmaschinen das Vorhandensein dieser kleinen Grafik positiv bewerten. Sicherlich macht ein Favicon nur einen geringen Prozentsatz der gesamten Suchmaschinenoptimierung aus, aber auch viele Kleinigkeiten zusammen haben letztendlich ihr Gewicht.

Ein Beispiel von Favicons in der Liste von LesezeichenFavicons sind außerdem sehr praktisch für die Lesezeichen-Liste deiner Besucher. Unter den zahlreichen gesammelten Lesezeichen lässt sich ein Lesezeichen mit Favicon schneller finden, denn das Bildchen springt mehr ins Auge als ein Text, der erst gelesen werden will.

Links siehst Du einige Favicons aus der Liste meiner Lesezeichen als Beispiel dafür, wie verschiedene Favicons mehr Übersicht in die Lesezeichen bringen können. Was also im Zusammenhang mit deinem Blog praktisch ist für deine Leser ist, solltest Du als Blogger auch umsetzen.

Das solltest Du beim Design eines Favicons beachten

Auf den ersten Blick erscheint es einfach ein Favicon zu entwerfen. Aufgrund der geringen Auflösung ist dies aber schwieriger als Du denken magst. Wichtig ist, dass das Favicon so simpel wie möglich gehalten wird, damit der winzige Inhalt für deine Besucher noch erkennbar ist.

Viele nutzen daher sehr schlichte Symbole oder Buchstaben, die als Abkürzung für den Blog oder des Firmen- bzw. Websitenamens dienen. Es ist also nicht immer sinnvoll, bzw. führt nicht zu dem gewünschten Ergebnis, wenn Du eine große Grafik einfach auf die 16 x 16 Pixel verkleinerst.

Dein Favicon sollte deutlich gezeichnet und möglichst klar erkennbar sein um die nötige Aussagekraft zu besitzen und den Wiedererkennungswert für deinen Blog zu maximieren.

So erstellst Du dein Favicon

Um ein Favicon zu erstellen, kannst Du ein beliebiges Grafikprogramm wie zum Beispiel Photoshop, PaintShop Pro oder die freie Grafiksoftware Gimp verwenden.

Screenshot der Startseite von gimp

Erzeuge mit dem Grafikprogramm deiner Wahl einfach eine 16 x 16 Pixel große Grafik und speichere diese anschließend als ICO-Datei ab.

Sollte das von dir gewählte Grafikprogramm den Export als ICO-Datei nicht unterstützen, dann speichere das Bildchen zuerst als PNG oder GIF ab. Anschließend kannst Du das Bild ganz einfach mit freien Programmen wie IrfanView in das ICO-Format umwandeln.

Unten siehst Du das Blogsheet-Favicon als PNG in IrfanView geöffnet.

favicon-in-irfanview

Um ein Bild in eine ICO-Datei umzuwandeln, gehe in IrfanView oben links auf den Button „File“ und wähle anschließend aus dem Menü „Save as…“. Im nächsten Schritt kannst Du aus den Speicheroptionen „ICO – Windows Icon“ auswählen und dein Favicon als ICO abspeichern.

Dein Favicon kannst Du mit IrfanView als ICO abspeichern

Anregungen für die Gestaltung deines Favicons kannst Du dir übrigens sehr gut bei vielen Online-Favicon-Generatoren holen, die nämlich oft auch eine Favicon-Galerie beherbergen. Zum Beispiel die Galerie von favicon-generator.de.

Screenshot der Favicon-Galerie auf favicon-generator.de

Die Favicon-Erstellung online mit Generatoren

Einfacher als mit einem ausgewachsenen Grafikprogramm ein Favicon zu erstellen, geht es meist mit einem der zahlreichen kostenlosen Favicon-Online-Generatoren. In solchen Generatoren lässt sich direkt das Favicon auf die passend vorgegebene Leinwand von 16 x 16 Feldern malen und nach Fertigstellung kannst Du dein Favicon als ICO-Datei herunterladen und abspeichern.

Oft lassen sich auch Bilder in gängigen Formaten wie GIF, JPEG und PNG hochladen und in die passende Größe als ICO konvertieren. Weiterhin beinhalten die Online-Generatoren häufig eine Galerie der erstellten Favicons, in der Du auch deine eigene Kreation ausstellen kannst.

Zwei recht Gute aus der Masse der Generatoren findest Du auf favicon-generator.org und auf favicon.cc. Der Screenshot zeigt den Favicon-Editor von favicon-generator.org in dem ich mich mit einem Smilie versucht habe 🙂

favicon-editor

Beide Online-Generatoren besitzen eine große Farbpalette und eine Vorschau des Favicons. Diese Favicon-Generatoren sind zwar englischsprachig, aber sehr einfach zu bedienen. favicon.cc hat noch ein zusätzliches Feature, hier kannst Du auch animierte Favicons erstellen.

Wenn Du dennoch einen Generator auf Deutsch bevorzugst, findest Du auf favicon-generator.de einen solchen, leider ist hier nur die Farbpalette sehr eingeschränkt.

So bindest Du dein Favicon auf deinem Blog ein

Um ein Favicon korrekt auf deinem Blog oder deiner Website einzubinden, verwende im head-Bereich der HTML-Datei, wie vom W3C empfohlen, den link-Tag. Der link-Tag wird von den meisten Browsern erkannt.

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

Wichtig ist, dass dein Favicon die Bezeichnung favicon.ico erhalten hat und im Root-Verzeichnis deines Blogs oder Website auf dem Server abgelegt ist.

Neue Browser können bereits das Favicon ohne zusätzlichen Code automatisch erkennen und anzeigen, wenn es im Root-Verzeichnis liegt. Aber Du solltest bei dem oben beschriebenen Verfahren bleiben, da dies eben nicht bei allen Browsern funktioniert.

Du kannst abschließend mit Online-Favicon-Validatoren wie zum Beispiel auf html-kit.com überprüfen, ob dein Favicon korrekt eingebunden ist.

Fazit zu Favicons als „must have“ für jeden Blog und jede Website

Wie wir gesehen haben, bringt ein Favicon gewisse Vorteile für deinen Blog mit sich. Und da es relativ einfach und schnell zu erstellen ist, gerade mit den kostenlosen Online-Generatoren, gibt es keinen guten Grund auf ein Favicon zu verzichten. Also nur ran an die Favicons und viel Spaß beim Gestalten 🙂

About The Author

Diana Ludwig

Webdesignerin, Pinselschwingerin, Bloggerin und Studentin der Medieninformatik. Mein Steckenpferd ist das freie Open Source 3D Programm Blender, über das ich auf Blender-Tutorial schreibe. Du findest mich auch auf Google+ oder abonniere unseren RSS-Feed.

2 Comments

  • Meli Devolo

    22. April 2014

    Hallo Diana,

    danke für den ausführlichen Artikel. Meine Meinung nach sollte jede professionell gemachte Homepage Favicons haben.Ich finde es sehr schön, wenn die Seite in den eigenen Favoriten gespeichert wird und das Favicon dort als Symbol erscheint. Heute wird so ein Favicon in null Komma nichts erstellt, also es gibt keine Entschuldigungen mehr.

    LG Meli

    P.S. @Diana Mir ist gerade aufgefallen, dass blogsheet.info kein Favicon hat. Warum eigentlich?

  • Diana Ludwig

    22. April 2014

    Hallo Meli,

    erst einmal vielen Dank für deinen Kommentar.

    Nun zu deiner Frage: Blogsheet hat ein Favicon, gleich auf dem ersten Bild im Blogartikel siehst Du das Blogsheet-Favicon in 3 verschiedenen Browsern (Firefox, Chrome und IE).

    Da musst Du dich also verguckt haben 😉

    Viele Grüße
    Diana