DEV Community 👩‍💻👨‍💻

Zcx
Zcx

Posted on

How to create a .ico file with some .png files and NASM

PNG files: easy to view, edit, etc
ICO files: seemingly opaque, bitmap-based, and scary

It doesn't have to be this way!

Starting with Windows Vista, ICO files can be created using a handful of PNGs and some fancy file concatenation.

That's right! This newer "PNG type" of ICO file is essentially just n>0n > 0 PNGs in a trench coat (the trench coat is a file header).

Technical Details

First, budget out space for three 2-byte fields.

dw 0, 1, NUM_IMAGES
Enter fullscreen mode Exit fullscreen mode
  • The first field has to be zero. Reserved fields, am I right? :)
  • The second field can be either 1 (for ICO files) or 2 (for CUR files). Since we're talking about ICO files, set it to 1.
  • The third field is how many images will be in this ICO file.

I feel like the whole point of ICO files is to have multiple images at different resolutions to have better images displayed on the desktop or in UI screens. Thinking thusly, this third field should almost always be greater than 1. Still, you can have an ICO with just one PNG in it and nobody will call you out.

Next comes one sixteen-byte structure for each image in the ICO file.

db WIDTH, HEIGHT, COLORS, 0
dw PLANES, BPP
dd SIZE, OFFSET
Enter fullscreen mode Exit fullscreen mode

Once you've got each of those structures in place, start concat-ing PNGs onto that file. No, seriously, you can just add PNGs onto the end of the file and so long as you set the SIZE and OFFSET fields you're good.

NASM template

Here's the general template I use.

%define R(x) (x - $$)

%macro IMG 2
    db %2, %2, 0, 0
    dw 0, 0
    dd %1.len, R(%1)
%endmacro

%macro IMGDAT 2
    %1: incbin %2
    .len equ $ - %1
%endmacro

NUM_IMAGES equ 5
dw 0, 1, NUM_IMAGES

IMG a, 0
IMG b, 128
IMG c, 64
IMG d, 32
IMG e, 16

IMGDAT a, "256.png"
IMGDAT b, "128.png"
IMGDAT c, "64.png"
IMGDAT d, "32.png"
IMGDAT e, "16.png"
Enter fullscreen mode Exit fullscreen mode

If you name that file x.ico.s, NASM will make x.ico from it without needing to specify the filename with -o! Then all you need is a set of PNGs you want to bundle in the same directory and you can generate an ICO out of them.

Boom. nasm x.ico.s makes x.ico.

Further Reading 1
Further Reading 2
Further Reading 3

Top comments (0)

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.