Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Adding favicon to blogspot

Adding favicon to blogspot

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

37,538 views

How To add fav icon to your blogger
– Codes Fixed and 100% works
– 18,000+ Animated Favicons Source Added
favicon is very important now it’s a nice way to put your logo, or what ever you want. on the browser address bar.

if you don’t know what is the favicon.ico just look at the address bar at your browser now.
and you’ll see our logo added to it on the left. you can check the above image to know what are we talking about.

 

to do this you need to follow the next simple 4 steps. it’s too easy. so lets go.

 


– Before We Start:
– You need to be careful while changing your template.
– Before you make any changes, Back up your template and save it at safe place.

 

step 1: creat of choose your own icon.
step 2: Make your favicon.
step 3: Upload it.
step 4: Add a code to your blogger xml layout.
step 5: Enjoy.

 

Step 1: choose your own icon.

first of all. you need to have an icon to display it as your blog favicon.
if you already have a logo. you ‘ll use it.
or you’ll need to find nice logo and suitable to your blog.
it may be a letter. or simple expressive picture. you can browse deviantart.com icons category to get inspired.
and here is sample icons may help you to Crate yours.

Add favicon to blogger

once you are done and picked you icon. you’ll need to move to the next step.

  • 18,000+ Animated Favicons Source Added

That’s great and new source for free and animated icons, you won’t need to design your own icon and loos any time any more, thanks for iconj.com Go there and browse.

Step 2: (OR ) Make your own favicon.

now you have to make your icon 16×16 pixels. I usually use photoshop to do it and save it as any image format. like [ jpg, gif, png, …..].
call it favicon.jpg , favicon.gif or favicon.png. just choose one format, not all of 3 types.
and we’ll use program called “imagicon” you can search Google to download.its free and only 950 KB.
setup the program and find the icon image that you made it and saved it by photoshop, favicon.xxx
load the image and choose 16×16 win32 icon. save it as .ico.
so it’ll be favicon.ico.
Recommended : it’s recommended to name your icon file – favicon.ico –

Step 3: Upload it.

Use you favorite image upload or file service to upload you favicon.ico file.
and keep the url at save place cause we going to use it in step 4.
the url should be something like.
http://www.fileiconhost.com/i3jh/youricon.ico

 

Step 4: Add a code to your blogger xml layout.

log in to your blogger account. Now find the blog you want to edit if you own more than one blog. And click “layout” table. then choose “Edit html”

 

Add favicon to blogger

Search for :

 

<data :blog.pageTitle/>

 

and just after it. past the next code

 



 

and instate of ‘URL of your uploaded icon file’ add the url that you uploaded your ico file to.

the code should be something like the next

 



Click save template button.

Step 5: Enjoy

Now go to check your new blogspot browser address bar.
if you can’t see it please wait for awhile. some times it takes 2 days to appear. but not always.
if you have any problems please leave acomment.

Liked It ? Please Share

Comments

87 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. gunkyut says:

    thanks for the info..now i have favicon in my blog..^^ :s.9.s:

  2. shannon says:

    I cant seem to find either codes in my template :s.7.s:

    – s!

  3. anurag says:

    see my moving animated favicon at http://www.nokiafever.blogspot.com

  4. Max says:

    hi anurag
    your animated icon looks awesome
    thanks for your comment, and you are welcome here always to read the latest tricks.

  5. Joe says:

    I followed your instructions, but I got errors. I changed the ‘ to ” as the error told me. then I added /> after link and the template saved without error. But no favicon. I’ve tried many times, can you help?

  6. Max says:

    hi Joe
    please wait some time before making any changes, it takes some time to appear .
    thanks, and please if you have any problem, please tell us.

  7. Dushanthan says:

    Please help me i took an template from you and first time it didn’t work after that it worked, Now i tried to put a favicon a error massage

    “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The entity name must immediately follow the ‘&’ in the entity reference.”

    Please help me !!! :s.6.s:

  8. Max says:

    hi Dushanthan
    this is one of the easiest tricks ever.
    the code is very short , and even not complicated.
    so please install your template again, and just follow the instructions very careful.
    and tell us your news.

  9. Edward/Azul says:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.

    how do i remedy this?

  10. Tiznau says:

    I get the same error message as Edward/Azul. What Can I do to make it work?

  11. Max says:

    hi Edward/Azul
    hi Tiznau
    we will fix this soon. please visit us later.
    thanks for waiting.

  12. asam says:

    i had a problem with this…
    is there any mistake that i do????

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.

  13. Max says:

    hi asam
    thanks for your comment, we’ll re POST this tutorial again soon.

  14. John says:

    YES! You can really use a png or whatever else image as a ‘favicon’.Just insert:

    above the

    (where # is the URL to your image)

  15. Christy says:

    I finally got the code, easy peasy, when I used http://www.iconj.com as my host for my tiny jpeg file. This website will convert for you and you don’t have to download that program. My image hoster wouldn’t allow the .ico file type.
    This website gave me the full code to paste in right where you told us to.

  16. xerexz says:

    can you list the website that can upload image .ico..??

    because i use photobucket and imageshark,there`s some problem that can`t upload image .ico

  17. John says:

    forget ico – upload png or jpg – they also work as a favicon.

  18. QiuYu says:

    Hey. I know how to fix it. So just wanted to tell you guys that the codes:

    change to:

    (means this ‘ to this “)

    :DD

  19. penyu says:

    i got d same problem with Edward/Azul, Tiznau n asam.

  20. puneet says:

    Nice post.

    dude correct the spelling of enjoy and paste. you know it gives bad impression.

    Check out my blog
    technofreak-cooldude.blogspot.com

  21. Max says:

    hi puneet
    thanks dude for your comment and we corrected every thing.
    your comments are always welcome here

  22. abhishek says:

    hey it is not working

  23. Max says:

    abhishek, we’ll add new tutorials soon to fix all bugs.

  24. thanks !! very helpful post!

  25. Liam says:

    Hi Shannon.
    If you can’t find any of the codes
    above. Just click CTRL+F then,
    paste the code you’re looking for
    in the space given. Click “Find Next” then the code you’re looking
    for will be highlighted
    Liam.

  26. Max says:

    hi Liam
    thanks for your help.

  27. izan says:

    I got the same problem as Edward, Zul, Asam, Tiznau & Penyu. Have u fix it Max?

  28. Max says:

    hi izan
    I’ll add new fix it soon izan

  29. vasudevan says:

    I have a problem when I had tried to embed a webpage in my blog in blogger. when I added the code to it and save template the error shown that “open quote is expected for attribute “{1}” associated with an element type “data””. HOw to over come this problem? please help me!!!

  30. Ehtesham says:

    It didnt worked for me :( plz help me :'(
    ~Ehtesham~

  31. Zac says:

    ok. The error happen is because you didn’t put / at the end on the code.

    for example:

    Above code will have error.

    see i add / after image/gif’

    This work

  32. Zac says:

    Sweat.. this website delete the website url. It is ok. I try to write in different way.

    images/favicon.ico’ rel=’shortcut icon’>

    Above code will have error.

    images/favicon.ico’ rel=’shortcut icon’/>

    above code is corrected, no more error.

  33. Zac says:

    I read the previous comment here, he said he can have animated favicon on his website and his website is http://nokiafever.blogspot.com/. But I cannot see the animated favicon there, firstly I guess it is my mozila version issue, but since my mozila can show the animated favicon on http://www.2aek.com, so I know it is bot mozila issue, is that blogspot not allow to display gif image? Anyway to solve it? Thanks.

  34. Zac says:

    http://nokiafever.blogspot.com/

    anyone can tell me that how can he make so many links (each link can go to his other post) and how to make his top menu? is it the top menu is made by Adobe Flash?

    when I hover the link, it shows “search post by date=8/june/2009 time=03pm”, meaning he just post a new topic, then href the link to the new topic with searching date and time of the post. Anyone can tell me how to make the blogspot page display only 1 post? Because my blogspot display all the posts together on 1 page. How to make the page display only 1 post?

  35. Max says:

    hi, all, hi ZAc
    thanks all for your comments, and special thanking to zac, btw zac, i was sooo busy view weeks ago, and i usually don’t remove any links, ( but i remove spam ) and i didn’t remove the links that you provided as example, it’s the site spam comments fitter,
    i just saw your comments today and i added it here with the links,

    and about the menu, and the hacks that you mentioned. It’s all easy and we’ll add it all and more in our blogger tricks section soon, i’m sorry for any misunderstanding,

    And finally, about this hack, favicon, I’ll fix it all today at late night, and i’ll try to add how to make animated favicon too.
    thanks for all.

  36. kyoko says:

    شكرآ يآ مبدع ..
    طبقت الدرس على مدونتي ..

  37. Max says:

    hi kyoko, i translated your comment, thanks for your nice words.

  38. beben says:

    huheheheheheh…good good…but i have do it before…thank’s for ur share by email

  39. Zac says:

    I guess blogspot doesn’t block the gif file. It just need about 2 hours to display my animated favicon. Wow, my blogspot has animated favicon now. Cool.

    I know how to make horizontal top menu already, and each menu link to different blog that i created. so I have to create 5 different blogs – 1)2aek_homepage.blogspot.com 2)2aek_product.blogspot.com 3)2aek_contact_us.blogspot.com 4)….

    I saw the nokiafever blogspot, he don’t need to create so many blogs, he just create 1 blog and upload many posts onto the blog. All his post can be separated by page, 1 page 1 post. and his top menu can link to each post. How he do that?

    My blog shows all the posts in 1 page. How to separate the posts into different page?

    • Max says:

      hi zac
      you can control the posts number that appear in each page at your blogger account dashboard.
      or you can do it in another way that’s a little bit complicated. you give each post a unique label and then link to this label at your navigation bar, i’ll absolutely add a tutorial about it soon.
      i hope that can help you.

  40. Zac says:

    Hei, Max. I use the control number of post method that you teach me. Wow, I did it. It works. Cool man. Thank you so much.

  41. nice post. I applied your tip and you can see it here. Windows Technology Blog

  42. Jonatan Karlsson says:

    I LOVE THE NEW TEMPLATE “ALL BLOGG TOOLS.COM” WEB PAGE HAVE!!! 😀

    • Max says:

      hi Jonatan Karlsson,
      thanks very much for your awesome words, this is the best words i heard today.
      i really appreciate your opinion.

  43. Ehtesham says:

    It still didn’t worked for me :-( please help me! I did everyone thing right as you told! check http://pandandacheatsinfo.blogspot.com and see only bloggers icon is there, mine isn’t appearing :-(
    ~Ehtesham~

  44. louise says:

    Hi very nice trick. worked for me, but the icon only appears on the homepage?when i click on the posts.the default blogger icon shows up again. anybody here help me pls thanks

    • Max says:

      hi louise.
      this is very wired, it’s usually a template problem. or just wait for some time.

  45. i had the same error..
    then i just change ‘ to ” in the same code.. like QiuYu said before..

    i waited only two minuts, and my new icon appair… 😀

    thanks every one

  46. hac-k-rishna says:

    thanks man……u r rocking…….i hav bcome ur fan dude..check out y…..http://hack-krishna.blogspot.com

  47. ziia says:

    hy , nice post .
    but i got a problem .
    i can’t find the website where i can upload the icon .
    so , can u tell me ??

  48. NAD says:

    Thanks 😀

  49. stelaras95 says:

    thx a lot. very goooood!!!

  50. Laeeq says:

    After I put the two lines as you said, I lost the template of my blog… :-(( *

  51. sulltan says:

    Nice trick . working fine . 😉

  52. Max says:

    @ ziia, NAD, stelaras95, sulltan, thanks dear visitors for your kind comments,

    @ Laeeq, you must did some thing wrong. and as i said at the beginning, backup your template before making any changes.

  53. zara says:

    hye..thanks,nice triks but i try.hm,can i know where to upload the image of my favicon?its at new posting on blogger?

    • Max says:

      @ zara, it’s very easy , just google about it. and you’ll find hundreds of free sites

  54. Ehtesham says:

    This doesn’t work in IE.

  55. mrjack says:

    Awesome dude !

  56. Jared says:

    I CANT FIND THE HTML CODE

  57. Max says:

    @ mrjack, thanks dude,
    @ Jared, you must be using a custom template, please try to find similar code.

  58. I’ve been looking for this guide over the internet. Thank you for this very informative guide. I just can’t wait for your next updates.

  59. Jill says:

    thanks so much for the tips..anyway I used photobucket to get the url of my favicon. i follow everything on the instruction but the favicon just won’t show up.. please help (:

  60. Ehtesham says:

    The favicon doesn’t work on IE7 or 8, but if i go to some other page on my site then it works =/
    ~Ehtesham~

  61. Max says:

    @ Last Days Callthanks , i’m very glad that it’s worked in your blog.

    @ Jill, Ehtesham Please clear your browser cookies and check it again.

  62. Mostafa says:

    Thanks Man It’s easy

    goooood

  63. Bharath Ram says:

    Hey, having the same problem as louise. Only for the homepage it is displaying. Help.

  64. SammyKat says:

    Worked for me :)
    First favicon tutorial that Ive got to work…
    I hosted through http://www.iconj.com/
    Thanks :)

  65. Jaydeep says:

    I have a strange problem.
    I can see the favicon in IE 8 but I can’t see it in firefox and chorme. I tried clearing the cooiies and all possible efforts.
    In fact I reinstalled it 3 times.
    Plz help.

    • Max says:

      hi jaydeep,
      pelase note that the favicon may take a long time to appear in some browsers,
      so please wait till it’ll work correctly for you, it’s history and cookies issues.

  66. kumar says:

    this will work for all types of images or not.please reply .thanks in advance

    • Max says:

      hi kumar, the .ico type is recommended. so you have to convert your icon image to this type.

  67. Riz says:

    i’ve followed everything as told i can my favico in firefox but not in ie8. Help pls.

    Tq

  68. mamalkay says:

    thanks for the info..now i have favicon in my blog

  69. malhaar says:

    i changed my favicon but its only worling in firefox… chrome and IE show orginal….

  70. prasad says:

    great…i hope u will visit my blog

  71. jai says:

    CPM AND CPC AD NETWORK

    WEBSITE OWNERS EARN MONEY

    http://WWW.ADSWORLD.TK

    * Go from signup to embed code in seconds.
    * Generate revenue from website or app ads, and get paid for every clickand more supported.
    * Text and image ads in standard sizes.
    * Live statistics on clicks, impressions, CTR and more.
    * Join over 17,500 satisfied websites.

    INSTANT PAYMENT WOULD BE MADE BY PAYPAL

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here