blogspot Tricks - Eigenes favicon einbauen, auch bei blogspot.com möglich - favicon.ico

geschrieben von | Freitag, April 30, 2010 20 Kommentare
Blogs von blogspot.com bzw. blogger.com erkennt man u.a. am favicon in der Adressleiste. Das favicon ist ein kleines 16x16 Pixel großes Bild, bei blogspot im Normalfall ein weißes B auf orangefarbenen Hintergrund. Wie man an unserem Blog erkennen kann, kann man dies aber auch austauschen.

Was ihr dazu braucht? Ein kleines Bild das euren Blog optisch vertreten soll, am besten quadratisch, möglichst klein und mit nicht all zu vielen Details - und unsere Anleitung. Wir erklären euch hier, Schritt für Schritt, wie ihr eurem blogspot-Blog ein eigenes favicon verpassen könnt.

Als Erstes müsst ihr euch ein passendes Bild erstellen oder auswählen. Mit einem Grafikprogramm eurer Wahl stellt ihr ein Bild her, dass nach Möglichkeit quadratisch ist und nicht all zu viele Details beinhaltet. Ein kompletter Stadtplanaussschnitt wäre z.B. gänzlich ungeeignet, da ein favicon nur 16x16 Pixel groß ist.

Wenn ihr das passende Bild gefunden habt, müsst ihr es in ein favicon umwandeln. Dazu gibt es diverse Seiten im Internet, die euch das abnehmen. Exemplarisch machen wir das heute mit dem FaviconGenerator von Dynamic Drive. Den Onlineservice erreicht ihr unter diesem Link.

Mit einem Klick auf Durchsuchen wählt ihr euer Bild von der Festplatte aus und klickt dann auf Create Icon. Kurze Zeit später seht ihr bereits an einer eingeblendeten Adresszeile, wie euer favicon aussehen würde. Falls euch das nicht gefällt, ändert euer Bild und ladet es erneut in den Generator. Seid ihr mit dem Ergebnis zufrieden, dann ladet euch das favicon mit einem Klick auf Download Favicon auf eure Festplatte.

Nun müsst ihr euer neues favicon irgendwo im Internet ablegen. Entweder habt ihr einen eigenen Webspace oder ihr nutzt einen kostenlosen Bilderhoster. Aber nicht alle Bilderservices akzeptieren Grafiken vom Typ .ico, mit ein wenig Suche findet ihr aber einen. Wir nutzen, erneut exemplarisch für eine Vielzahl von Möglichkeiten, den Hostservice von PicPanda, den ihr hier findet.

Dort angekommen klickt ihr wieder auf Durchsuchen und wählt diesmal nicht euer Ursprungsbild, sondern die heruntergeladene Datei namens favicon.ico aus und klickt dann auf Upload. Auf der Ergebnisseite klickt ihr einmal auf View Full Image. Auf der nächsten Seite seht ihr dann einen Link hinter dem Wort Filename. Diesen Link klickt ihr mit der RECHTEN Maustaste an und wählt dann Link-Adresse kopieren (Im Internet Explorer heißt dies Verknüpfung kopieren).

In Eurer Zwischenablage befindet sich nun die Internetadresse eures favicon. Die solltet ihr nun kurzfristig irgendwo ablegen, z.B. im Editor, in Word, im Notepad oder wo auch immer ihr wollt.

Jetzt binden wir das favicon in unseren Blog ein. Dazu geht ins Dashboard eures Blogs und wechselt zu Layout und dort zu HTML bearbeiten. Im Headerbereich der HTML-Templates müssen nun 2 Zeilen eingefügt werden. Dazu sucht ihr bitte folgende Zeile (am Besten mit Strg-f)
]]></b:skin>
und fügt direkt darunter in einer NEUEN Zeile folgendes ein
<link href='http://www.eureadresse/favicon.ico' rel='shortcut icon'/>
<link href='http://www.eureadresse/favicon.ico' rel='icon'/>
und ersetzt http://www.eureadresse/favicon.ico mit der zuvor abgelegten Internetadresse eures favicon. Nun speichert ihr das Ganze noch mit Vorlage speichern ab und das war es dann auch schon wieder. Wenn ihr euch euren Blog anschaut, seht ihr jetzt euer neues favicon in der Adresszeile. Habt ihr den Blog als Favoriten gespeichert, erscheint dort auch das neue favicon.

Ein Wermutstropfen bleibt aber. Wenn euer Blog in der Blogroll eines anderen blogspot-Blogs eingetragen sein sollte, erscheint dort nach wie vor das alte favicon. Daran lässt sich leider nichts ändern.

Weitere Tipps und Tricks zu blogspot gibt es hier im aufregenden Blog oder bei Blogspot Tricks.

20 Kommentare:

Mircow hat gesagt…

Hi,
der Einbau klappt soweit ganz gut, aber es handelt sich dabei leider um keine Dauerlösung. Nach wenigen Tagen wird wieder das typische blogspot favicon angezeigt, auch bei euch. Zufällig noch weitere Tipps parat?

Aufreger hat gesagt…

Nein, diese Aussage stimmt so nicht. Die Änderung im Quelltext ist keine temporäre Änderung, sondern schon dauerhaft. Da aber beide Faviconaufrufe im Quelltext verbleiben (von blogspot gesetzte Teile lassen sich nicht löschen), kann es schon mal passieren, dass sich der Browser verschluckt, und dann auch im Cache (auf Deinem Rechner) das falsche icon hängenbliebt.
Prinzipiell ist die Lösung also definitiv für Dauer!

Massacre-50 hat gesagt…

Möchtest Du Geld mit dem Bloggen verdienen? Jetzt bei Trigami anmelden: http://www.trigami.com

Nahna hat gesagt…

Mensch, danke! das war eine super Erklärung. Auch Nullen wie ich können es damit einfach umsetzen! MERCI!

Anna-lee hat gesagt…

bei mir kommt immer:
"Ein Design darf folgendes Element nicht enthalten: link. Nur Text- und CDATA-Abschnitte werden akzeptiert." :/

Aufreger hat gesagt…

Dann hast Du dich nicht GENAU an die Anleitung gehalten!

Achtung, wenn Du den Text hier kopierst, wird automatisch ein Link zu unserem Blog angehangen (Kopierschutz für andere Bereiche), den natürlich ENTFERNEN, so dass nur das eingefügt wird, was auch oben in der Anleitung steht.

jenny.bueschel hat gesagt…

Super geil! Danke. Funzt. Meine Favicons mache ich auf favicon.cc. Da kann man selber basteln oder Bilder hochladen. ;-)

Cbht hat gesagt…

Klappt nicht, ich mache alles genau so wie vorgegeben. Schade.

greenlady85 hat gesagt…

wow, vielen Dank für die Beschreibung! Bin sehr glücklich mit meinem neuen favicon :-)

greenlady85 hat gesagt…

das Problem hatte ich zunächst auch! Lag bei mir daran, dass in meiner HTML-Vorlage 2x erschien und ich es erst hinter das falsche kopiert habe. Bei dem richtigen steht aber ]]> davor, wie es hier beschrieben wurde. Vielleicht hilft das ja?!

mitoal hat gesagt…

Herzlichen Dank, hervorragend!

FrlCosmos hat gesagt…

bei mir kommt da immer so ein weißes blatt & ich habs genauso gemacht...

Robert hat gesagt…

Vielen Dank der Artikel war sehr hilfreich.

Sue hat gesagt…

Moment, es gibt doch einen extra Button für das FAvicon. Unter Design da kann man sich doch einfach eines hochladen. Wenn man es denn umgewandelt hat oder wie jetzt? Man braucht doch gar nicht in der HTML rum fummeln oder doch???

Aufreger hat gesagt…

Als dieser Artikel geschrieben wurde, gab es diese Funktion noch nicht. Und in vielen Templates muss auch noch heute dieser hier beschriebene Weg gegangen werden!

S. hat gesagt…

Bitte, bitte helf mir :( Ich hab alles hingekriegt und so bis man es in den Blog einbinden musste. Ich verstehe es ab da nicht "Dazu sucht ihr bitte folgende Zeile (am Besten mit Strg-f)

]]>..." die zeile existiert nicht wenn ich sie suche. Bitte bitte helf mir und schreib mir schnell zurück... BitteeeeeeSchonmal vieeeeeelen Danke und LG

Aufreger hat gesagt…

Ich bin mir relativ sicher, dass die Zeile auch in deinem Quelltext existiert, aber:
Ich kann dir gerne sagen, wo in deiner Stadt der größte Brunnen steht, nur musst du mir dazu sagen, in welcher Stadt du wohnst!

S. hat gesagt…

 Was für ein Brunnen? Und bitte erklärs mir doch nochmal. Also ich habe es so gemacht: Ich bin auf Layout gegangen, dann auf Gadget hinzufüge dann habe ich HTML/Javascript ausgewählt und dann hab ich Strg. F gedrückt. dann hab ich in die Suche ]]> eingegeben und es ging nicht, deshalb hab ich es einfach in den Titel einkopiert. Dann hab ich


in das Feld wo Content drüber steht eingefügt und www.eureadresse/favicon.ico bei BEIDEN Links durch meinen Link ersetzt. Kannst du mir jetzt bitte sagen, was ich falsch gemacht habe?Vielen Dank schonmal, LG

Aufreger hat gesagt…

Gut, das mit dem Brunnen und der Stadt hast Du nicht verstanden. Sollte heißen, wenn ich einen Fehler in Deinem Blog suchen soll, muss Du mir schon verraten, welcher Blog Deiner ist.
Hat sich aber, glaub ich, erledigt.
Mach es bitte genau SO, wie es oben beschrieben ist. Da steht nirgendwo etwas von Gadget hinzufügen. Einfach DAS machen, was dort steht, und dann gehts auch.
Unsere Anleitungen sind so aufgebaut, dass sie, Schritt für Schritt, von jedem nachvollzogen werden können, auch ohne das man sich mit der Materie auskennt.

Mrsmilonga hat gesagt…

Herzlichen Dank für den echt einfach erklärten Post. Konnte endlich mein Favicon ändern - keine Ahnung mehr, wie ich damals das alte einbauen konnte. :-)

milonga81.blogspot.ch

Bitte benutzt die Funktion anonym nur in Ausnahmefällen - die Einstellung Name/URL kann auch ohne URL genutzt werden, ist persönlicher und dennoch anonym. Danke!