How To: Ein einzigartiges Favicon erstellen | Beauty for the Blog #1

Da wir in der ganzen Blogosphäre ja noch ziemlich neu sind (Bald drei Monate) hatten wir die Idee eine neue Serie zu starten. Mit der Zeit lernt man immer wieder ein bisschen mehr über Blogdesign, HTML etc. kennen und deshalb will ich euch auf die Reise unseres Blogs mitnehmen, sodass ihr immer auf dem neuesten Stand seid.
Das ist nicht nur praktisch für euch, sondern auch für uns, weil man einfach viel zu schnell vergisst, wo man jetzt z.B. einen Code verändert hat.
Nur leider ist mir die Idee zu dieser Serie erst jetzt gekommen, weswegen ich die "alten" Veränderungen nicht mehr posten werde. Außerdem sind sie jetzt auch nicht so schwierig, dass man das irgendwie erklären müsste.

Heute soll es um ein Thema gehen, was mir persönlich schon sehr wichtig bei einem Blog ist (wahrscheinlich geht es nur mir so): Favicons. Mich selber hat es viel Zeit gekostet etwas darüber herauszufinden, weshalb ich hoffe, euch mit diesem Post helfen zu können.
Dieses Wort ist die Kurzform für "Favourite Icons" und ist dafür da, um eurem Blog oder allgemein einer Website einen höheren Wiedererkennungswert zu geben. Wer das bis gerade nicht wusste: Auch ich habe das erst nach langem Suchen herausgefunden, weil ich einfach nicht wusste, wie man dieses kleine Symbol beschreiben soll, dass an dem Tab eines Browers angezeigt wird.

Diese kleinen Bildchen haben eine sehr kleine Auflösung von nur 16x16 Pixeln. Weil wir sie aber nur von einem größeren Abstand sehen und sie dazu noch sehr klein sind, fällt das unserem Auge gar nicht auf.
Für die Erstellung eines solchen Favicons empfehle ich euch eine Seite wie z.B. favicon.cc.
Die wesentlichen Schritte, wie ich es gemacht habe, sind hier für euch zusammengefasst...

 

ToDo-Liste für euer Favicon:

1) Überlegt euch ein Design! 

Und das ist wahrscheinlich schon der schwierigste und langwierigste Schritt. Bedenkt dabei, dass ihr nur 16x16 Pixel habt. Deshalb wird es auch meistens nichts mit schnörkeliger und filigraner Schrift, weil dafür schlichtweg kein Platz ist. Nele und ich haben uns für ein sehr schlichtes Design entschieden. Das passt zu unserem Blog, welcher ja auch in einem eher ruhigen Design gehalten ist. Der Hintergrund unserer Initialien entspricht der Farbe, die auch auf unserem Blog vorzufinden ist. Für die passende Farbwahl empfehle ich euch einfach mal zu gucken, was für Farben ihr auf eurem Blog verwendet, damit Favicon und Blog auch so aussehen, als ob sie zusammengehören.

2) Erstellt euer Favicon

Diesen Schritt könnt ihr auch super mit dem ersten zusammenpacken. So habe ich es auch gemacht. Die Idee zu unserem Design ist mir auch gekommen, als ich einfach nur wild herumprobiert habe. Dafür öffnet ihr euer "Tool", das ihr verwenden wollt, und "malt" euer Favicon so wie es euch gefällt.
Ihr könnt auch ein Bild auswählen und dieses in ein 16x16 Format umwandeln, erschreckt euch aber nicht, denn ihr werdet zumindest im Editor selber, nichts mehr vom Bild erkennen.

So sieht unser Favicon, im Editor geöffnet, aus

Wie euer Favicon später im Tab aussehen wird, wird euch in einem Vorschaumodus angezeigt. So sieht das jetzt noch etwas krüpplige "N" auf einmal normal aus:D
Das Design, wofür ihr euch entscheidet, muss jetzt nur noch abgespeichert werden!

3) In Blogger einfügen

Für alle Wordpress-Nutzer: Sorry...ich kenne mich leider nur mit dem Google-Programm Blogger aus. Bestimmt ist es aber auch bei euch nicht schwer.
Geht einfach auf "Layout". Dort sollte oben links ein kleines Kästchen mit der Beschriftung "Favicon" zu finden sein. Da müsst ihr nur draufklicken und euer Symbol hochladen.

Fertig!

Das war es dann auch schon mit meiner kleinen Anleitung. Ich hoffe ich konnte denen helfen, die die gleichen Probleme hatten wie ich!

Falls ihr Fragen habt, könnt ihr mir die einfach in die Kommentare schreiben und ich versuche euch zu helfen:)

Hannah