How To Add Animated Favicon In Blogger?

add-faviconFavicon is actually the icon that appears next to your Website URL in the browser address bar. A favicon is usually your blog logo. There are many free services that help to create favicons for you but most of these services use still images. I have used an animated favicon for my blog as you can see in your address bar.  It actually consists of a logo and then my blog title as text. The image and text together makes a more beautiful combination. So lets jump at the tutorial and create an attractive  cute favicon for your blog,

How To Create Animated Favicons?

  1. Go To favicongenerator [Update: The service has shut down and does not work anymore.]
  2. And just at the bottom of the page upload your blog logo or any icon you wish to make as your favicon and also add your blog title as the scrolling text. You will find all the help at favicongenerator
image
    3.  Hit the Generate Favicon Button and you will be taken to this page,
image
Here you will see many images just right click the animated one and save it to your computer.
     4. Now upload the image to your Picasa album by reading this post –> Store Animated Images in Blogger and Learn how to get Image URLs

How To Add Your Favicon To Blogger Now?

  1. Go To Blogger > Design > Edit HTML
  2. And Search For <b:skin> and just above it paste the code below,
<link href='ADD YOUR FAVICON LINK HERE' rel='icon' type='image/gif'/>
     3.  Replace ADD YOUR FAVICON LINK HERE with the image URL of the favicon you saved in Picasa album.
     4.  Save your template and you are done!
View your blog to see it in action on the address bar and tabs. Hope you liked it! Questions are always welcomed :>>

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

48 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. my picasa does not upload ico files.Please tell me me a different uploader

    ReplyDelete
  2. @Vedant

    The image is in gif format not ico so no problem

    Thanks Mohammad

    ReplyDelete
  3. I tried the gif file and then it uploaded .But the favicon still of blogger. I have followed the exact same instructions.Please help. I am over this favicon thing for 2 days

    ReplyDelete
  4. Finally it worked out.Thank you Mohd

    ReplyDelete
  5. I think this trick only works with firefox. :/

    ReplyDelete
  6. great post

    can u write an article on how to add related posts below each article

    ReplyDelete
  7. Hello Mohammad,
    i hope you are fine good to see you back in action,
    i like this post and its quite good,hey i need your help in just visit this site : http://mobigyaan.com/ and see there are on right side facebook floating like box is there and its awesome can you tell me how to do that in "Blogger".
    that blog is in either joomla or wordpress.
    Thank You.

    ReplyDelete
  8. Friends... i need one help.

    I like to add screen like an cinema screen to my blog. it will open when user click the screen. How to set this to my Blog?

    Mustafa... Expecting reply from you

    Thanks

    ReplyDelete
  9. @Vedant

    Glad buddy you did it yourself!

    @Ayush
    I apologise I don't remember that. Which share buttons pal. Kindly tell me so that I could tell you the correct working code?

    @Wamiq Ali

    @Karan
    I visited your blog again and trust me it loads just fine and even takes as much time as mine. Just try to upload your javascripts and images on blogger only. This post would be of great help 12 Useful Tips To Reduce Your Blog Load Time

    @Myworld4free
    I still prefer this one :P

    @John
    Oh yeh thanks for reminding. My next series of posts have alot on these type of widgets. I will post them soon pal.

    @Jeet Dholakia
    Thanks buddy and yes we can implement it in blogger. I have a test on monday and within next week your post will be served! :>

    @Hari
    Do you mean a pop up window?

    @duckster
    where did you get stuck bro?

    ReplyDelete
  10. I mean add share buttons to the right of adsense code. I added one share button, to add the rest accordingly what should i do? Apply CSS to it?

    ReplyDelete
  11. @Ayush

    Oh I remember now...
    Dude simple use this code and tell me if this worked,


    <table border="0" cellspacing="0" cellpadding="2" width="550"><tbody>
    <tr>
    <td valign="top" width="275">ADD ADSENSE CODE HERE</td>

    <td valign="top" width="275">ADD SHARE BUTTONS CODE HERE</td>
    </tr>
    </tbody></table>


    Respectively respect the texts with the codes of adsense and buttons

    ReplyDelete
  12. *Respectively replace the texts "ADD ADSENSE CODE HERE" and "ADD SHARE BUTTONS CODE HERE" with the codes of adsense and buttons

    ReplyDelete
  13. Mohammad, Its just coming in a straight way, I wanna move some widgets to the bottom and all, do you have more ways to customize it? Just see my blog

    ReplyDelete
  14. @ Mustafa: s. Friend this is my idea. when i enter my blog url, it will cover with screen. when i click the screen, it will open and shows my blog content. i like to add this feature.

    Regards
    Hari

    ReplyDelete
  15. @Ayush
    Oh thankfully it worked well. By moving widgets down you mean you want the buttons to align vertically one after another? If yes then simply add <br/> after each share button code like this,

    Digg Code
    <br/>
    Twitter Code
    <br/>
    Facebook Code

    @Hari

    I got you hari and you mean a welcomed screen like those survey types. I will try to implement it in dreamweaver and will try to publish a post on it if I succeeded.

    ReplyDelete
  16. @Mustafa

    Thanks Friend. All the best.

    ReplyDelete
  17. Using
    made it come down but its not at all arranged properly, please see my blog..

    ReplyDelete
  18. @Hari
    Always welcomed buddy.

    @Ayush

    Send me your share button codes here. Encode it using mbt encoder


    @Jeet
    YOu welcomed pal

    ReplyDelete
  19. Dude you have changed the icons so kindly send me the code that you are using at the moment here

    ReplyDelete
  20. How can I send you the code? Cant paste codes in comments!

    ReplyDelete
  21. Mohammad, is there a way or should i leave it? I shouldn't be disturbing you like this! :(

    ReplyDelete
  22. @Ayush

    Of course there is a way. I will help you in this weekend InshAllah. Please bear with me for few days. :>

    ReplyDelete
  23. btw gimana caranya buat kotak koment seperti ini?? //_O

    ReplyDelete
  24. everything worked. thank you so much

    ReplyDelete
  25. hey nice tutorial dude.
    thanks a lot.
    I was using normal fevicon. I think i will shift to this one now.
    thanks man.

    ReplyDelete
  26. Hey everyone,
    If you are still having problem like I did. Do this, instead of uploading it to picasa, write a blog post and upload the gif that way and then publish it. After you publish it, click on the .gif, then copy and use the link that is given in the url.

    Good luck,

    PS: Thanks Mohammad.

    ReplyDelete
  27. Gif format is no problem?no need to ico?

    http://www.bloggertrix.com/

    ReplyDelete
  28. For most of you who are finding it difficult to upload the pic I appreacite that you read this post -> Save Animated Images in Blogger

    @G Thanks pal for the help you gave to others. :>

    @bloggertrix
    OF course there is no problem in using it in fact its the best format pal! :>

    ReplyDelete
  29. Hi Mohammad
    I tried the gif file and icon then it uploaded .But the favicon still of blogger. when view souce of my page you see my uploaded icon but blogger icon show on website I have followed the exact same instructions.Please help.

    ReplyDelete
  30. Sorry previous post missing my site address
    Hi Mohammad
    I tried the gif file and icon then it uploaded .But the favicon still of blogger. when view souce of my page you see my uploaded icon but blogger icon show on website I have followed the exact same instructions.Please help.
    www.realestatesnatch.blogspot.com
    Samir

    ReplyDelete
  31. @samir

    I visted your blog and I can see the red leaf favicon on your blog. I hope you are using mozilla because the favicon often does not show up on IE.

    ReplyDelete
  32. @Mohammad Mustafa Ahmedzai
    Mohammad
    Thanks Very Much for the help I see, it is there using Safari, is there a way to remove blogger favicon from appearing in IE8 OR IE9

    Samir

    ReplyDelete
  33. @Samir

    Yes samir IE always has the problems however I have find a way out and I post the solution soon.

    ReplyDelete
  34. @Mohammad Mustafa Ahmedzai

    Mohammad Thanks for all the great info.

    Is there a way to remove the space at the top of page where blogger nav bar is, when you highlight the webpage with select all you will see in the background of page blue bar at the top and the bottom of page, and one more thing how to remove horizontal scroll bar, again thanks very much for your help.
    Samir
    www.realestatesnatch.blogspot.com

    ReplyDelete
  35. Thanks Bro this is perfectly working!

    ReplyDelete
  36. wow........

    i have done it in my blog ( sadhakparivar.blogspot.com )

    thanks you so much.....(^-^).

    ReplyDelete
  37. Hello mohammad, am new to your blog though, but ever since i came here, i can't leave your blog for once, all your post are very awesome and incredible, overnight, the look of my blog has turned around for good, all thanks to you. here is it: www.makeeasymoneyng.com

    ReplyDelete
  38. Hi Mohammad, I got some problem on doing this.. when I try to upload my image (jpeg) on favicongenerator and click Generate Fav Icon and doesnt show the image that I uploaded... could you please let me know where I went wrong?

    Thanks & Rgds
    Minnie

    ReplyDelete
  39. Is this Possible if i would apply this to Weebly?

    ReplyDelete
  40. Hi, I got some problem too.. when I try to upload my image (jpeg) on favicongenerator and click Generate Fav Icon and it doesnt show the image that I uploaded... could you please let me know where I went wrong?

    ReplyDelete
  41. that is very nice post i love it! keep posting best tips dude. . . .

    ReplyDelete
  42. Can i used photobucket instead of Picasa?

    ReplyDelete
  43. What I want to know is do we have to have a Picasa? Because I am not joining a website simply for that reason. Are there other ways of doing this without Picasa?

    ReplyDelete
  44. Worked Perfectly. Your simply the best

    ReplyDelete
  45. Um is it just chrome? coz i cannot see yours animated. I uploaded my gif which i made in fireworks but it didnt show it

    ReplyDelete