A very strange favicon file (atleast for me) where one single file contains 3 different sized images

Question

I have this favicon file.

Dowload favicon file

I can not upload the image file since its does not have the proper format.

When you view this file in windows 7, you get the following.

This single file contains the same image but at different sizes. The above shows page 1 of 3.

The following is page 2 of 3 which shows the same image but at a smaller size.

And than page 3 of 3 yet again at a more smaller size.

But it is one single file. My question is how is this possible and more importantly how can I make it such? A single file containing the same image with 3 diferrent sizes.

It shows 48px X 48px dimensions.

Since Adobe Photoshop does not support the ico format natively but if one use this ICO format plugin, install it and opens the file in PS, it will ask you which size image to import. The sizes are 16px X 16px, 32px X 32px and 48px X 48px.

Answer 1

Regarding how this is possible, according to wikipedia: ( http://en.wikipedia.org/wiki/ICO_%28file_format%29 )

An ICO or CUR file is made up of an ICONDIR ("Icon directory") structure, containing an ICONDIRENTRY structure for each image in the file[...]

(emphasis is mine)

Header
ICONDIR structure
Offset#   Size (in bytes)     Purpose
0     2   Reserved. Must always be 0.
2     2   Specifies image type: 1 for icon (.ICO) image, 2 for cursor (.CUR) image. Other values are invalid.
4     2   Specifies number of images in the file.

Using a Hex editor, I see that the first 6 bytes of the file, in 2 byte chunks is: 0000 0100 0300 (which, along with the ICO extension indicates that it is an ICO file with 3 images).

Answer 2

ICO files are native to Windows and can include multiple images with varying resolutions and pixel depths. Usually they're embedded into an application as a resource file. They worked their way onto the web in Internet Explorer 5 as "favicons".

If you're on Windows, there's a very nice tool called IcoFX to create multi-image icons from a single (or multiple PNG) images. I've used it for years to build multi-image icons for Windows applications. If you're on a Mac, you might also take a look at IconBuilder, which runs as a PhotoShop filter.

Answer 3

With device proliferation going exponential, this is becoming more common. I recently produced a favicon file with 7 different sizes. I don't know what the developer did to make them all work in the right situations. I try not to hurt my brain with that stuff.