What is an icon file?

An icon file is artwork packaged specifically to represent an app, a document, or a piece of UI - at every size and on every surface the system might draw it. What sets it apart from an ordinary image is the packaging. Icon files fall into three families: a flat image (one bitmap, like PNG), a multi-size container (several sizes baked into one file, like ICO or ICNS), and a vector (math paths that scale, like SVG). Knowing which is which is the whole game.

Why icons aren't just images

A photograph is shown at roughly one size. An icon is not: Windows alone draws the same icon at 16 pixels in a file list, 32 in a dialog, and 256 in a thumbnail view. If the file held a single large bitmap, the system would shrink it on the fly - and automatic downscaling turns thin strokes into mush at 16 pixels. So an icon file bakes in several sizes, each one hand-tuned, and the OS picks the closest match instead of scaling. That is why which sizes you include matters as much as the artwork itself.

Raster versus vector

Every icon is ultimately one of two things. A raster image - PNG, BMP, the bitmaps inside an ICO - is a fixed grid of pixels: perfect at its native size, blocky the moment you enlarge it past that grid. A vector image - SVG - stores shapes as math, so it re-renders crisply at any size and any screen density. Raster is how icons are finally displayed by most desktops; vector is the ideal source to generate those rasters from.

The container formats: ICO and ICNS

The two desktop icon formats are containers: a directory at the front of the file, then a block of image data the shell chooses from. They are not single images, which is exactly why they exist as their own formats.

ICO - the Windows container

An ICO starts with a 6-byte ICONDIR header: a reserved field of 0, a type field (1 for icons, 2 for cursors), and the image count. Then comes one 16-byte ICONDIRENTRY per image - width and height (a stored 0 means 256), colour count, planes, bits-per-pixel, the size of that image's data, and the offset to it - followed by the contiguous image data itself.

Each embedded image is either a BMP (a DIB, stored without the BITMAPFILEHEADER) or a whole PNG. PNG embedding has been supported since Windows Vista and is the right choice for the large 256-pixel frame, because it keeps the file small. Older BMP frames carry colour as an XOR mask plus a 1-bit AND (transparency) mask - which is why a classic icon's BMP header records twice the icon's height: the two masks are stacked. A modern 32-bit frame is 24-bit RGB plus an 8-bit alpha channel, so the AND mask becomes optional (Windows still derives one for drop shadows). The MIME type is image/vnd.microsoft.icon. IconWorkshop writes ICO frames up to 768x768, while the Windows shell typically draws 16, 24, 32, 48, and 256. The byte-level deep dive lives on what is an ICO file.

ICNS - the macOS container

Apple's ICNS opens with an 8-byte header - the literal icns magic plus the total file length, big-endian - then a sequence of typed elements. Each element is a 4-byte OSType (such as ic07, ic08, ic11, or ic14), a 4-byte length, and the data. Older small icons store the colour image and its 8-bit mask as separate elements (for example it32 paired with t8mk); modern elements embed a whole PNG or JPEG 2000. Retina @2x variants get their own OSTypes - ic08 is 256x256 at 1x, ic14 is 256x256 at 2x - and the point sizes 16, 32, 48, 128, 256, and 512 at 1x and 2x cover pixel sizes from 16 up to 1024. macOS 11 and later prefer asset catalogs, and Sequoia applies a system rounded-rectangle mask, so you ship square art and let the OS round it. IconWorkshop targets ICNS (and the related RSC and BIN) up to 1024x1024.

The flat formats: PNG, WebP, and favicons

PNG is the workhorse: a single lossless raster with a full alpha channel, and the format Linux desktops, Android, iOS asset sets, and the web all expect. It is not a container - one PNG is one size - so you export a set of PNGs rather than a single file. WebP is the newer web raster: smaller at similar quality, lossy or lossless, and supported in IconWorkshop 6.97 for import and export. Use it for efficient web delivery, not as a desktop icon container.

A modern favicon set in 2026 is small and deliberate. Ship one favicon.svg as the primary mark (current Chrome, Firefox, Edge, and Safari prefer it, and it can flip for dark mode with a CSS media query); a multi-size favicon.ico holding 16, 32, and 48 pixel frames as the fallback at the site root; a 180x180 apple-touch-icon.png (opaque, with a little padding, since iOS rounds the corners); and 192x192 plus 512x512 PNGs for the web app manifest, including a 512 maskable variant with the art inside the safe zone. Add sizes="any" to the ICO link so SVG-capable browsers pick the vector. Five <link> tags cover virtually every device.

Colour depth and transparency

Colour depth is how many bits describe one pixel, and it climbs in a familiar ladder: 1-bit (2 colours) to 4-bit (16) to 8-bit (256, from an indexed palette) to 24-bit true colour (16.7 million), and finally 32-bit - 24-bit RGB plus an 8-bit alpha channel. That alpha channel is what replaced the old XOR/AND mask trick: instead of a hard 1-bit cutout, every pixel carries its own transparency, which is what makes anti-aliased edges and soft shadows possible.

The history tracks the hardware. Early Windows icons were monochrome; 16-bit Windows added up to 8-bit colour; the move to 32-bit Windows brought 256-pixel icons and true colour. Windows XP introduced 32-bit icons with an alpha channel, and Windows Vista added 256x256 frames and PNG compression inside the ICO. Today you can treat 32-bit RGBA as the default and reach for the smaller depths only when a legacy target demands them.

Vector and SVG icons

SVG is increasingly the icon source of truth, and often the delivery format for UI. Because it is math, one file stays crisp at any DPI, is usually tiny, and is themeable: paint it with currentColor so it inherits text colour, restyle it from CSS, or swap it for dark mode. The trade-offs are real - SVG must be sanitised before you trust third-party files, very complex art can outweigh a small PNG, and as a favicon it still wants an ICO or PNG fallback for older clients. The Axialis icon family has a recognisable clean-line fingerprint: a 24x24 viewBox, stroke-width="2", round caps and joins, fill="none", and currentColor. To draw, edit, and export that vector source as code, reach for Axialis IconVectors.

Image strips and sprites

Toolbars and ribbons rarely load icons one file at a time. They use an image strip instead: one wide bitmap holding many equal-size icons side by side, loaded once and sliced into buttons (a Windows ImageList). Every cell shares one size and one colour depth - 4, 8, 24, or 32 bits per pixel. A 32-bpp strip carries transparency in its alpha channel for smooth edges; a strip at 24 bpp or less reserves a fixed colour (often magenta) as "transparent". Different sizes or depths mean different strips. IconWorkshop is the only icon editor that opens a wide strip and lets you edit each cell as its own icon - reading and writing BMP and PNG strips, adding, copying, moving, and removing cells, and building from the Lite Toolbars object pack.

The web solved the same problem the same way. A CSS sprite is one image whose individual icons are revealed with background-position; an SVG sprite is a set of <symbol> definitions referenced with <use href="#id">. Both collapse many requests into a single cached file - and the SVG version stays sharp and CSS-colourable.

Choosing a format

The decision is mostly the target. A Windows app wants an ICO; a macOS app wants an ICNS; a browser tab wants an SVG favicon with an ICO or PNG fallback; a toolbar or ribbon wants an image strip; and a scalable UI wants SVG. PNG is the universal raster deliverable that fills the gaps - Linux, Android, iOS, and store art. For a side-by-side of the three desktop and web formats, see ICO vs ICNS vs PNG; to pick the right Axialis app for the job, see which Axialis tool do I need.

How to make icon files in IconWorkshop

The workflow is the same whatever the target. Open an SVG, PNG, or PSD source in IconWorkshop, generate the size family in one step, review the small sizes where automatic scaling fails, and save the container you need - .ico, .icns, or an image strip. The focused guides cover each starting point: PNG to ICO, SVG to ICO, ICO to ICNS, and ICO to PNG. For the full production version, follow the create-a-Windows-ICO tutorial.

Common questions

Related guides