9

Just skip to the answer at the answer section, the question part has speculations and mistakes. The answer is based on experiment and it is accurate.

For a long time I have used a single png packed 256px ico file for my Visual Studio projects, and it worked well, cause scaling works fine on those icons and they take almost no space, and I did not care that much before.

But now I have an icon that needs to "retain hard edges", it is "pixel art". If I build with a 256px version downscales terribly or if I build with 16px upscales slightly less terribly but not good enough. So my questions are:

  1. What are the sizes I have to generate to merge into the ico (I don't care about pre win7 icons)?

  2. If I got that list, do I have to generate 1.25x, 1.5x and 2.0x versions for high dpi settings?

  3. Finally, some apps like firefox has a large icon on start menu inside the medium square block, my apps have a smaller one in the center like Visual Studio does, how can I put a large icon in the start menu medium sized square?

I did found it: Unfortunately VS says: VisualElements is not supported in a Windows Presentation Foundation (WPF) project. Is there a way around this?

I looked around and collected possible sizes @1x(96DPI):
16, 20, 24, 30, 32, 40, 48, 50, 64, 128, 150, 256, 512, 768
Mostly I collected these from Which icon sizes should my Windows application's icon include?.

Not that bad, but if I add 1.25x, 1.5x, 2.0x then we get:
16, 20, 24, 25, 30, 32, 36, 38, 40, 45, 48, 50, 60, 62, 64, 72, 75, 80, 96, 100, 128, 150, 160, 188, 192, 225, 256, 300, 320, 384, 512, 640, 768, 960, 1024, 1152, 1536 In my case it makes a 500k ico file and as it seems the 1024 is the max resolution you can put into an ico file, my icon is pixelated so compresses really well with png and still ~500k.

I also made an ico has all of the above resolutions in rgba, and every one has its size on it, so you can see which windows loads on which dpi setting. you can download it from here and use it in a vs project to test.

As I understand everything under 256px can't be png compressed, is this right?

And do I need all these sizes to retain a pixel perfect icon? Are only 32bit(RGBA) pngs okay? I hope I don't need to include other depths.

After i wrote an ico writer from the spec I realized that pngs can have 0 for resolution cause 1 byte is available for x or y(but i have never seen an ico that is non square, maybe curs can be non square), in this case probably the first one in the file with zeros for resolution going to be used...This is not sure but I think its not far from the truth. See images. Rescaling issues are still confusing me, if I'll have some time tomorrow I'll test it. A pixel perfect icon seems to be imposible to do: having one image to rescale to anything above 256px.

Community
  • 1
  • 1
z4k
  • 597
  • 1
  • 8
  • 14
  • 1
    It's great that you're putting effort into your question, but note that too many edits will frequently bump the question back on the homepage where it will displace other questions, possibly preventing them from getting the attention they deserve. Placing a bounty to attract more attention to your question is the right thing to do, so just use that approach in future. – Bhargav Rao Nov 29 '16 at 08:04
  • 1
    I know but I don't have the reputation, sorry about that. I answered the question though. Thanks for the advice. – z4k Nov 29 '16 at 09:40

2 Answers2

25

The answers:

Are PNGs are acceptable under 256px inside ICO file?
Microsoft states that the sizes under 256px should be a BMP without the first 14 bytes.
But at least in the case of windows 10, the answer is YES.

Can you add larger than 1024px image into the ICO?
YES. As long as it is a PNG it can be as big as you want.
Note the "one icon over 255px" limitation:
You can only add one image larger than 255px ( you can add more but windows will only read the first image block in the ICO head where the resolution is 0,0). The format specifies 1 byte for each dimension. See table #2.

What sizes to include for all DPI setting?
Windows 10 uses the following icon sizes (see table below):
16, 20, 24, 28, 30, 31, 32, 40, 42, 47, 48, 56, 60, 63, 84 and one larger than 255px.

Note that Windows RT apps do not use ICO files, they use PNGs or Fonts, this is from Firefox's source:

<Application xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'>
    <VisualElements
      ShowNameOnSquare150x150Logo='on'
      Square150x150Logo='browser\VisualElements\VisualElements_150.png'
      Square70x70Logo='browser\VisualElements\VisualElements_70.png'
      ForegroundText='light'
      BackgroundColor='#0996f8'/>
</Application>

So how Firefox has a large icon on start menu in the medium tile?
Well its include this above file in the exe directory before the shortcut added to start menu, this article explains it how. My app has an example.
Results

If you make icons for Windows 10 you are better off with my tool and photoshop (or something like that) than anything else, I tried editors and they suck.

win10iconTools by me

You can create ICO files (as MS recommendation or not) or create icons with resolution printed on them, the latter is what I used to make the table.
Supports multiple resize modes including nearest neighbor. If you want to you can use it on other windows versions, it works with .net2, test another windows, send me the results and I extend the table for the good of mankind.

As for pixel art in icons it is not possible to be perfect :(, unless we can change the scaling algorithm in windows 10. So a wide range 84-256 gets the scaled to "0" (see above), so there is no real point adding something bigger that 256 as I see it now you should create a 256px image for "0". (See table why)

If Windows gets all icons 16 to 255 + the 1 larger than 255 (0 in the table) chooses these sizes: (so no markdown tables here?, its kind of wide, the tables are in the app readme also)

|                                           |                 Windows 10                | 
|                                           |   96DPI  |  120DPI  |  144DPI  |  168DPI  | 
| icon                                      |disp.|load|disp.|load|disp.|load|disp.|load| 
|-------------------------------------------|-----|----|-----|----|-----|----|-----|----| 
| alt-tab                                   | 24  | 32 | 30  | 32 | 36  | 32 | 42  | 32 | 
| desktop large                             | 96  | 0  | 120 | 0  | 144 | 0  | 168 | 0  | 
| desktop medium                            | 48  | 48 | 60  | 60 | 72  | 72 | 84  | 84 | 
| desktop small                             | 32  | 32 | 40  | 40 | 48  | 48 | 56  | 56 | 
| explorer content, inc0                    | 32  | 32 | 40  | 40 | 48  | 48 | 56  | 56 | 
| explorer extra large                      | 256 | 0  | 256 | 0  | 256 | 0  | 256 | 0  | 
| explorer large                            | 96  | 0  | 120 | 0  | 144 | 0  | 168 | 0  | 
| explorer medium                           | 48  | 48 | 60  | 60 | 72  | 72 | 84  | 84 | 
| explorer small:inc4,list:inc3,details:inc2| 16  | 16 | 20  | 20 | 24  | 24 | 28  | 28 | 
| explorer tiles, inc1                      | 48  | 48 | 60  | 60 | 72  | 72 | 84  | 84 | 
| startmenu medium                          | 32  | 32 | 40  | 40 | 48  | 48 | 56  | 63 | 
| startmenu programs                        | 24  | 24 | 30  | 30 | 36  | 36 | 42  | 42 | 
| startmenu search                          | 32  | 60 | 40  | 60 | 48  | 60 | 56  | 0  | 
| startmenu tile small                      | 24  | 24 | 30  | 31 | 36  | 39 | 42  | 47 | 
| taskbar normal                            | 24  | 32 | 30  | 40 | 36  | 48 | 42  | 56 | 
| taskbar small                             | 16  | 16 | 20  | 20 | 24  | 24 | 28  | 28 | 
| window icon                               | 16  | 16 | 20  | 16 | 24  | 16 | 28  | 16 | 
| desktop inc0                              | 16  | 16 | 20  | 20 | 24  | 24 | 28  | 28 | 
| desktop inc1                              | 18  | 32 | 23  | 40 | 27  | 48 | 32  | 56 | 
| desktop inc2                              | 20  | 30 | 25  | 40 | 30  | 48 | 35  | 56 | 
| desktop inc3                              | 22  | 32 | 28  | 40 | 33  | 48 | 39  | 56 | 
| desktop inc4                              | 24  | 32 | 30  | 40 | 36  | 48 | 42  | 56 | 
| desktop inc5                              | 27  | 32 | 34  | 40 | 41  | 48 | 47  | 56 | 
| desktop inc6                              | 30  | 32 | 38  | 40 | 45  | 48 | 53  | 56 | 
| desktop inc7                              | 33  | 48 | 41  | 60 | 50  | 72 | 58  | 84 | 
| desktop inc8                              | 37  | 48 | 46  | 60 | 56  | 72 | 65  | 84 | 
| desktop inc9                              | 41  | 48 | 51  | 60 | 62  | 72 | 72  | 84 | 
| desktop inc10                             | 46  | 48 | 58  | 60 | 69  | 72 | 82  | 84 | 
| desktop inc11                             | 51  | 0  | 64  | 0  | 77  | 0  | 89  | 0  | 
| desktop inc12                             | 57  | 0  | 71  | 0  | 86  | 0  | 100 | 0  | 
| desktop inc13                             | 63  | 0  | 79  | 0  | 95  | 0  | 110 | 0  | 
| desktop inc14                             | 70  | 0  | 88  | 0  | 105 | 0  | 123 | 0  | 
| desktop inc15                             | 78  | 0  | 98  | 0  | 117 | 0  | 137 | 0  | 
| desktop inc16                             | 87  | 0  | 109 | 0  | 131 | 0  | 152 | 0  | 
| desktop inc17                             | 97  | 0  | 121 | 0  | 146 | 0  | 170 | 0  | 
| desktop inc18                             | 108 | 0  | 135 | 0  | 162 | 0  | 189 | 0  | 
| desktop inc19                             | 120 | 0  | 150 | 0  | 180 | 0  | 210 | 0  | 
| desktop inc20                             | 133 | 0  | 166 | 0  | 200 | 0  | 233 | 0  | 
| desktop inc21                             | 148 | 0  | 185 | 0  | 222 | 0  | 256 | 0  | 
| desktop inc22                             | 164 | 0  | 205 | 0  | 246 | 0  | 256 | 0  | 
| desktop inc23                             | 182 | 0  | 228 | 0  | 256 | 0  | 256 | 0  | 
| desktop inc24                             | 202 | 0  | 253 | 0  | 256 | 0  | 256 | 0  | 
| desktop inc25                             | 224 | 0  | 256 | 0  | 256 | 0  | 256 | 0  | 
| desktop inc26                             | 249 | 0  | 256 | 0  | 256 | 0  | 256 | 0  | 
| explorer inc5                             | 18  | 32 | 23  |    |     |    |     |    | 
| explorer inc6                             | 20  | 32 | 25  |    |     |    |     |    | 
| explorer inc7                             | 22  | 32 | 28  |    |     |    |     |    | 
| explorer inc8                             | 23  | 32 | 29  |    |     |    |     |    | 
| explorer inc9                             | 25  | 32 | 31  |    |     |    |     |    | 
| explorer inc10                            | 27  | 32 | 34  |    |     |    |     |    | 
| explorer inc11                            | 29  | 32 | 36  |    |     |    |     |    | 
| explorer inc12                            | 31  | 32 | 39  |    |     |    |     |    | 
| explorer inc13                            | 33  | 48 | 41  |    |     |    |     |    | 
| explorer inc14                            | 35  | 48 | 44  |    |     |    |     |    | 
| explorer inc15                            | 38  | 48 | 48  |    |     |    |     |    | 
| explorer inc16                            | 41  | 48 | 51  |    |     |    |     |    | 
| explorer inc17                            | 44  | 48 | 55  |    |     |    |     |    | 
| explorer inc18                            | 47  | 48 | 59  |    |     |    |     |    | 
| explorer inc19                            | 50  | 0  | 63  |    |     |    |     |    | 
| explorer inc20                            | 54  | 0  | 68  |    |     |    |     |    | 
| explorer inc44                            | 239 | 0  | 256 | 0  |     |    |     |    | 
| explorer inc45                            | 256 | 0  | 256 | 0  |     |    |     |    |

There are 27 zoom increments on desktop
and 45 zoom increments on explorer (including the defaults from the menu on the "bottom level")

Icon format specification:

|**block**  |**offset** |**offset** |**length** |**description**                |
|-----------|-----------|-----------|-----------|-------------------------------|
|main header|   0       |           |   2       |Reserved=0                     |
|           |   2       |           |   2       |Image type: 1(.ICO) 2(.CUR)    |
|           |   4       |           |   2       |Number of images in container  |
|image head1|   6       |   0       |   1       |Pixel width                    |
|           |   7       |   1       |   1       |Pixel height                   |
|           |   8       |   2       |   1       |Color palette size or 0        |
|           |   9       |   3       |   1       |Reserved=0                     |
|           |   A       |   4       |   2       |Color planes=0 or 1            |
|           |   C       |   6       |   2       |Bits per Pixel                 |
|           |   E       |   8       |   4       |Image raw size                 |
|           |   12      |   C       |   4       |Offset of imageblock from BOF  |
|image head2|   16      |   0       |   1       |Pixel width                    |
|   ...     |   ...     |   ...     |   ...     |...                            |
|imageblock1|   ...     |   ...     |   ...     |all image data goes here:      |
|           |   ...     |   ...     |   ...     |   pngs included in whole      |
|           |   ...     |   ...     |   ...     |   bmps missing first 14 bytes |
z4k
  • 597
  • 1
  • 8
  • 14
0

The icons you see in Windows 10 are packed into a icon font named Segoe MDL2 Assets & all built-in UWP apps like Groove Music are using this font for icons. Also some apps in the Windows store using it.

RaminMT
  • 174
  • 1
  • 14
  • Firefox (not an universal app) has a large icon in start menu and it has colors. – z4k Nov 22 '16 at 21:44
  • Dear, I didn't say any word about that, I know it's not. Windows Apps doesn't have any api for Tiles, they can just define icons for desktop and taskbar shortcuts, so Windows uses them for Start menu tiles – RaminMT Nov 23 '16 at 08:40
  • I also double checked the Firefox medium tile on Start menu, the icon is smaller than the small tile (maybe for me)! – RaminMT Nov 23 '16 at 08:42
  • See image in post, and please tell me how. – z4k Nov 23 '16 at 11:39
  • See the color difference on my image? I seems the firefox icon contains the background as well. – z4k Nov 23 '16 at 11:47
  • See the parts I added about firefox, as it seems VS won't do it with a WPF project :( – z4k Nov 23 '16 at 17:13