Tuesday, February 1, 2011

Captcha and FavIcons.

Ok, some more random tips for bloggers.  These probably won't be as useful as my last post about add-ons and stuff, just a couple of things that I learned recently that I think helped my site look a little better.  You might know some of this already, or maybe not, but hopefully it'll help somebody.

First things first.  Some of you still have captcha on your comments.  Unless your blog is hugely epic, you really don't need it, you aren't going to get spammed by bots.  Here's how to turn it off.  When you log in, go to Settings, then Comments.



Scroll all the way down, and you should see this.  Make sure it's set to no.




Ok but that's basic, lets get into some cooler stuff.  How about changing the favicon...  A favicon is the icon that shows up in a tab or in a bookmark menu, that makes your site stand out a little bit more than the ones that just have the blogger logo.  Example:



I'll set myself up with a new one and take screenshots of the process, so you can see how it's done.
First you can use any pic you want and generate a FavIcon and animated FavIcon at this helpful site here: http://www.chami.com/html-kit/services/favicon/

Just click Browse and then select a pic as seen below:
Hmm those all look like good choices...so pick one and then click the generate button:



It'll give you 2 icons, one of which is animated!  Click to download.



This will give you a .rar file with the icons in it.   I'm writing this to cater to inexperienced people but its getting long so i'll assume you know how to extract a rar file.  No screenshots for this.  Winrar is free to download, and pretty easy to use.  If you need help with it, let me know in the comments and I got you covered.

Now blogger doesn't support .ico files so you'll need to upload them to a free file hosting service.  There are plenty out there. I'm going to use fileden.com (even though it has some annoying ads) but feel free to do a google search for other ones if you like.  Whatever site you choose create an account(if required) and upload both the animated gif and the icon file that you just created.


Now to add them to your blog.  Log in to blogger and go to the design tab and select edit html:



Press ctrl+F and type in /head.  right above the </head> tag, pase in the following code but change the address to reflect wherever your files are hosted, you can see one of these is for the animated gif, and one is for the standard icon:

<link href='http://www.fileden.com/files/2011/1/30/3070528//favicon.ico' rel='shortcut icon'/>
<link href='http://www.fileden.com/files/2011/1/30/3070528//animated_favicon1.gif' rel='icon'/>

So it should look like this:



Click the 'Preview' button, to make sure you don't receive any errors, and if all goes according to plan, click 'Save Template' and the next time you refresh your page.  You'll have a brand new FavIcon!  Neat huh?

Umm, at the time of this writing file den is having some problems, so even though my screenshots are from there, i actually used mediafire.com and i kind of prefer it, so maybe try that out.  It seemed to work ok for me.

When you finish all this, you should end up with something like: you see in this pic:


I was going to cover adding a paypal donation button as well, but I think this has gotten long enough so I'm going to end it here.  I'll probably do the paypal button for tomorrow's post.  Any feedback would be appreciated.  Am I simplifying things too much and making it too long, do you need any more help or advice on some aspect, was this at all useful or helpful to anybody?  Comments are always appreciated.


EDIT FOR IE9:   the IE9 beta (and likely some other browsers) don't seem to support animated .gif favicons very well if at all.  so point both of the above links to your .ico file to fix this.  I changed mine and they seem to be working better in all browsers, except for some reason in chrome.  IDK what's up with chrome.

49 comments:

  1. Your blog has been very helpful to me


    following an supporting!
    http://benny-lava.blogspot.com/

    ReplyDelete
  2. I think the captcha is the most important! It encourages people to comment and it will maximize them on your blog!

    I'm much more likely comment about cats playing pianos if I don't have to type in a captcha every time!

    ReplyDelete
  3. hmm pretty useful tip on the favicon. I will try this out tmw.

    Food blog!
    http://theproatcooking.blogspot.com/

    ReplyDelete
  4. Nice description. Easy to understand and simple. Pretty good. I think I'll add a favicon to my blog later. thanks man.

    ReplyDelete
  5. Great guide, I'll have to do this when I get a chance.

    ReplyDelete
  6. great. i think i will have a favicon soon :) thanks to you

    ReplyDelete
  7. Whoah, the favicon tut is REALLY cool!!

    ReplyDelete
  8. this was awesome. definitely gonna change mine! and cant wait for the paypal tutorial!!

    ReplyDelete
  9. I had some doubts about the quality of this tutorial when I was writing it, so I'm glad the response has been positive. Glad I could help. :)

    ReplyDelete
  10. I just noticed that for some reason I see my favicon in FF, and IE, but not in chrome. I wonder why that is. Your mileage may vary. Chrome users, do you see it for my site?

    ReplyDelete
  11. nice tip$$
    http://shadi-mydesigns.blogspot.com/

    ReplyDelete
  12. Very interesting. Colors always help sort things out for me.

    ReplyDelete
  13. No favicon on chrome.
    And I love your blog tips. Thanks dude.

    ReplyDelete
  14. Thanks for the update. I was actually wondering how to change the logo beside my blogs URL.

    ReplyDelete
  15. regarding chrome: i read something that said it uses a cached version of the graphic and since all favicons are named favicon.ico it can take a long while before it figures it out and displays the right one. so i'm going to assume it's google's problem and not my code.

    ReplyDelete
  16. You sir take the ish to a whole new level.
    Thanks!

    ReplyDelete
  17. this was really helpful, my blog will stop looking like shit haha

    followed

    elgatoporno.blogspot.com

    ReplyDelete
  18. Seems useful, maybe I'll try it some day ;)

    Followed,
    ob-eye.blogspot.com

    ReplyDelete
  19. Pretty useful, going to try it soon.
    Followed,
    http://runningman32.blogspot.com/

    ReplyDelete
  20. Usefull stuff, going to try it really soon
    followed,
    http://runningman32.blogspot.com/
    follow my goals!

    ReplyDelete
  21. Badass... But I don't know what image to use for my favicon :/

    ReplyDelete
  22. Again, great stuff! remember everyone.. captcha = :(

    ReplyDelete
  23. I really learn a lot from your posts! I checked the comment settings on my new blog and I think everything is good, maybe it was just an error or something...

    ReplyDelete
  24. OMG YES, my very own favicon! I'm totally gonna do this later. I just need to pick a picture. Thanks!

    ReplyDelete
  25. Lawl, did it after an hour of trying and trying. Finally did it totally different, but works!

    ReplyDelete
  26. Anonymouse, I don't see it on Chrome, but I see mine on Firefox. Yea, this stinks.

    ReplyDelete
  27. Very good post it worked great for me. Thanks for the useful info!

    ReplyDelete
  28. Yeh, Imma chrome guy, but this is till some awesome stuff!

    killermuffinfest.blogspot.com

    ReplyDelete
  29. Nice guide here. And wow at the number of commenters you have.

    ReplyDelete
  30. Awesome, awesome post dude. I knew most of what you explained expect the favicon bit, wich was something I was trying to figure out. Very much appreciated!!

    ReplyDelete
  31. I use chrome but I tried rockmelt and it's pretty cool.

    ReplyDelete
  32. Nice post, and PLEASE get rid of the captchas lol

    ReplyDelete
  33. My blog looks even more awesome thanks to you! :D

    ReplyDelete
  34. Hey dude, just wanted to let you know that somebody stole your article and put it in his blog... http://goretekz.blogspot.com/2011/02/rawrawrawr.html

    ReplyDelete
  35. thanks geko. i don't mind too much, i wrote it to help people out so i guess the more people who read it the better...wouldve been nice if he'd given me a little credit though.

    ReplyDelete
  36. Thanks for the instructions. I found a red pill icon and got it up for eternus orbis.

    ReplyDelete