Favicon 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?
- Go To favicongenerator [Update: The service has shut down and does not work anymore.]
- 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
3. Hit the Generate Favicon Button and you will be taken to this page,
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?
- Go To Blogger > Design > Edit HTML
- 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 »
Mohammad
3/18/2011
blogger tricks
my picasa does not upload ico files.Please tell me me a different uploader
ReplyDelete@Vedant
ReplyDeleteThe image is in gif format not ico so no problem
Thanks Mohammad
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
ReplyDeleteFinally it worked out.Thank you Mohd
ReplyDeleteI think this trick only works with firefox. :/
ReplyDeletegreat post
ReplyDeletecan u write an article on how to add related posts below each article
Hello Mohammad,
ReplyDeletei 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.
Friends... i need one help.
ReplyDeleteI 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
@Vedant
ReplyDeleteGlad 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?
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@Ayush
ReplyDeleteOh 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
*Respectively replace the texts "ADD ADSENSE CODE HERE" and "ADD SHARE BUTTONS CODE HERE" with the codes of adsense and buttons
ReplyDeleteMohammad, 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@ 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.
ReplyDeleteRegards
Hari
@Ayush
ReplyDeleteOh 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.
@Mustafa
ReplyDeleteThanks Friend. All the best.
Using
ReplyDeletemade it come down but its not at all arranged properly, please see my blog..
Hello Mohammad,
ReplyDeleteThanks a lot.
@Hari
ReplyDeleteAlways welcomed buddy.
@Ayush
Send me your share button codes here. Encode it using mbt encoder
@Jeet
YOu welcomed pal
Dude you have changed the icons so kindly send me the code that you are using at the moment here
ReplyDeleteHow can I send you the code? Cant paste codes in comments!
ReplyDeleteMohammad, is there a way or should i leave it? I shouldn't be disturbing you like this! :(
ReplyDelete@Ayush
ReplyDeleteOf course there is a way. I will help you in this weekend InshAllah. Please bear with me for few days. :>
thank you!! |^
ReplyDeletebtw gimana caranya buat kotak koment seperti ini?? //_O
ReplyDeleteeverything worked. thank you so much
ReplyDeletehey nice tutorial dude.
ReplyDeletethanks a lot.
I was using normal fevicon. I think i will shift to this one now.
thanks man.
Hey everyone,
ReplyDeleteIf 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.
Gif format is no problem?no need to ico?
ReplyDeletehttp://www.bloggertrix.com/
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
ReplyDelete@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! :>
Hi Mohammad
ReplyDeleteI 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.
Sorry previous post missing my site address
ReplyDeleteHi 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
@samir
ReplyDeleteI 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.
@Mohammad Mustafa Ahmedzai
ReplyDeleteMohammad
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
@Samir
ReplyDeleteYes samir IE always has the problems however I have find a way out and I post the solution soon.
@Mohammad Mustafa Ahmedzai
ReplyDeleteMohammad 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
Thanks Bro this is perfectly working!
ReplyDeletewow........
ReplyDeletei have done it in my blog ( sadhakparivar.blogspot.com )
thanks you so much.....(^-^).
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
ReplyDeleteHi 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?
ReplyDeleteThanks & Rgds
Minnie
Is this Possible if i would apply this to Weebly?
ReplyDeleteHi, 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?
ReplyDeletethat is very nice post i love it! keep posting best tips dude. . . .
ReplyDeleteCan i used photobucket instead of Picasa?
ReplyDeleteWhat 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?
ReplyDeletevery helpful for me
ReplyDeleteWorked Perfectly. Your simply the best
ReplyDeleteUm 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