Favicon einfuegen


Für alle, die sich schon immer gefragt haben, wie dieses kleine, komische Bild heisst, das ihr in dem Bild oben sehen könnt: Das nennt sich Favorite Icon, oder ganz kurz Favicon. Diese Grafik taucht auf, wenn jemand eine Seite zu den Lesezeichen bzw. Bookmarks hinzufügt.

Da bei Blogger Blogs immer nur dieses hässliche "B" zu sehen ist, hattet ihr bestimmt schon öfters das Bedürfnis, dieses kleine Bild neben den Tab-Titel eures Blogs zu ändern.

1. Geht auf Blogger - Layout und bearbeitet den Favicon.

2. Ladet eure Grafik hoch.

Welche Grafiken kann ich benutzen?

  • Benutzt nur Grafiken, die euch gehören oder die ihr benutzen dürft.
  • Eure Grafik muss eine .ico- oder .png-Datei sein.
  • Eigentlich werden Favicons in der Größe 16x16px angezeigt. Bei Blogger reicht es aber völlig aus, wenn das Bild quadratisch ist. Achtet darauf, dass die Dateigröße weniger als 100KB sein muss.
  • Teilweise transparente Grafiken funktionieren auch (siehe das Favicon von CopyPasteLove).

Gründe, warum es nicht auf eurem Blog erscheint:

Euer Browser lädt noch euren alten Favicon, weil der sich normalerweise nicht andauernd ändert. Seid ihr ungeduldig, löscht den Cache eures Browsers. Wie? Das ist bei jedem Browser anders, also fragt Google.

89 89 Kommentare

  1. vielen lieben Dank..durch eure Hilfe habe ich es nun auch endlich hinbekommen!!
    Super..eure Tipps sind total nützlich..WEITER SO

    AntwortenLöschen
  2. Großes Danke! Ich wollte das hässliche Zeichen schon immer mal in eine Kamera ändern :D
    Ihr leistet eine suuper Arbeit! Weiter so!

    AntwortenLöschen
  3. Danke (hallo Nadja btw :D) ich wollte auch schon immer ne kamera da haben und war zu doof dazu - endlich wurde es mal verständlich erklärt.

    Ich habe jetzt die selbe Kamera genommen, wie im Beispiel, weils einfach die schönste war, hoffe das ist nicht schlimm ;)

    Jetzt haben wir alle coole Hipsterkamerafavicons!

    AntwortenLöschen
  4. Hiermit sollte es gehen: link rel="shortcut icon" href="LINK ZUM ICON " / (und noch in < >, wenn ich es mit angegeben hab konnte der Kommentar nicht abgeschickt werden)

    Einfach vor das /head setzen und die Grafikadresse bei LINK ZUM ICON eingeben.

    Liebe Grüße

    AntwortenLöschen
  5. bei mir gibts das mit dem link aus adresse usw nicht.. hab mac, vllt ist es deswegen?? ):

    AntwortenLöschen
  6. huhu :)
    leider klappt es bei mir nich :/ .. kann es damit zusammenhängen , dass ich schon (dank eurem tipp :)) zwischen /b:template-skin und /head einen code für einen "individuellen" post-titel stehen habe ?

    ich hoffe ihr könnt mir helfen :)

    danke !

    AntwortenLöschen
  7. @laura:
    Benutzt du Safari?
    Wenn ja, heisst der Punkt bei dir "Link kopieren".

    @Lune:
    Nein, daran sollte es nicht liegen. Hast du auch zur alten Vorlage gewechselt? Mit der neuen funktioniert es leider (noch) nicht.

    AntwortenLöschen
  8. bei mir ging es auch erst nicht, aber habs nochmal probiert und nochmal und dann gings irgendwie...

    AntwortenLöschen
  9. Ich habe die neue Vorlage und mit dem Link, den ich oben geschickt habe geht es ohne Probleme....

    AntwortenLöschen
  10. @Maddi:
    Korrigiere mich bitte wenn ich falsch liege, aber ist das nicht der Code, der auch genauso in unserem Tutorial steht?
    Mit dem habe ichs bei einem Blog mit neuer Vorlage probiert und es hat nicht geklappt.

    AntwortenLöschen
  11. Ich hab es jetzt mal verglichen, ihr habt am Ende noch type='image/x-icon' das ist bei mir nicht drin. Vielleicht liegt es daran?

    AntwortenLöschen
  12. Also ich ntuze die neue Vorlage und hab es trotzdem einfach mal ausprobiert und bei mir funktioniert es! Einmal zwiwschendurch tauchte das Blogger Zeichen auf aber ich habs jetzt schon ganz oft geladen und sehe immer nen Eiffelturm. Oder sehe das nur ich? Ist mal jemand so lieb und guckt ob er es auch sieht? :D

    AntwortenLöschen
  13. Juhu super :) Es klappt also auch mit dem neuen Design.

    AntwortenLöschen
  14. einwandfrei! jetzt brauch ich nur noch das perfekte icon :-D

    AntwortenLöschen
  15. Super, herzlichsten Dank! :D so kann auch eine Coding-Niete wie ich mal was Hübsches nachbasteln!

    AntwortenLöschen
  16. Ich danke euch vielmals für dieses super erläuterte Tutorial!

    AntwortenLöschen
  17. hat bei mir mit dem link von maddi super geklappt!! dankeschön :-D

    AntwortenLöschen
  18. ooooh danke für das tolle Tutorial ^-^ habs gleich hinbekommen

    AntwortenLöschen
  19. Super Tutorial! Euer Blog ist klasse :)

    AntwortenLöschen
  20. Jaaa, ich habs auch geschafft ;D

    AntwortenLöschen
  21. Bin ich froh, Eure Seite gefunden zu haben!!!

    Vielen lieben Dank!

    LG
    A.D.

    www.restaurant-am-ende-des-universums.de

    AntwortenLöschen
  22. Gaaanz großes Lob an euch!
    Ihr habt mir unheimlich weiter geholfen. Durch eure Seite sieht man erst einmal was für möglich keinen man hat damit der eigene Blog wirklich zu dem eignen wird.
    lG
    ThePechfee
    http://thepechfee.blogspot.com/

    AntwortenLöschen
  23. Hallo!

    Vielen lieben Dank für Eure tollen Anleitungen!

    Ich hab bei mir gleich mal rumgebastelt und freue mich schon auf weitere Tutorials!

    Ganz liebs Grüßle
    Tanja

    Tanjas Wo(llso)cken

    AntwortenLöschen
  24. toll!
    ich habe schon lange die Blogs bestaunt, auf denen ein schönes Bildchen statt dem blöden "B" zu sehen war.
    jetzt hab ich auch sowas tolles! danke!

    mutschekiepchen

    AntwortenLöschen
  25. vielen dank...
    ihr seit die besten...

    AntwortenLöschen
  26. Hallo,

    ich habe bei den neueren Vorlagen (vom Vorlagendesigner) auch ein Favicon einfügen können. Bin mir jetzt nicht sicher ob Du das meintest...^^
    Kannst ja mal eben vorbei schauen.
    http://weightless-summer.blogspot.com/

    Liebe Grüße

    AntwortenLöschen
  27. Hey,
    Ich weiß jez nicht ob das hier schon jemand geschrieben hat, aber man muss nicht den alten designer verwenden.
    Einfach an der stelle (also davor) 3mal entern und dann den Icon-link in die mitte setzen.
    Sorry, weiß nicht wie ich es besser erklären soll.

    Liebe grüße

    AntwortenLöschen
  28. OMG es hat geklappt :D obwohl ich in sowas eigentlich unbegabt bin :D super toll erklärt, danke danke danke

    <3

    http://julia-kopflos.blogspot.com/

    AntwortenLöschen
  29. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  30. Oh danke für diese Hilfe, werde ich in den nächsten Tagen mal ausprobieren.

    Bei meiner Homepage die ich beim Homepage-Baukasten mal hatte, hab ich sowas auch irgendwie hinbekommen. Da das aber schon über zwei Jahre her ist hab ich natürlich vergessen wie das geht.
    Da ich aber auch nicht wusste, wie das Favicon heißt, konnte ich ja auch nicht danach googlen. ^^

    Danke! <3 =)
    My Pink Fairytale

    AntwortenLöschen
  31. Alles hat super geklappt nur leider kann ich nicht auf Speichern oder "Vorschau" klicken O.o. Hab auch schon neugestartet und einen anderen Browser versucht doch nichts von dem hat geholfen. Habt ihr vlt. noch eine Idee?

    AntwortenLöschen
  32. @Sybille:
    Das kann mitunter ziemlich lange dauern.. Ich werde morgen noch eine kleine Ergänzung dazu machen, wie man seine temporären Browser-Daten löscht, daran hängt es wahrscheinlich, hatte ich auch, als ich das Tut geschrieben habe :D

    liebe Grüße,
    Inhji

    AntwortenLöschen
  33. Ich hab jetzt grade nochmal versucht meinen Blog breiter zu machen aber da hängts auch am gleichen Problem das ich es nicht speichern kann und auch nicht auf "Vorschau" klicken kann.

    Aber sonst ging des immer auch als ich den "Gefällt mir" Button reingemacht habe. Komisch...

    Hab auch schon versucht per Vorlagen Designer "1000" rein zu machen aber da sagt es mir es kann nicht auf diese Vorlage angewendet werden. :(

    Hm.. ach mannooo...

    Aber danke für deine Hilfe. Echt super Lieb von dir!

    AntwortenLöschen
  34. jetzt hat es doch noch geklappt. Komische Sache hab alles gemacht wie letztes mal und diesmal konnte ich es Speichern *Freu*

    Versuche jetzt auch gleich mal des mit dem Blog breiter machen, vlt. klappts ja auch *hoff*

    Dankeschön!

    AntwortenLöschen
  35. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  36. Echt toll erklärt!
    Leider will es bei mir einfach nicht funktionieren :(

    AntwortenLöschen
  37. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  38. Jetzt habe ich es doch noch geschafft!
    Ich hatte bloß die falsche Link-Adresse kopiert xP

    Danke für dieses tolle Tutorial♥

    AntwortenLöschen
  39. Ahhh... was bin ich doch langsam. Jetzt habe ich mir mit Mühe alles selbst im Internet zusammen gesucht und dabei habt ihr hier schon alles schön zusammengefasst. ^_^

    Wen es trotzdem interessiert habe ich hier einen Post über das Erstellen eines selbst gemacht Favicons. Mit ein paar kleinen Tools geht das super schnell und einfach. :D

    Liebe Grüße
    Christina

    AntwortenLöschen
  40. Ich habe ein Weilchen gebraucht und zuerst hat es nicht geklappt, aber dann habe ich euren Code (für die Kamera) eingesetzt und es klappte - also war ich ander richtigen Stelle nur der Code war falsch.
    Und dann habe ich mich an eurem Code orientierend auf die Suche gemacht und schwupps - man kann einen Apfel bewundern. Danke!

    AntwortenLöschen
  41. Ganz er lich ich verstehe das nicht -.-'

    Ich kriege das nicht hie !!!!!!!!

    so ein kaack .1

    AntwortenLöschen
  42. super, danke :D
    es geht auch mit den neuen vorlagen und.....
    die idee mit den 3 zwischenzeilen, hat bei mir so auch funktioniert.
    wichtig dabei ist auch in der icon-vorschau bis auf das .png-bild zu gehen und dann erst den grafik-link zu kopieren, damit die endung des links.......png ist.

    lg. flo

    AntwortenLöschen
  43. nicht löschen! ich bin für einen Edit unter dem alten text :)

    danke für die vielen tollen tipps!

    AntwortenLöschen
  44. Blogger hasst mich :((( Das klappt seinfach nicht! laut blogger ist das größer als 10 KB aber das ist nur 1,xx groß ._.''

    Aber trotzdem toller post!

    AntwortenLöschen
  45. ein Post für euch:
    http://eitle-seifenblase.blogspot.com/2011/06/copy-paste-love.html

    AntwortenLöschen
  46. bei mir will es einfach nicht klappen!!! habe schon euren text kopiert, dann hab ich es mit dem für die neue vorlage von maddi geschickten text probiert...nix geht! wieso? :(

    AntwortenLöschen
  47. irgendwie funktioniert das nicht wirlicht.. zeigt zwar an, dass das bild hochgeladen wurde, wenn ich dann auf meine seite gehe sieht man es aber nicht :/

    AntwortenLöschen
  48. Yay, es hat endlich funktioniert. Vielen Dank, eure Tutorials sind immer so toll, ich konnte schon so viele tolle Sachen an meinem Blog machen. Weiter so!

    AntwortenLöschen
  49. bei mir geht das leider nicht, obwohl man das im seitenelement sieht. was habe ich falsch gemacht? hmm

    AntwortenLöschen
  50. Bei mir genauso, im Seitenelement sieht man dass das Icon hochgeladen wurde aber auf meinem Blog ist immernoch das "B"..

    AntwortenLöschen
  51. sorry, da hab ich wohl zu schnell gemeckert. Hat nur n Weilchen gedauert, da kam das Icon, vielen Dank also :D

    AntwortenLöschen
  52. Bei mir funktioniert das auch nicht, obwohl es angezeigt wird im Design.

    AntwortenLöschen
  53. Heeey ihr (:
    Suuper anleitungen.Riesen Lob.
    Mal eine Frage,dauert es manchmal noch ein weniq bis das Zeichen kommt.Im Design wird es angezeigt,aber nicht auf dem Bloq o:

    AntwortenLöschen
  54. super, gefällt mir.
    ich mag das B auch nicht auf meinem blog.
    habs geändert, dank dieser anleitung ganz leicht, danke dafür.
    nun wollt ichs aber wissen......
    auf meinem anderen blog hab ich mir ein ....animiertes.....favicon....
    eingefügt, find ich noch besser, mit einem selbsterstellten favicon, das passend zu meinem blog ist.
    dafür hab ich eine seite gefunden mit einer guten anleitung.
    hat auf anhieb geklappt.
    ich leg mal den link dahin hier anbei.....
    http://www.webmaster-elite.de/online-tools/favicon-generator.html

    vielleicht hat noch jemand interesse daran.
    ich bin bloganfänger und selbst ich hab das hinbekommen ;-)
    schaut hier............
    http://flo-schaunmermal.blogspot.com/

    lg. flo

    AntwortenLöschen
  55. Hey bei mir sieht die http://www.iconarchive.com/ Site koplett anders aus ? Ich vertsehe das Toturial jetzt garnicht. Könnt ihr mir das bitte erklären ?

    AntwortenLöschen
  56. hallo :)
    ich habe bei meinem blog ein anderes favicon reingemacht, aber ich möchte jetzt wieder das normale B haben. ich habe auch versucht das zu löschen, aber das hat nicht mehr funktioniert. weil bei mir ist beim design gar nicht angegeben, dass da was anderes drin ist und deswegen kann ich es auch nicht löschen. oh gott, ich weiß das das total kompliziert ist, aber ich kriege das normale B einfach nicht mehr hin. ich hoffe ihr könnt mir irgendwie helfen? liebe grüße :)

    AntwortenLöschen
  57. super

    http://erdnussbutter-toast.blogspot.com/

    AntwortenLöschen
  58. Hmm, ich habs jetzt mit zwei verschiedenen icons ausprobiert aber beide male war da immer noch das standard icon von blogger..

    AntwortenLöschen
  59. Hallo ich brauche dringend deine Hilfe !!!
    Ich hab als favicon diesen schlüssel gehabt. dann ein buch. Jetzt habe ich mein design geändert und jetzt ist da wieder der schlüssel. Ich hasse dieses hässliche teil !!!
    Hab mir schon 2 mal mein design zerstört. bevor ich jetzt wieder was falsch machen frage ich lieber dich !

    Ich hoffe, du kannst mir weiterhelfen ;)
    Schon mal ein ganz dickes dankeschön. dein Blog ist super ! :))

    AntwortenLöschen
  60. http://meinetraumwelt2011.blogspot.com/

    vergessen, sorry :D

    AntwortenLöschen
  61. Ich hab einen Favicon hochgeladen und wenn ich das Layout bearbeiten will, dann zeigt er mir den auch an. Auf meinem Blog allerdings nicht! Habt ihr eine Idee woran das liegen könnte?

    http://rubia-baja.blogspot.com/

    AntwortenLöschen
    Antworten
    1. Das selbe Problem habe ich auch!!?

      Löschen
    2. Ist mir auch so gegangen... Probiers mal mit der anderen Variante aus!

      Löschen
  62. http://p.yusukekamiyamane.com/

    AntwortenLöschen
  63. das ist voll der schrott.. elf mal hab ichs jetzt versucht!

    AntwortenLöschen
    Antworten
    1. Lösch dein Cache. Das liegt an deinem Browser. Und nicht an uns.

      Löschen
  64. Da ist immer noch das Standardzeichen!

    AntwortenLöschen
    Antworten
    1. 1. Blogger braucht immer eine Weile, bis es übernommen wird.
      2. Lösch deinen Cache.

      Und wenn ihr ungeduldig seid, dann nehmt die erste Variante. Aber dann müsst ihr das Cache auch löschen.

      Löschen
  65. Super Tutorial!
    Ich hab erst mal die zweite Variante ausprobiert, hat aber nicht geklappt...
    Mit der ersten, etwas schwereren Version klappts auf jeden Fall!
    -> Daaaanke

    http://www.sallyetlamonde.blogspot.com

    AntwortenLöschen
  66. Hey, habs grad probiert.
    Und ich verwende die neue Vorlage. Über dem "" steht zwar was anderes, ich hab es aber einfach eingefügt und es hat super geklappt.
    http://glueckskindsucht.blogspot.de/
    (hab jetzt eine kleine Kamera)

    Tolle Tips!!!

    AntwortenLöschen
  67. Vielen Dank. Habe mit Eurer Hilfe endlich ein Favicon auf meiner Website einbinden können. Die Anleitung war gut verständlich, auch für mich als Anfänger. Viele Grüße

    AntwortenLöschen
  68. oh vielen dank
    endlich hab ich dieses hässliche standart icon raus
    tolles tut was geschrieben wurde und leicht zu verstehen
    lg, Yvi

    AntwortenLöschen
  69. Super Tutorial :)

    Leider bin ich glaub ich zu blöd dazu :-O Ich habs versucht aber wenn ich zu dem html-Dings-Editor gehe und dann dieses head suche, sieht das irgendwie anders auch als da... Ich hab es trotzdem eingefügt und auf Vorschau geklickt und dann ist die seite plötzlich leer :-O
    Ich hab mir gedacht, dass es vielleicht an der Vorschau liegt, habs wider gelöscht und nochmal drauf geklickt und dann hat die Vorschau wieder funktioniert... Also irgendwas hab ich falsch gemacht - kannst du mir vielleicht helfen? :)

    Liebe Grüße Diana

    AntwortenLöschen
    Antworten
    1. Okay ich war einfach zu blöd weiterzulesen :D
      Jetzt hab ichs, daaaaaaaaaaaaaaaaaaaaaaanke :)

      Löschen
  70. Vielen, vieln Dank für diesen Beitrag! Ich habe den ganzen Tag schon nach einer verständlichen Anleitung gesucht und sie hier endlich gefunden :-)

    AntwortenLöschen
  71. Hallo :)
    bei mir funktioniert das leider mit dem Favicon nicht ...



    AntwortenLöschen
  72. Super gut erklärt :) Hab alles super verstanden und auch gleich umgesetzt :) hab für meinen Blog ein Cupcake genommen *.*

    AntwortenLöschen
  73. Danke für das Tutorial, hat super geklappt. Auch wenn die Bilder zu den Tutorial nicht angezeigt wurden.

    Liebe Grüße Kim ❤
    http://thelovelybridges.blogspot.de/

    AntwortenLöschen
  74. Die Bilder sind leider down, könntest ihr die vielleicht ändern?

    AntwortenLöschen
  75. Hallo ihr lieben :) Ich habe heute auch mein Favicon geändert :) Wenn ihr möchtet könnt ihr gerne mal bei mir reinschauen. Habe schon ein paar Tips von hier umgesetzt
    http://thefantasticworldofmine.blogspot.de/

    AntwortenLöschen
  76. Toller Tipp, danke :)
    Liebe Grüße, Denise

    AntwortenLöschen
  77. Danke für die sehr hilfsreichen Tipps kann man nur weiterempfehlen :) lg

    AntwortenLöschen
  78. Hey, danke für die Tipps. Habe es gleich geändert.
    Liebe Grüße von http://moremakeupandfashion.blogspot.de/

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.