App & Mobile IconsBinary

Multi-Resolution Binary .ico Packager

Avoid broken single-resolution fake ICO files. Assemble true binary Windows ICO files complying with Microsoft ICONDIR and ICONDIRENTRY specifications containing 16x16, 24x24, 32x32, 48x48, 64x64, 128x128, and 256x256 frames with hardware-accelerated downsampling.

Resolution Multi-Pack

Upload Icon

Embedded Binary Frames:

16x16

Browser tab favicon

24x24

Windows pinned taskbar

32x32

Standard desktop shortcut

48x48

Explorer medium view

64x64

High-DPI display scaling

128x128

macOS & Windows large icon

256x256

Windows Vista/11 jumbo icon

Rendered Frame Previews7 frames bundled

16x16

24x24

32x32

48x48

64x64

128x128

256x256

ICONDIRENTRY Memory Layout

Frame	Payload (Bytes)	Offset (Hex)	Planes / Bpp

HTML5 Declaration

<!-- Microsoft Windows & Standard Browser Fallback -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- Modern High-Resolution Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Microsoft ICO Binary Container Architecture & Multi-Resolution Packing

Technical guide on ICONDIR headers, directory entries, multi-DPI frame alignment, and binary synthesis.

Architecture Overview

The Microsoft Windows Icon (.ico) file format is a binary container capable of storing multiple image frames at varying resolutions and color depths within a single file. Many online converters simply append an .ico file extension to a single PNG, causing rendering failures on legacy Windows desktop shortcuts, taskbars, and high-DPI scaling configurations. This compiler constructs a fully compliant binary ICONDIR stream directly in browser memory.

Core Mechanics & Implementation Details

ICONDIR Header Structure (6 Bytes)

Every valid ICO file begins with a 6-byte header consisting of: idReserved (WORD, 2 bytes, must be 0x0000), idType (WORD, 2 bytes, 0x0001 for icon, 0x0002 for cursor), and idCount (WORD, 2 bytes, indicating the number of bundled image frames, little-endian).

ICONDIRENTRY Descriptors (16 Bytes per Frame)

Immediately following the header is an array of 16-byte ICONDIRENTRY structures. Each entry specifies: bWidth (1 byte, 0 = 256px), bHeight (1 byte, 0 = 256px), bColorCount (1 byte, 0 for >= 8bpp), bReserved (1 byte, must be 0), wPlanes (WORD, 2 bytes), wBitCount (WORD, 2 bytes, typically 32 for RGBA), dwBytesInRes (DWORD, 4 bytes, image payload size), and dwImageOffset (DWORD, 4 bytes, byte offset from start of file).

PNG vs DIB/BMP Payload Encoding

Since Windows Vista, frames within an ICO container can be encoded as compressed PNG binary streams rather than uncompressed DIB bitmaps. This drastically reduces file size while retaining full 32-bit alpha transparency. Modern browsers and operating systems read PNG-compressed frames within ICO containers seamlessly.

Engineering Specifications

Parameter	Standard / Value	Engineering Scope
Specification	Microsoft Windows Icon Resource File Format	Binary container format standard
Header Size	6 Bytes (ICONDIR) + 16 Bytes per Frame	Deterministic binary directory table
Endianness	Little-Endian Byte Ordering (x86/ARM)	Low-order byte stored at lowest address
Supported Resolutions	16x16, 24x24, 32x32, 48x48, 64x64, 128x128, 256x256	Multi-DPI Windows and Web standard sizes
Memory Implementation	TypedArray (ArrayBuffer & DataView)	Zero-backend binary byte assembler

Recommended Best Practices

•Always include both 16x16 (browser tabs) and 32x32 (standard desktop shortcuts) frames in web favicons.
•Include a 256x256 frame to ensure sharp rendering on Windows 11 high-DPI (200% scale) displays.
•Use high-quality bicubic canvas downsampling to keep small 16x16 icons legible without muddying fine details.

Common Pitfalls & Anti-Patterns

•Renaming a .png file to .ico without assembling the binary header causes legacy applications and Windows shortcuts to fail.
•Miscalculating dwImageOffset by even 1 byte corrupts the entire binary file and renders all frames invalid.

HTML5 Multi-Format Favicon Declaration

<!-- Classic Windows / Browser fallback ICO with multiple embedded resolutions -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- Modern scalable SVG favicon for modern browsers -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- High-resolution iOS home screen touch icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">