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 :>>
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 »
64 comments:
my picasa does not upload ico files.Please tell me me a different uploader
@Vedant
The 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
My blog is www.gamershub.co.in
Finally it worked out.Thank you Mohd
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
I think this trick only works with firefox. :/
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
Check This out
http://www.htmlkit.com/favicon/
it has some more good features
great post
can u write an article on how to add related posts below each article
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.
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
it dosn't work :(
@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?
hihihihi...
Beben 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?
@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
*Respectively replace the texts "ADD ADSENSE CODE HERE" and "ADD SHARE BUTTONS CODE HERE" with the codes of adsense and buttons
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
@ 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
@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.
@Mustafa
Thanks Friend. All the best.
Using
made it come down but its not at all arranged properly, please see my blog..
Hello Mohammad,
Thanks a lot.
@Hari
Always 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?
Dude you have changed the icons so kindly send me the code that you are using at the moment here
How can I send you the code? Cant paste codes in comments!
@Ayush
Replace 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! :(
Mohammad, is there a way or should i leave it? I shouldn't be disturbing you like this! :(
@Ayush
Of course there is a way. I will help you in this weekend InshAllah. Please bear with me for few days. :>
nice post friend,
http://www.bloggertrix.com/
thank you!! |^
btw gimana caranya buat kotak koment seperti ini?? //_O
everything worked. thank you so much
hey nice tutorial dude.
thanks a lot.
I was using normal fevicon. I think i will shift to this one now.
thanks man.
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.
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
Gif format is no problem?no need to ico?
http://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
@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
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.
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
@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.
@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
using ie9, your favicon doesn't show!
@Samir
Yes samir IE always has the problems however I have find a way out and I post the solution soon.
@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
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....
Thanks Bro this is perfectly working!
Ok, thanks
ultimatemukmin.blogspot.com
HIIIII FRND THANKS FOR UR GUIDENCE BT M NOT ABLE TO GET ANIMATED FAVICON
http://entranceexamblog.blogspot.com/
wow........
i 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
everything about carrier
current affairs
last 20 years question paper solved visit
http://entranceexamblog.blogspot.com/
what u said doesn't work
great tutorial. check my site http://www.vidzpro.com/
Nice site. also visit my website about scouting at http://scoutingeverywhere.blogspot.com/ and find more about scouting and its ideals
Superb Blog Dude Please suggest a good template for my blog.
http://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?
Thanks & Rgds
Minnie
Is this Possible if i would apply this to Weebly?
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?
that is very nice post i love it! keep posting best tips dude. . . .
not working in www.vigneshnews.blogspot.com
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
Regards,
Mohammad