4

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.

Page 1 of 3

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.

page 2 of 3

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

enter image description here

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.

Improve this question

3 Answers 3

Reset to default
6

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).

Improve this answer
5
  • Ah. Great. What a world of Graphic Design and now it involves reverse engineering. Amazing +1
    – Jawad
    Oct 11, 2012 at 16:39
  • I think you will find that, in general, MOST file formats are CONTAINERS for other things. At the esoteric level, a color image is really a container for three (RGB) or 4 (CMYK) black and white images. It may BLOW YOUR MIND that the office docx format is really just a ZIP file container with a bunch of files in it. (rename a docx to zip and look for yourself).
    – horatio
    Oct 11, 2012 at 16:41
  • Note that regarding ICO software, there are free ICO editors out there, and you might consider using one of those, or at the very least using one of them to compile 3 individual PNG images to ICO format.
    – horatio
    Oct 11, 2012 at 16:43
  • Great. I will eventually accept your answer. Just looking for more explainations. Thanks. (And there I was thinking designing is for people who can't code. LOL. What an idiot I am)
    – Jawad
    Oct 11, 2012 at 16:48
  • While I do code plenty of things for my own use, I think anyone with a CS degree who looked at my stuff would agree with you :)
    – horatio
    Oct 11, 2012 at 16:53
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.

Improve this answer
1

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.

Improve this answer
3
  • How did you produce it? What tool?
    – Jawad
    Oct 11, 2012 at 19:06
  • It was based mostly on vector assets so I built it in Illustrator and exported individual pngs. I sent those over to the developer and he set it up. I believe you can also edit/build ico files in Gimp ... it's been a while. And there used to be a plug-in for P'shop produced by the IconFactory to make the process a little less painful.
    – plainclothes
    Oct 11, 2012 at 19:30
  • There are free online tools that can embed multiple sizes into a favicon file. iconifier.net is one such example where you can include up to seven different sizes from 16x16 up to 256x256 (click on the cog for the advanced options).
    – Neil Robertson
    Nov 13, 2013 at 9:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.