The Complete ICO Format Guide: History, Structure & Modern Use
If you have ever created a favicon for a website or designed an icon for a Windows application, you have almost certainly encountered the .ico file extension. ICO is a time-tested format that remains widely used today. This article takes you through everything you need to know about it.
The Origin and History of ICO
The ICO format was born in 1985, launched alongside Windows 1.0. The goal was simple: provide a standard format for desktop icons so the operating system could recognize and display each application's visual identity.
In those early days, ICO only needed to support a single 16×16 pixel, 16-color icon. As screen resolutions improved and Windows evolved, the ICO format expanded to support 32 colors, then 256 colors, and finally — starting with Windows XP — full 32-bit color (with an alpha transparency channel) and larger sizes.
Windows Vista brought a major update: support for embedding PNG images directly inside an ICO container, allowing 256×256 high-resolution icons to maintain a transparent background while keeping file sizes small. This approach continues to be used today.
In the early 2000s, as the internet spread widely, the ICO format moved from the desktop world to the web. IE 5 was the first browser to display a favicon in the browser tab, and from then on, favicon.ico became a near-universal file on every website.
The Technical Structure of ICO
ICO is a container format — similar in concept to a ZIP archive — that can hold multiple images of different sizes and color depths, all stored in a single .ico file.
A standard ICO file consists of the following parts:
- ICONDIR header — 6 bytes that record the file type (fixed as icon format) and the number of embedded icons
- ICONDIRENTRY directory — one 16-byte entry per embedded icon, recording each icon's width, height, color depth, data offset, and more
- Icon data — the actual pixel data for each icon, stored as either BMP or PNG (supported since Vista)
Key point: Modern ICO (Windows Vista and later) supports embedding PNG data directly, giving icons both PNG's full transparency support and excellent compression. The ICO files generated by this tool use this modern standard.
Standard ICO Sizes
Windows and other operating systems automatically select the most appropriate size from an ICO file based on the display context. Here are the common standard sizes and their use cases:
| Size | Primary Use | Notes |
|---|---|---|
| 16×16 | Browser tab favicon, toolbar | Most common favicon size, displayed by virtually all browsers |
| 32×32 | Windows taskbar, bookmark icon | Standard desktop icon size; high-DPI favicon |
| 48×48 | Windows desktop icon (medium) | Default medium icon size in Windows Explorer |
| 64×64 | Windows desktop icon (large) | Suitable for high-DPI desktop displays |
| 128×128 | macOS Dock (some apps) | High-resolution display contexts |
| 256×256 | Windows extra-large icons, thumbnails | Supported since Vista; ideal for HiDPI and Retina screens |
Professional ICO files typically contain multiple sizes so the OS can automatically choose the right one. For example, a complete Windows application icon might include 16, 24, 32, 48, 64, 128, and 256 pixel sizes.
ICO in Web Development
Basic Favicon Setup
The simplest favicon setup is to place favicon.ico in the website root directory. Browsers will automatically try to load it without any HTML declaration:
https://yourdomain.com/favicon.ico
However, explicitly declaring it in the HTML <head> is recommended for the best compatibility:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon" href="/favicon.ico">
Modern Complete Favicon Setup
Modern web development recommends providing both ICO and PNG formats along with device-specific sizes:
<!-- Standard favicon (ICO format, backwards compatible) -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<!-- SVG favicon (modern browsers, supports dark mode) -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-icon.png">
<!-- PWA icon manifest -->
<link rel="manifest" href="/manifest.webmanifest">
ICO Color Depth
ICO supports multiple color depths, each with its own use case:
| Color Depth | Colors | Transparency | Use Case |
|---|---|---|---|
| 1-bit | 2 (black & white) | Binary | Monochrome icons (deprecated) |
| 4-bit | 16 colors | Binary | Minimal icons (deprecated) |
| 8-bit | 256 colors | Binary | Legacy compatibility (rarely used) |
| 24-bit | 16.7 million | None | Color icons without transparency |
| 32-bit | 16.7 million + Alpha | 8-bit gradient | Modern standard with semi-transparency |
| PNG embedded | Full PNG color | Full alpha channel | Best choice since Vista; small file size |
Tips for Creating High-Quality ICO Files
Use High-Resolution Source Images
Use a source image of at least 256×256 pixels for conversion. Scaling down from a high-resolution image preserves the most visual detail; scaling up a small image first then scaling back down will result in a blurry, degraded icon.
Keep the Design Simple
At small sizes like 16×16, complex details become completely unrecognizable. Always design with the smallest size (16×16) as your baseline to ensure the icon remains legible at its smallest.
Use Transparent Backgrounds
Modern ICO supports full alpha transparency. Icons with transparent backgrounds can be displayed on any background color — they look equally good on both light and dark themes.
Test at Multiple Sizes
After creating your icon, test it in different display contexts: browser tab, bookmarks bar, Windows taskbar — make sure it is sharp and recognizable in every scenario.
Modern Alternatives to ICO
While ICO remains the standard in many contexts, modern web development has introduced other formats as supplements or alternatives:
- PNG favicon — modern browsers support PNG directly as a favicon; easier to create and manage
- SVG favicon — supported by Chrome and Firefox; scales perfectly and supports dark mode adaptation
- WebP favicon — supported by some modern browsers; smaller file size but compatibility is not yet complete
However, for the widest compatibility (especially with older browsers and Windows systems), providing an ICO favicon remains the industry standard. The best strategy is to provide both ICO (for backwards compatibility) and SVG or PNG (for modern browser optimization).
How to Quickly Create an ICO File
Now that you know everything about the ICO format, here is how to quickly create an ICO icon using our free online tool:
- Prepare a high-resolution PNG image (at least 256×256 px)
- Upload and convert it using our tool
- Select the size you need (32×32 is recommended for favicons)
- Download the ICO file and place it in your website's root directory