How to create and add a favicon (URL icon) to your Blog

by Brad Isaac on March 3, 2006

Favicons are those neat little icons you see on some sites when you go to their web address. For example, here’s a picture of the new Achieve-IT! favIcon:

The favicon is a quick and visual way for your visitors to bookmark and see your site. In fact, I don’t use site titles in my bookmarks toolbar. I simply add their favicons to my favorites bar in Firefox and delete the name. That way, I can have about 40 or so bookmarks in the bar that are easily recognized and accessible with one mouse click.   Here is a portion (about 1/3) of my bookmark toolbar:

So you can see how handy favicons can be for optimizing the amount of space in your browser and having quick visual references to all your favorite sites.  (I expect to see the Achieve-IT! lightbulb in your browser the next time you post a screen shot somewhere!!)

How to create your own favicon
So how do you create your own favicon? First use Photoshop or MS paint to create what you’d like your

 

icon to look like. It has to be exactly 100 pixels x 100 pixels. If you need one quick you can take an existing photo of yourself and crop it to 100 x 100 pixels. Then save it in .gif or .jpg format.

The next step is to head on over to a handy resource called favicon generator  (bookmark that tool NOW!) . Simply browse to your picture using the Favicon generator. Then you can download it is an ICO file. Leave it named favicon.ico.

How to upload your favicon and set it for your blog
Finally, you need to upload your favicon to your blog. It will need to be uploaded to your Home directory. In Typepad you go to the Control Panel and then choose the Files tab. Where it says Upload a new file, browse to your new favicon and upload it. That’s all you need to do in Typepad!

If you are on another platform it should work the same, but if you have trouble, you might need to edit your template. As described on the favicon Generator site, you would simply copy and paste to the HEAD section of your template.

That’s about all there is to it.  If you create one for your site and use this method, post and let us know where to find you, I’d like to see your work.

Technorati Tags: favicon, blogging, hacks, blog, lifehacks

If you like this post, please digg it or add to del.icio.us

Related Posts:

{ 13 comments }

March 3, 2006 at 12:13 pm

Most sane browsers (firefox, safari) will accept png, jpeg, etc as well. Only MSIE requires an ico file.

March 3, 2006 at 12:54 pm

Thanks for the recommendation. It’s time I redo my faveicon as well. Previously I was using Visual Studio to import the graphics. It was troublesome and the effect was quite poor also. Such tools for creating ICO files are useful and I can also convert some other GIF files and use them on my desktop.

March 3, 2006 at 1:47 pm

Clearing the names out of you bookmark bar is a great idea. However, I stopped using individual links on there a while ago. I have my bookmark bar divided up into folders. When you place folder on the bar, it turns into a menu in the browser. I have my bar divided up more by “tasks” than individual actions. For example, I have a “WinSupp” folder where I keep links to MS’ Knowledge Base, Eventid.net, google and a couple others. When I need to research an issue, I click WinSupp, then “Open in tabs” and all the pages are open and ready. I also have a Morning folder, where I put the 20 or so news sites I glance over in the morning. I open them in tabs, then get the morning coffee to give them enough time to load up.

March 3, 2006 at 2:22 pm

hmm…I’m not sure I understand what you are doing Spoonman. Is there any way you could post a screenshot?

Love your site btw :) Work or spoon? LOL

March 3, 2006 at 8:37 pm

Thanks for this, and many other tips I’ve gotten from your site. I’ve been reading regularly for a while now, and find many thing here very helpful.

March 4, 2006 at 1:34 pm

Well, thanks! Once we get around to updating it, it should work its way back to its former glory. :)

Here is a screenshot of what I’m talking about. This is my Morning menu. Notice, too that I’ve renamed the links and prefixed them with numbers. This is to force a particular order to the tabs. Items that are labeled with a “1″ are “Read quick, close fast” items like comics. They only take a second or two to read. The numbers go up depending on how much time I’d spend on them. That way, I can get through the bulk of them in the first ten minutes, and the stuff that takes longer to digest I refer back to over the course of the day.

March 4, 2006 at 7:33 pm

Spoonman, thanks for the screenshot, you must have a ton of links considering the number of folders you have there.

March 5, 2006 at 10:55 pm

Actually, that’s not where the bulk of them live. :) For the most part, I don’t keep anything in the menus except what I need on a daily basis, or stuff I’m working on at the moment (like playing around with X-box Linux or preparing a RPG based on zombie movies, in case one was wondering about the two visible there). The bulk of my bookmarks live on my home server and are accessible through SiteBar.

March 16, 2006 at 8:47 am

Nice write up on favicons and just think if you become popular enough it may appear on the popular favicons page.

March 29, 2006 at 3:54 pm

Excellent post. Very well written and very useful. Thanks!!

April 3, 2006 at 7:24 pm

Yo! All you need to do to replicate the icon creator is to make the image 16*16 and save it as a png/ico.

I covered this on my blog a little while ago:
http://www.creativehedgehog.com/?postid=24

devdutt June 14, 2006 at 9:06 am

hello sir

This document is great but when i used the tag it just show ico image in add to favourites not in url. please help me .

With regards
Dev dutt

June 4, 2007 at 4:31 pm

Hi Jim. Photos i received. Thanks

Previous post:

Next post: