Favicons
Personally, I think “favicon” is a really stupid name, but that’s what Microsoft came up with. A favicon is a tiny little icon (.ICO file) which goes on your bookmark (favorites) list in your browser when you bookmark a website. I’m sure you’ve seen them. Yahoo has one. Google has one. Most major sites have one. This site even has one. If a site doesn’t have one, IE users will just see 
.
Several people have asked me how I made mine, so I thought I’d give a little description of the process. There’s actually plenty of documentation on the web about it, but if you don’t know the name “favicon,” it can be kind of hard to find.
First, a .ICO file is not just an ordinary image file in a tiny size. It’s a special format, and the only one that can be used for the purpose of creating a favicon for your website. Second, the favicon must be 16×16 pixels big and be in 16 color mode. All the instructions you need can be found on this site, as well as links to the one small program you’ll need. There are many ways to make an .ICO file, but I think the IrfanView image viewer (also linked to on the above page) is the easiest way to go about it, and I’ve done it several different ways before.
So, in a nutshell, this is the process:
1. Go to this site, read it all, and download and install IrfanView.
2. Choose or create the image file you want to be your favicon. The more exacting favicon creators will probably want to start big in Photoshop, then shrink the file down to 16×16 pixel size. Make the appropriate modifications if you don’t like how it looks tiny, then save it as a .BMP file. (I do not recommend creating the icon file from scratch pixel be pixel. You will get very choppy-looking results.)
3. Open the image file in IrfanView, and then save it as a .ICO file. Remember, it must be 16×16 pixels, and only 16 colors.
4. Upload the favicon.ICO file into your website’s root directory.* That should do it!**
* If you don’t have your own .COM, you can still have a favicon for your site. Refer to the page above for detailed instructions.
** If you had a different favicon before, or have already bookmarked your site before, you will have to follow the steps explained on the page referenced above in order to see the favicon. Unfortunately, your readers will as well. New readers will see the favicon as soon as they bookmark your page.
It’s actually simpler than it sounds, but you see very few favicons on personal sites. I’m thinking bloggers just don’t realize how simple it is, but if they did, we’d see a lot more favicons out there. I’m hoping, anyway.
[Further reference on favicons.]
If you have a mac, check out this site
for info on how to make a favicon on the mac.
Sounds interesting, John. I might try playimg around with that.
I’m glad that you mentioned that you had a favicon. I had bookmarked your site before you had one. Using my bookmark to get to your page, although done frequently, did not result in the IE browser replacing the default image. I got the real thing there now!
Tim,
Actually, this is my second one. My first one was blockier and rather irrelevant.
The Sinosplice China Blog List also has its own favicon now.
Thanks for posting directions on how to make a favicon. I see that you’ve changed your favicon (it’s an ‘S’), but when the page finishes loading it disappears. In Safari, the favicon shows up in the address bar as well as in the bookmarks list. Is your favicon supposed to disappear after the page loads?
Nice, John. Thanks for the information – I think it helps sites to have a favicon because when ones favorites list reaches the hundreds, its quite easy to misplace favorites.
Yeah, I always used to wonder why you had ‘zou’ as your logo. The new one looks good.
I was going to shout “nerrrrrrd!” – but actually I think I’ll probably end up adding a favicon to the next version of bokane.org. Thanks for the pointers.
Brendan,
Actually, the ‘zou’ was my first favicon. I made it pixel by pixel, and it was the only thing I could think of that was reasonably easy to make.
As for nerdiness… I don’t think that anyone who designs their own blog template and/or runs Movable Type is too cool to make a favicon. 🙂
Just thought I’d mention that the name of the file does have to be .ICO, .ico is fine also.
I found a free .ico plug in for Photoshop. It saves .ico files very well for use in Firefox, but the IE versions of the same file look very choppy. Our favicons have a transparency, and i’m wondering what the deal is. Why would one look good in Firefox, but not in IE?