I think IE7 understands PNGs as favicons, but IE6 may not. At any rate, you can actually use both, as Mozilla.org does, and as I just did on BabyBestBuy.com—create both a favicon.ico AND a favicon.png. Then include a link to the PNG version.

<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>

No need to include a link to the .ico version as long as it’s named favicon.ico and in the root folder; IE will look for it there anyway and use it.

> with the six different favicon files you noted above, I suppose it’s ok to name them all slightly differently and the correct one will be pulled for the proper usage?

No…this is the tricky thing to understand. They’re ALL part of the favicon.ico file….all six (or less, or more) of them. That’s the nature of .ico files…they’re not like a regular image file, but rather a COLLECTION of images.

Using either of those tools I mentioned above will allow you to create one of these multi-resolution .ico files.

Question, with the six different favicon files you noted above, I suppose it’s ok to name them all slightly differently and the correct one will be pulled for the proper usage?

Besides the link format you listed, which is the one suggested/invented by Microsoft:

< link rel="shortcut icon" href="favicon.ico" >

you can also use this format, which is supposed to be more correct:

< link rel="icon" href="favicon.ico" type="image/x-icon" / >

Or both, if you want to play it really safe. However, if your favicon is named “favicon.ico” and is located in the root folder of your site, the default location, you can actually just omit both these tags, because every modern browser will find and use it anyway. For instance, if you go to apple.com, you should see the favicon in your browser, but you won’t find a link tag to it anywhere in the code.

You also don’t have to use a .ico file. That’s another Microsoft idea (the favicon concept was introduced by IE5). Pretty much all modern browers will allow you to use a PNG image file instead, which doesn’t require any special plug-ins or software (other than Photoshop or similar) to create. Just use this link format instead:

< link rel="icon" href="favicon.png" type="image/png" / >

That being said, the .ico format offers numerous advantages. In Windows, favicons show up all over the place. For instance, if you put a shortcut to a website (like EMP) on your desktop, you should notice that Windows uses the favicon as the icon. One more chance for branding…

Windows icon files can be quite powerful. Inside a single file, you can create multiple versions of the icon, at different sizes and color “depths”. If you do, Windows uses whichever size and color depth is most appropriate. For the sizes, 16×16, 24×24, 32×32 & 48×48 pixels are most common. In the address bar of your browser, you’ll always see the 16×16 version, quite small. But on your desktop, Windows will usually use the 48×48 version–if there is one. If not, it uses whatever size does exist and scales it.

Stoney, I notice your new EMP favicon only contains a 16×16 version. This looks great in the address bar, but if you make a desktop shortcut, Windows tries to scale that up and it looks “blurry”.

You can fix this by creating a multi-resolution icon. This isn’t much harder than what you did to create your existing favicon. There’s many easy-to-use tools out there that will create a multi-resolution icon for you from a single starting image. Here’s two that I found that I like:

http://www.sibcode.com/icon-studio/
http://www.aha-soft.com/anytoicon/

As for color depth…you’ve probably noticed some icons on your desktop that have jaggedy edges, while others blend smoothly on the edges. The smooth blending is because those icons have a version with 32-bit color depth, which allows full transparency on the edges, something introduced with Windows XP. Using the same tools listed above, you can create both 32-bit and 16-bit (256 color) versions of your icon…all of which would again be stored in the single .ico file.

In short, when you create your favicon, to make sure it looks great wherever people might see it, I suggest you create at least six versions in your favicon.ico file:

16×16, 16-bit (256) colors
16×16, 32-bit colors
32×32, 16-bit (256) colors
32×32, 32-bit colors
48×48, 16-bit (256) colors
48×48, 32-bit colors

Save it as favicon.ico and upload it to your root folder, and you’re done…no HTML required.

Then the only trick is telling your browser to show it to you…sometimes, especially if you have an old favicon that you’re updating, the browser will persistently cache the old version. Clearing your cache and restarting your browser fixes it most of the time. In Safari, go to Edit > Reset Safari.