I would like to access certain-resolution files within a multiresolution .ico from javascript (or html, for that matter)

Question

I have created a nice multiresolution favicon.ico containing 16x16, 32x32, & 48x48 resolution icons. These load up all pretty-like within browsers or when the site is saved to the desktop.

However, the same image is also being used on the website (specifically, as an icon within a toolbar). Currently, the 16x16 icon is also saved as a png in order to display it within the webpage itself.

This seems like unnecessary redundancy to me. I would like to display the favicon.ico itself on the page and delete the png.

However, simply selecting the ico file causes the largest-resolution file within the .ico container to be displayed (only tested in Ghrome for Mac).

Can I select an individual icon within the .ico container? It would be great if this had a <img src="favicon.ico:16"/>-type syntax.

If this isn't supported by the majority of browsers, perhaps it would be possible to parse the .ico file with javascript and select the correct chunk of data to display? I don't really feel like doing this, but I'd like feedback on whether it's even possible.

Thanks.

Answer 1

Hey,

I don't think there is a way of doing this in javascript, your best bet may be to rip it open in php or some other server side lang, then you can encode in base 64 and include the encoded text in the img tag.

But I reckon this is a bit of overkill and only really useful if the image is likely to change a lot. Then you have to consider the processing cost per page, although you could work out a caching solution.

So...I'd just stick with having the png at the moment - it's a small, but acceptable level of redundancy.

M