I've recently discovered that *.ico files can contain multiple images. Unfortunately, I cannot seem to find any information about actually looking at other images in a *.ico file. What would need to be in a <link> element to pick, for example, the second image?
-
What source tells you this information? To me, an icon file consists of one image that is to be 32 pixels in height and 32 pixels in width.– Mike -- No longer hereCommented Apr 16, 2016 at 5:13
-
Have a look at this: stackoverflow.com/questions/8742047/… Judging by the code, it isn't a trivial exercise. Better would be to create a new .ico or png from the image you want that is within the original .ico– SteveCommented Apr 16, 2016 at 5:14
-
4@Mike Wikipedia's .ico page says that the 4th and 5th byte of an ico file specify the number of images here: en.m.wikipedia.org/wiki/ICO_(file_format)#Outline (they're also allowed in any other size that doesn't exceed 256px by 256px)– SmurftonCommented Apr 16, 2016 at 6:02
-
@Mike .ico files have supported multiple sizes for years, however the value of that is limited on websites as the tabs and address bar often only use the 16x16 or at most 32x32 version. They can go up to at least 128x128 with a 32bit colour depth now.– Zhaph - Ben DuguidCommented Apr 21, 2016 at 18:27
Add a comment
|
1 Answer
How to pick which version of .ico image is favicon?
With regards to a favicon and an HTML link element you can't. Or rather, you don't; the system does (or should, theoretically).
Whilst an .ico file can store multiple images, the general idea is to be able to store multiple versions of the same image at different resolutions (16x16, 32x32, 64x64, etc.) and the system would choose the appropriate image as required. The small 16x16 image for the tab on a 96dpi (desktop) screen or higher depending on where it is used, browser, platform and screen dpi (retina displays etc.).
In HTML5 you have the sizes attribute where you can explicitly specify the sizes that are contained within. eg. sizes="16x16 32x32 64x64". However, I don't think browser support is particularly good at the current time.
However, Apple iOS doesn't support this multiple image .ico format, hence the requirement for rel="apple-touch-icon" and PNG format images on these devices.
