Can you teach me about favicon.ico file structure?

[juhlster1021]

As I understand it, the favicon.ico file can contain several versions of an icon at different resolutions. In my experiments, a good favicon seems to need to have at least a 16x16 and a 32x32 version in order to work well ... because:

- If the favicon only has a 16x16 version, then it looks pixellated or blurry when I drag and drop the url from the address bar to my XP desktop.

- If the favicon only has a 32x32 version, some browsers only display the upper-left quadrant of the icon in the address bar, favorites etc. (This seemed more common on my Mac browsers, but I am not near my Mac so I don't have specifics.)

- But a favicon with both resolutions built in seems to work properly everywhere and in all my PC and Mac browsers that support favicons.

This has made me curious about how that favicon.ico file is structured. When I used an old copy of ACDSee (image-viewing software) to look at various icons, it treated those with multiple resolutions as multipage files -- e.g., "page 1/2" had the 32px version and "page 2/2" had the 16px version.

Does anyone know how the favicon.ico file is put together? Can I take the data from two .pngs and connect them somehow in a new file -- or is this too tricky to try without some icon-maker software?

Thanks for your thoughts.

[tedster]

As you've surmised, a .ico file is a binary file that can hold one or more bitmap images. It was created for system icons in general -- like the ones that display for programs, shortcuts, folders and so on -- and not specifically for favicon which came along a bit later.

In addition to the individual images, the .ico format also holds header information about those images (width, height, color depth and a reserved field) so the system can choose which image to render in a specific location.

This is the limit of my knowledge. I've searched a bit for more precise information that would allow me to build a multi-image .ico file manually, but the details don't seem to be easily available. Since I don't feel comfortable trying to assemble binary files by hand, I do use an icon editor.

[limbo]

To add to what tedster said. You can create icon library's using software that will allow you to scale your icon to various different sizes dependant on the use .. browser.. desktop.. mac..

I like Iconsushi and irfanview. Both are free and both quite easy to learn. you will probably also need a design package like photoshop/illustrator/fireworks to draw the icon before you convert to .ico

[killroy]

There is a program caleld microagnelo wich seems to handle icons pretty well and is available to try for free.

[travelin cat]

there are photoshop plug-ins to output .ico files.... makes it real easy (assuming you have photoshop)

[juhlster1021]

Thanks everyone. I have looked around a little but haven't yet run across anything that tells how the file is put together. But I will take a look at the software you've suggested.

I did find a program called png2ico that runs from the command line and seems to make the multiple res ico files.

[Jon_King]

I guess you've been to MS white paper here: [msdn.microsoft.com...]

and downloaded their example here: [download.microsoft.com...]