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
- 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 :>>
Filed Under: blogger tricks
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you
Subscribe to our regular Email Updates!
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 »
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
ReplyDeleteMy blog is www.gamershub.co.in
ReplyDeleteFinally it worked out.Thank you Mohd
ReplyDeleteThanks 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
ReplyDeleteI think this trick only works with firefox. :/
ReplyDeleteHey thats great, i have just pasted a favicon in my blog....
ReplyDeleteplz mohd_ refer to my words in your previous post!@!
regards
www.krackoworld.blogspot.com
Check This out
ReplyDeletehttp://www.htmlkit.com/favicon/
it has some more good features
great 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
it dosn't work :(
ReplyDelete@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?
hihihihi...
ReplyDeleteBeben Koben
xixixixi...
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
I got the codes for the share buttons from your FACEBOOK, TWITTER, DIG LIKE BUTTONS. What should I do now?
ReplyDeleteDude 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!
ReplyDelete@Ayush
ReplyDeleteReplace that entire code with this code
<b:if cond='data:blog.pageType == "item"'>
<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 = "compact";
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
<br/>
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=1&r=" + data:post.url'/>
<br/>
<script type='text/javascript'>
undefinedfunctionundefined) {
var s = document.createElementundefined'SCRIPT'), s1 = document.getElementsByTagNameundefined'SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBeforeundefineds, s1);
})undefined);
</script>
<a class='DiggThisButton DiggCompact'/>
<br/>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' 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. :>
Nope, still like the old, all messed up! :(
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. :>
nice post friend,
ReplyDeletehttp://www.bloggertrix.com/
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.
Thanks.. I have added icon and working superb..Look at my site..
ReplyDeletehttp://sms2loveu.blogspot.com
but I used Icon hosting site.. Picasa not working for me..
So I used www.iconj.com/icon_generator.php
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
using ie9, your favicon doesn't show!
ReplyDelete@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
i m unable to change my favicon while i have tried below code in my head segment plz help how to change it...
ReplyDeletefor this blog http://interactivemarketingsolution.blogspot.com/
my code....
Thanks Bro this is perfectly working!
ReplyDeleteOk, thanks
ReplyDeleteultimatemukmin.blogspot.com
HIIIII FRND THANKS FOR UR GUIDENCE BT M NOT ABLE TO GET ANIMATED FAVICON
ReplyDeletehttp://entranceexamblog.blogspot.com/
wow........
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
ReplyDeleteeverything about carrier
ReplyDeletecurrent affairs
last 20 years question paper solved visit
http://entranceexamblog.blogspot.com/
what u said doesn't work
ReplyDeletegreat tutorial. check my site http://www.vidzpro.com/
ReplyDeleteNice site. also visit my website about scouting at http://scoutingeverywhere.blogspot.com/ and find more about scouting and its ideals
ReplyDeleteSuperb Blog Dude Please suggest a good template for my blog.
ReplyDeletehttp://sameer9542.blogspot.com
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?
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. . . .
ReplyDeletenot working in www.vigneshnews.blogspot.com
ReplyDeleteWorking Super :)
ReplyDeletehttp://lolsplanet.blogspot.com/ check out
:TROLLFACE:
Can i used photobucket instead of Picasa?
ReplyDeletedoesnt work for me
ReplyDeletethanx buddy.. Its working great for me..
ReplyDeletewww.dwnld4u.blogspot.in
nice, post i'll follow it on my blog http://waytohacking.blogspot.in
ReplyDelete@AyushYou're right... Check my blog at both Google Chrome and Firefox
ReplyDeleteultrakawaiiland.blogspot.com
Yeah.. It only works at Firefox... Guys check my blog favicon at ultrakawaiiland.blogspot.com
ReplyDeletethanks, that great, i have just pasted a favicon in my blog.
ReplyDeletehttp://latestarenaanimation.com/
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?
ReplyDeleteThanks, for this helpful post for me!
ReplyDeletePlz, visit this site for more details...
http://www.sunilwebdesigningdevelopment.blogspot.com
Is it working now?
ReplyDeleteVISIT MY WEBSITE
ReplyDeletehttp://sharknew.blogspot.com
visite my amazing website
ReplyDeleteSHARK APPS