Favicon Tutorial
What is a favicon?
Notice the red “Y!” symbol that appears in the left-most area of the address bar in Internet Explorer graphic below. Look familiar? Yep, that’s Yahoo’s favicon. These favicons (favorites icons), sometimes called “bookmark icons,” appear after adding a website with a favicon to the favorites menu in Internet Explorer and certain other browsers.
Favicons also appear in the favorites menu after a page is added. Most anyone who’s roamed the Internet and bookmarked sites of interest has noticed favicons showing up in the favorites menu like this:
They also often appear in the Windows Start menu after installing a program as shown here:
Creating a favicon
A favicon should be 16 X 16 pixels with 16 colors and the file name should be favicon.ico. IconEdit32 is a good freeware program that allows you to create favicons as well as icons of other sizes and color depths. IrfanView is an excellent freeware image viewer that supports the icon (.ico) image format. You can use it to shrink one of your regular images to a 16 X 16 size, then decrease the colors to 16 and save as a “.ico” file. I like to use IrfanView to get an image down to specifications, then edit it with IconEdit32. Remember, if you don’t save it as “favicon.ico,” it won’t work. Also, don’t just shrink an image to icon size and rename it with a “.ico” file extension. That won’t work either because it’s not a real icon file.
Installing a favicon on your website
Simply upload the file, favicon.ico to the root web directory of your hosted website with your favorite FTP program, Microsoft FrontPage, Dreamweaver MX or whatever. Make sure your favicon file is named “favicon.ico.” When someone bookmarks your site with a browser that supports favicons, your favicon will appear. Alternatively, you can use this code between the <head></head> (x)HTML tags:
<link rel=”shortcut icon” href=”http://www.thenameofyoursitehere.com/favicon.ico” mce_href=”http://www.thenameofyoursitehere.com/favicon.ico”/>
Where can I get favicons?
You can feast upon Clickfire’s collection of over 100 quality free favicons and download them for use on your website. To find out more about favicons, visit the definitive favicon site, Favicon.com.
What good is a website without a favicon?
Absolutely worthless 
[…] of the best uses for IconEdit32 is in creating the so called “favicon,” which appears in the left-most area of Internet Explorer’s address bar and in the […]
[…] neat uses of IrfanView is its ability to handle icons (.ico). I sometimes use it to create a favicon–the funky icon that appears in the browser address bar and favorites after bookmarking some […]
thanks for the favicon
[…] Well that is a Favicon. I decided I needed one. The husband doesn’t particularly like it when I decide to add things to this site that may involve me turning around and asking tons of questions while he is solving the problems of the world…a.k.a. whichever world he is playing in a computer game. […]
a favicon appears on my website…a red asterick/flower
i did not put it there
i did not upload it to my site
have any ideas how it got there?
i worry about security as this got there somehow and i did not put it there….any ideas?
Sandra, it looks sort of like the Mambo flower favicon. Are you using Mambo or another content management system that might set that icon as the default?
http://help.mamboserver.com/index.php?option=com_content&task=view&id=585&Itemid=124
I followed the format above to create a favicon but it is not showing up Internet Explorer. It is showing on Firefox. Can someone let me know the problem maybe?
Ding Ding,
I have noticed that sometimes it takes a while after bookmarking for the favicons to show up in Internet Explorer and sometimes they don’t show up at all. I’m not sure why this happens, but I’ve heard the complaint often from others. It really should work if you drop the favicon into your root directory. I’ve been able to get it to work on my sites so far, but sometimes it takes some tweaking.
Here are a few suggestions to try:
Bookmark it on another machine or ask a friend to do it and see if it shows up.
Another method you can try is the “link rel” meta tag between the head tags of your source document. This doesn’t seem to always work, but it may be worth a try.
how is it that some computers see the favicon and others do not? What’s different in their setups?
Cheers.
Michael, I believe it is more related to the browser. I have noticed that IE has trouble seeing the favicon after it has been deleted from the cache.
It is not necessary for the icon to be called favicon.ico - it can have any name as long as it has the .ico extension and is correctlly referrenced. There does sometimes seem to be a problem getting it to appear. These things work well in Firefox - superior in so many ways to Internet Explorer.
I’ve used this before and still use it. But it does show an odd inability to “stick”, and seems to vanish or take a while to appear in IE. I blame the lousy MS speghetti code, personally. If it doesn’t seem to work don’t sweat it, my advice. It’s just one line of code. How bad can you screw it up?
Nice overview of favicons (and blog, for that matter). I created a simple tutorial on how to create a favicon using pages (from apple iwork suite) here: http://www.cjupin.com/2008/04/28/how-to-create-a-favicon-using-pages/