David's Blog

You'll notice that most established web sites have an icon. Icons for web pages are known as "favicon's". For example, checkout Yahoo's red "Y!" icon. The icon usually shows up to the left of the web address in your web browser. Favicon's are used in your web browser's favorites list. It is also used as the icon on your desktop if you right-click a web page and choose "Create Shortcut".

To create your own favicon, just place an icon named "favicon.ico" in the root directory of your web site. The Wikipedia article link above mentions a way to put your icon in a different location.

To create my favicon, I used a program called IconXP. This is a really well done program that is loaded with features. Some of the features that really stand out:

• Screen capturing which allows you to easily paint an icon in another package bring it into IconXP
• Test your icon quickly on top of various backgrounds. This helps ensure your icon is easily recognizable on different color backgrounds (black, white, and a custom color). It also shows you which pixels will shine through the transparent parts of your icon.
• Supports custom resolutions up to 3000x3000
• Supports monochrome, 16 color, 256 color, and 16 million color icons
• Support for 8-bit alpha transparency (256 levels of transparency instead of just transparent/not transparent)
• Create icons of various formats from another icon. For example, you can create a 64x64, 16 million color icon and then let IconXP generate a 16x16, 256 color and 32x32, 16 color icon from the original icon.
• Dither painting! This is a nice feature. When working with 16 colors, you can use a technique called "dithering" to make it look like you have more colors.

An icon file can support multiple representations of an icon. If you don't create the format an application is looking for, it will try to create the one it wants from one of the existing formats. For Windows XP, IconXP suggests an icon file support the following formats:

• 48x48, 16 colors
• 32x32, 16 colors
• 16x16, 16 colors
• 48x48, 256 colors
• 32x32, 256 colors
• 16x16, 256 colors
• 48x48, 16 million colors, 256 levels of transparency
• 32x32, 16 million colors, 256 levels of transparency
• 16x16, 16 million colors, 256 levels of transparency

For my favicon, I used the 9 formats suggested by IconXP. It seems to work well. I did find one issue, though. I noticed that My Yahoo! doesn't work with favicons correctly when it draws the favicon next to web site feeds I'm tracking. It uses the 48x48, 16 color format to generate a 16x16, 16 color icon. This is probably a bug in their software since I am providing the format it is auto-generating. The problem is that my 48x48, 16 color down-sampled to a 16x16, 16 color didn't look very good. To fix this, I took my 16x16, 16 color icon and had IconXP create the 48x48, 16 color icon from it. That way, when Yahoo down-samples my 48x48, 16 color icon, it gives me the correct looking 16x16, 16 color icon. My 48x48, 16 color icon does not look as good anymore, but that is not a format that will be used much, so it is probably OK.

So now I have a favicon for my site. Next up, a cool looking banner! The favicon is a hint of what my banner will be, although I doubt anyone will be able to guess what it is. Yes, my favicon is a stylized "D"...but from where?

Posted on May 11, 2006 8:48 PM | Permalink| Comments (4)