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
  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 :>>

Need Quick Help within 24 Hours? ASK NOW



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 »

80 comments : Post Yours! Read Comment Policy ▼
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. Thanks Mohammad! I prefer the non animated one! Please help me with the share buttons I asked you before, please see my blog. Cant arrange them

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

    ReplyDelete
  7. Hey thats great, i have just pasted a favicon in my blog....

    plz mohd_ refer to my words in your previous post!@!

    regards
    www.krackoworld.blogspot.com

    ReplyDelete
  8. Check This out

    http://www.htmlkit.com/favicon/

    it has some more good features

    ReplyDelete
  9. great post

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

    ReplyDelete
  10. 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
  11. 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
  12. @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
  13. 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
  14. @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
  15. *Respectively replace the texts "ADD ADSENSE CODE HERE" and "ADD SHARE BUTTONS CODE HERE" with the codes of adsense and buttons

    ReplyDelete
  16. 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
  17. @ 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
  18. @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
  19. @Mustafa

    Thanks Friend. All the best.

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

    ReplyDelete
  21. @Hari
    Always welcomed buddy.

    @Ayush

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


    @Jeet
    YOu welcomed pal

    ReplyDelete
  22. I got the codes for the share buttons from your FACEBOOK, TWITTER, DIG LIKE BUTTONS. What should I do now?

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

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

    ReplyDelete
  25. @Ayush

    Replace that entire code with this code


    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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">
    <script type='text/javascript'>
    tweetmeme_style = &quot;compact&quot;;
    </script>
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>

    <br/>

    <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>

    <br/>


    <script type='text/javascript'>
    undefinedfunctionundefined) {
    var s = document.createElementundefined&#39;SCRIPT&#39;), s1 = document.getElementsByTagNameundefined&#39;SCRIPT&#39;)[0];
    s.type = &#39;text/javascript&#39;;
    s.async = true;
    s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
    s1.parentNode.insertBeforeundefineds, s1);
    })undefined);
    </script>
    <a class='DiggThisButton DiggCompact'/>


    <br/>

    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:35px; width:100px; height:20px;'/>

    </td>
    </tr>
    </tbody></table></b:if><br/>




    Hope this helps. :>

    ReplyDelete
  26. Nope, still like the old, all messed up! :(

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

    ReplyDelete
  28. @Ayush

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

    ReplyDelete
  29. nice post friend,
    http://www.bloggertrix.com/

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

    ReplyDelete
  31. everything worked. thank you so much

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

    ReplyDelete
  33. 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
  34. Thanks.. I have added icon and working superb..Look at my site..
    http://sms2loveu.blogspot.com
    but I used Icon hosting site.. Picasa not working for me..
    So I used www.iconj.com/icon_generator.php

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

    http://www.bloggertrix.com/

    ReplyDelete
  36. 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
  37. 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
  38. 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
  39. @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
  40. @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
  41. using ie9, your favicon doesn't show!

    ReplyDelete
  42. @Samir

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

    ReplyDelete
  43. @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
  44. i m unable to change my favicon while i have tried below code in my head segment plz help how to change it...

    for this blog http://interactivemarketingsolution.blogspot.com/

    my code....

    ReplyDelete
  45. Thanks Bro this is perfectly working!

    ReplyDelete
  46. Ok, thanks

    ultimatemukmin.blogspot.com

    ReplyDelete
  47. HIIIII FRND THANKS FOR UR GUIDENCE BT M NOT ABLE TO GET ANIMATED FAVICON

    http://entranceexamblog.blogspot.com/

    ReplyDelete
  48. wow........

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

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

    ReplyDelete
  49. 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
  50. everything about carrier
    current affairs
    last 20 years question paper solved visit
    http://entranceexamblog.blogspot.com/

    ReplyDelete
  51. great tutorial. check my site http://www.vidzpro.com/

    ReplyDelete
  52. Nice site. also visit my website about scouting at http://scoutingeverywhere.blogspot.com/ and find more about scouting and its ideals

    ReplyDelete
  53. Superb Blog Dude Please suggest a good template for my blog.

    http://sameer9542.blogspot.com

    ReplyDelete
  54. 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
  55. Is this Possible if i would apply this to Weebly?

    ReplyDelete
  56. 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
  57. that is very nice post i love it! keep posting best tips dude. . . .

    ReplyDelete
  58. not working in www.vigneshnews.blogspot.com

    ReplyDelete
  59. Working Super :)

    http://lolsplanet.blogspot.com/ check out

    :TROLLFACE:

    ReplyDelete
  60. Can i used photobucket instead of Picasa?

    ReplyDelete
  61. thanx buddy.. Its working great for me..

    www.dwnld4u.blogspot.in

    ReplyDelete
  62. nice, post i'll follow it on my blog http://waytohacking.blogspot.in

    ReplyDelete
  63. @AyushYou're right... Check my blog at both Google Chrome and Firefox
    ultrakawaiiland.blogspot.com

    ReplyDelete
  64. Yeah.. It only works at Firefox... Guys check my blog favicon at ultrakawaiiland.blogspot.com

    ReplyDelete
  65. thanks, that great, i have just pasted a favicon in my blog.

    http://latestarenaanimation.com/

    ReplyDelete
  66. 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
  67. Thanks, for this helpful post for me!


    Plz, visit this site for more details...
    http://www.sunilwebdesigningdevelopment.blogspot.com

    ReplyDelete
  68. VISIT MY WEBSITE
    http://sharknew.blogspot.com

    ReplyDelete
  69. Worked Perfectly. Your simply the best

    ReplyDelete
  70. 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