What is an ICO File? Icons, Favicons, and Everything In Between

What is ICO?

ICO is a file format developed by Microsoft for icons in Windows. It is also the standard format for website favicons, the small icons shown in browser tabs and bookmarks.

Key characteristics

• File extension: .ico
• MIME type: image/x-icon or image/vnd.microsoft.icon
• Compression: Uncompressed or PNG-compressed (modern)
• Color support: 1-bit to 32-bit (with alpha transparency)
• Maximum size: 256x256 pixels (modern); historically 16x16, 32x32, 48x48
• Transparency: Yes (1-bit or 8-bit alpha)
• Animation: No
• Multi-image: Yes (multiple sizes and color depths in one file)

Brief history

• 1985: ICO introduced with Windows 1.0
• 1999: Internet Explorer 5 popularizes ICO for website favicons
• 2006: Windows Vista adds 256x256 support with PNG compression
• 2010s: Browsers add PNG and SVG favicon support
• Present: ICO remains the compatibility standard

Primary uses

Website favicons: Icons for tabs, bookmarks, history, and address bars. ICO provides the best cross-browser compatibility.

Windows application icons: Desktop shortcuts, taskbar icons, and file associations.

Windows system icons: UI elements and system objects in Windows Explorer.

Technical specifications

ICO files are simple containers that bundle multiple images.

File structure

1. Header (6 bytes): Identifies file and number of images
2. Directory entries (16 bytes each): Size, color depth, and offsets
3. Image data: Stored as BMP or PNG

Color depth options

Compression methods

BMP (legacy):

• Uncompressed bitmap data
• Larger file sizes
• Maximum compatibility

PNG compression (modern):

• Supported since Windows Vista (2006)
• Smaller file sizes
• Better for 256x256 icons

Multi-resolution support

ICO can store multiple sizes in one file so each context can use the best-fit icon.

Why it matters

• Browser tab: 16x16 pixels
• Desktop shortcut: 32x32 or 48x48 pixels
• Taskbar (Windows 7+): 32x32 pixels
• Start menu tile: 256x256 pixels
• High-DPI displays: 2x or 3x larger sizes

Standard multi-resolution favicon.ico

• 16x16: Browser tabs and bookmarks (required)
• 32x32: Taskbar and desktop shortcuts (recommended)
• 48x48: Windows site icons and desktop (optional but useful)

File size impact: 16x16 only (1-2 KB), 16+32 (5-6 KB), 16+32+48 (12-15 KB).

Upscaling vs downscaling

Single size (resized): If you only include a 256x256 icon and let the system resize it, 16x16 will be blurry and muddy.

Multi-size ICO: Include optimized versions at 16x16, 32x32, and 48x48 to keep icons crisp and legible.

ICO for website favicons

A favicon is the small icon associated with a website. It appears in browser tabs, bookmarks, history, address bars, search results (some engines), desktop shortcuts, and mobile home screens.

Favicon size requirements

Traditional favicon implementation

<!-- Place favicon.ico in website root directory -->
<!-- No HTML needed; browsers automatically look for /favicon.ico -->

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Browser support for ICO

ICO for Windows icons

ICO is required for Windows application icons, file associations, and desktop shortcuts.

Windows icon sizes

Professional Windows application icons

Icon sizes guide

Different use cases require different icon sizes. Use the tables below to choose the right set.

Favicon (website) icon sizes

Windows application icon sizes

Creating ICO files

Most image editors do not natively create multi-resolution ICO files, so you need a conversion step.

Step-by-step: creating a favicon

Step 1: Design your icon

• Create your design at the largest size you will use (for example, 256x256).
• Use simple, recognizable shapes.
• Choose high-contrast colors.
• Check how it looks on light and dark backgrounds.

Step 2: Create multiple sizes

• Do not just resize, redraw for each size.
• 16x16: simplified silhouette
• 32x32: moderate detail
• 48x48: full detail

Step 3: Export as PNG

• Export each size as a transparent PNG.
• Name them clearly: icon-16x16.png, icon-32x32.png, icon-48x48.png.

Step 4: Convert to ICO

Design best practices

Good favicon design:

• Simple, iconic shape
• 2-3 colors max
• High contrast
• Recognizable at 16x16
• Works on any background
• Unique and memorable

Poor favicon design:

• Too much detail
• Many colors or gradients
• Low contrast
• Illegible at small sizes
• Only works on light backgrounds
• Generic or forgettable

Testing your favicon

1. View at actual size: Check the 16x16 icon at 100% zoom.
2. Test backgrounds: White, black, and gray.
3. Browser testing: Chrome, Firefox, Safari, Edge.
4. High-DPI display: Review the 32x32 version on a Retina or 4K screen.
5. Bookmark test: Bookmark the page and review the favicon in the list.

ICO vs PNG vs SVG

Modern browsers support PNG and SVG favicons, but ICO remains the most compatible option.

Format comparison

When to use each format

Use ICO when: You need maximum compatibility, IE support, or a single file for all sizes, and for Windows app icons.

Use PNG when: You only support modern browsers and want smaller file sizes or simpler creation.

Use SVG when: Your icon is a simple vector, you need perfect scaling, and you target modern browsers.

Modern favicon implementation

The best approach is to provide multiple formats for compatibility and quality.

<!-- ICO for maximum compatibility -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- PNG for modern browsers (smaller file size) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- SVG for perfect scaling (optional) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Apple Touch Icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android Chrome -->
<link rel="manifest" href="/site.webmanifest">

Files you need

SVG favicon with dark mode

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon { fill: #000; }
    @media (prefers-color-scheme: dark) {
      .icon { fill: #fff; }
    }
  </style>
  <path class="icon" d="M16 4 L4 16 L16 28 L28 16 Z"/>
</svg>

Converting to ICO

ICO conversion requires a tool that can combine multiple sizes into one container.

When to convert to ICO

Conversion tools

Conversion best practices

1. Start with PNG: Use transparent PNG sources for the best quality.
2. Create multiple sizes: Prepare 16x16, 32x32, and 48x48 versions optimized for each size.
3. Use 32-bit color: Ensures full color and alpha transparency.
4. Keep it simple: Complex images do not read well at 16x16.
5. Test the result: View the ICO at actual size before deploying.

Conclusion: ICO in the modern web

ICO remains highly relevant because it is universally supported and supports multiple sizes in one file. It is still the safest favicon format and the required format for Windows icons.

Related articles