Blog-Tricks: Blogger-Favicon durch eigenes Bild ersetzen

Vor kurzem habe ich euch ja schon versucht zu zeigen, wie ihr ganz einfach euren Blog mit tollen Schriftarten individualisieren könnt. Noch einzigartiger wird euer Blog natürlich, wenn ihr das orange-weiße Blogger-Symbol neben eurer Blogadresse durch ein eigenes Favicon-Bild eurer Wahl ersetzt . Und genau das möchte ich euch heute zeigen:

Falls ihr im Moment nicht genau wisst, was das besagte Favicon ist, was jede Webseite besitzt, dann lasst es euch doch z.B. einfach über Wikipedia erklären:

Findet ihr dieses Logo neben eurer Blogadresse nicht auch furchtbar öde? Zeit für ein neues!

Wichtig: Vor der Änderung des HTML-Codes empfehle ich euch dringend eure aktuelle HTML-Vorlage auf euren Computer herunterzuladen ("Design" -"HTML bearbeiten" - "Vollständige Vorlage herunterladen"), damit ihr sie - falls wider Erwarten etwas schiefgehen sollte - notfalls wieder reaktivieren könnt!

1. Erstellt euer Wunsch-Favicon-Bild mit einem Bildbearbeitungsprogramm eurer Wahl z.B. im Format JPG und der Größe 16 x 16 Pixel. Falls ihr transparente Bereiche im Bild haben möchtet, nehmt am besten das Format PNG. Euer Bild sollte so wenig Farben wie möglich und am besten einfache Formen haben, umso besser sieht es dann aus!

Bei mir ist es z.B. zur Zeit dieses, was ich passend zu meinem Hintergrund erstellt habe:

2. Falls ihr keines besitzt, ladet euch ein Bildbearbeitungsprogramm herunter, das das Format *.ico beherrscht. Dazu möchte ich euch das kleine und kostenlose Programm IrfanView empfehlen (das übrigens auch super dazu geeignet ist Bilder ohne Qualitätsverluste zu drehen!).

3. Mit diesem Programm öffnet ihr euer abgespeichertes Bild und speichert es im Format *.ico ab.

4. Ladet es auf einem Internetserver hoch, so dass es unter einer Webadresse im *.ico-Format verfügbar ist (z.B. im Public-Ordner eurer DropBox!).

5. Klickt in eurem Blog-Dashboard auf "Design" - "HTML bearbeiten" und folgt den Anweisungen auf diesem Screenshot:

(1) Aktiviert das Häkchen im Feld "Widget-Vorlagen komplett anzeigen".

(2) Sucht (mit Tastenkombination [STRG] + [F]) im Text nach folgendem Eintrag

und fügt unmittelbar darunter den folgenden Text ein (gelb markierten Text durch eure Favicon-Webadresse ersetzen):

Ladet euch dazu einfach die TXT-Datei herunter, aus der ihr den Code bequem herauskopieren könnt!

(3) Anschließend könnt ihr euch die Vorschau für euren Blog angucken, und bei Nichtgefallen entweder die Änderungen löschen oder wenn ihr damit zufrieden seid auf "Vorlage speichern" klicken.

Ich hoffe ihr habt soweit alles verstanden?

Viel Freude mit eurem neuen Blog-Favicon wünscht euch