Favicon.ico How-To

What is a favicon.ico, and why should you care?

A favicon is a small icon associated with a website or webpage. See the monkey head in the address bar next to http://www.monkeyknifefight.com? That’s a favicon. If you bookmark this website, then the monkey head will show up in your bookmarks list (at least in most modern browsers). The favicon also shows up on the tabs for each website if you’re using a tabbed browser. And you are, right?

Favicon How To:

Making a favicon is easy, really. There are two ways to do it. The first way is to take any jpg, gif or png and run it through a Favicon generator. Here’s the best one I’ve found:

http://tools.dynamicdrive.com/favicon/

It’s totally free and works great. Save the favicon.ico that is generated, and put it in the root of your website. You’ll be able to see your favicon if you type in http://www.YOURURL.com/favicon.ico. Replace “YOURURL” with your url!

Once it’s uploaded to the root folder of your site, it will automatically get picked up by web browsers. If you want to be sure you can put a reference to the favicon in the HEAD of your webpages, like so:

HTML Favicon Reference:

*

XHTML Favicon Reference:

*

That’s it!

Favicon How To Questions

Why can’t I just use a jpg, gif or png without converting it? You can, but Internet Explorer only recognizes the ico file extension, so you might as well go through the easy step of converting it to a favicon.ico.

How can I make my favicon look better? If you want the background of your favicon to be transparent, you have to use a gif, then convert that to an ico. Animation is also allowed, but IE doesn’t recognized animated gifs, so it won’t work on those browsers. They still degrade nicely for Firefox, so you can still go that route if you want.

That’s really it. It’s quite easy to do, and even if you have a crappy favicon I’d bet that it helps get people to visit your website, bookmark your website, and it gets you more page views. It’s silly to have a site and not create one.