Thursday, November 4, 2010

Your OWN Favicon

Have you ever wondered how to get a cool little picture next to the title of the website? You know...like this one:


Well, here is a simple tutorial on how to do it for yourself.
1. Create an image you want to have as your Favicon (that's just what it's called). To make it look good, make the image a perfect square. I used 400x400. It will get re-sized later but this works well.
2. Go to this link: http://www.iconj.com/favicon_hosting.php
You will then see this picture:
 
3. Click browse and select your image you want turned into an .ico file.
4. I used No Sharpen for the Sharpen Level. Click Upload it!
5. If everything well well you should see something like this:

6. Copy the line of code towards the bottom that starts with <link ref="shortcut icon"........

7. Ok, now the semi-tricky part. Go to the Edit HTML part of the design tab:


8. Inside of the HTML, search for (CTRL + F) </head>. Right above the line with </head> on it, paste the code you copied before. It should look something like this:

9. Save your template.
10. If everything worked, you should be able to go to your blog and see a SWEET NEW FAVICON! WOO!

There are other ways to do this. This is just one that I know works. By the way, thanks to the folks at IconJ.com for hosting these files for free! You guys RULE!

27 comments:

  1. This is absolutely awesome and I'm making one!

    ReplyDelete
  2. I've been wondering how to do this..

    ReplyDelete
  3. I have already changed my favicon, but this is by far an easier guide to follow than the one I used. I especially like the nice pictures to help guide me along the path. Hopefully more people visit here instead of the other crappy guides if they want to change their icons.

    ReplyDelete
  4. well you could download photoshop and start practicing..:D

    ReplyDelete
  5. I'm a n00b at PS, but I have CS5 to play with :D

    ReplyDelete
  6. Huh... I always wondered how those things were able to appear and were made...

    ReplyDelete
  7. bookmarked...I will definitely try this later!

    ReplyDelete
  8. I was also wondering how to do this, you saved me some research time. Thanks!

    ReplyDelete
  9. oh, the power of good html. nice stuff :)

    ReplyDelete
  10. I've been to lazy to set mine up lol

    ReplyDelete
  11. I've thought about that before, I never knew anything about it. Thanks

    ReplyDelete
  12. dude awesome... just did it and i like the results

    ReplyDelete
  13. oh man this is really helpful! thanks for this guide, will definitely be using this!

    ReplyDelete
  14. Nice article! I will have to try this sometimes!

    ReplyDelete