ICO File Creation Guide - How to Make Windows Icons and Favicons

ICO files are the backbone of Windows application icons and website favicons. Unlike other image formats that contain a single image, an ICO file can bundle multiple sizes in one file — which is exactly what Windows and browsers need to display crisp icons at any size. This guide covers everything from the basics of the ICO format to creating professional icons step by step.

What Is the ICO Format?

ICO is a container format developed by Microsoft specifically for icons. Its defining characteristic is that a single .ico file can store multiple images at different sizes and color depths — all packaged together.

When Windows or a web browser needs to display an icon, it looks inside the ICO file, finds the image that best matches the required size, and uses that. This is why a well-made ICO file looks sharp everywhere — at 16×16 in a browser tab, at 32×32 on a desktop shortcut, and at 256×256 in a large icon view.

Key characteristics of ICO:

• Container for multiple embedded images
• Each embedded image can be a different size and color depth
• Supports full transparency via PNG-32 encoding
• Supported by 100% of Windows versions and all web browsers

Why You Need ICO Files

For Windows Applications

Windows uses ICO files pervasively across the operating system:

• Desktop shortcuts and application icons
• Taskbar icons
• Start menu icons
• File association icons (the icon shown for a specific file type)
• Alt+Tab switcher icons

Without proper ICO files, your application will display the default Windows generic icon — an immediate sign of an unfinished product.

For Website Favicons

Every website needs a favicon — the small icon that appears in:

• Browser tabs
• Bookmark lists
• Browser history
• Home screen shortcuts (when saved to a mobile device)
• Address bar

While modern browsers also support PNG favicons, .ico remains the most universally compatible format and the right choice when you need guaranteed support across all browsers and contexts.

How to Create an ICO File

Using Our Online Tool

The fastest way to create an ICO file is with our ICO Converter:

1. Open the ICO Converter
2. Upload your source image (PNG recommended)
3. Select which sizes to include in the ICO file
4. Generate and download your ICO file

The tool handles all the technical work of resizing and packaging multiple sizes into a single ICO file.

Source Image Requirements

For best results, your source image should be:

• Square dimensions — ICO format expects square images; non-square sources get cropped or distorted
• High resolution — at least 256×256 pixels, ideally 512×512 or larger
• PNG format with transparency — PNG-32 preserves clean transparency without artifacts
• Simple, bold design — complex details become unreadable at small sizes

Required Sizes by Use Case

Windows Application Icons

For Windows desktop applications, include these sizes:

Website Favicon

For web favicons, the essential set is:

Complete Set for Maximum Compatibility

If you want to cover all scenarios including high-DPI displays:

• 16×16
• 24×24
• 32×32
• 48×48
• 64×64
• 128×128
• 256×256

For most websites and applications, the 16×16, 32×32, 48×48, and 256×256 set covers 99% of use cases.

Design Best Practices for Icons

Prioritize Simplicity

Icons are displayed at tiny sizes. A design that looks detailed and sophisticated at 512×512 can become an unrecognizable blur at 16×16. Effective icon design follows different rules than other visual design:

• Use strong, simple shapes — think bold geometric forms, not intricate illustrations
• High contrast — the icon needs to be readable against both light and dark backgrounds
• Clear silhouette — the overall shape should be recognizable even without color details
• Limited colors — 3–5 colors is usually enough; too many colors create confusion at small sizes

Design for the Smallest Size First

The most common mistake is designing a beautiful large icon and then expecting it to scale down well. Instead:

1. Start your design by thinking about how it will look at 16×16
2. Create the design with that constraint in mind
3. Use the larger sizes to add detail and polish
4. Verify all sizes look correct before finalizing

Avoid Fine Details

At small sizes, certain elements become problematic:

• Thin lines — disappear or become muddy at small sizes; use 2px minimum stroke width
• Tiny text — unreadable below about 32px; avoid text in icons when possible
• Gradients — can look great at large sizes but turn into flat blobs at small sizes
• Drop shadows — often make icons look muddy at small sizes

Converting Existing Images to ICO

From PNG (Most Common)

PNG is the ideal source format for ICO conversion:

• Square PNG with transparent background
• High resolution (512×512 or larger)
• Clean, smooth edges
• No compression artifacts

From JPG

JPG can work but has limitations:

• No transparency — any areas meant to be transparent need to be handled manually
• Crop to square if not already square
• JPG compression artifacts may become visible at small sizes

From SVG

SVG is actually an excellent starting point because it's infinitely scalable:

• Export the SVG to a high-resolution PNG first (512×512 or 1024×1024)
• Then convert the PNG to ICO
• The vector source ensures clean edges at all sizes

Website Favicon HTML Implementation

Basic Implementation

The simplest favicon implementation that works in all browsers:

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

Place this in the <head> section of your HTML. Most browsers will also automatically find a favicon.ico file in the root directory without any HTML — but including the link tag is more reliable.

Modern Multi-Format Implementation

For the best results across all platforms and devices, use multiple formats:

<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- PNG favicons for modern browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple touch icon for iOS home screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

This gives every browser exactly what it needs in its preferred format.

Web App Manifest

For Progressive Web Apps (PWAs), also add a manifest file:

<link rel="manifest" href="/site.webmanifest">

The manifest references larger icon sizes (192×192 and 512×512) used when the site is installed as a home screen app.

Windows Application Icon Integration

Embedding in Application Resources

For desktop application developers, the ICO file is embedded directly in the application:

• In Visual Studio, add the .ico file as a resource
• Reference it in your application manifest
• Windows uses the appropriate size automatically based on display context

File Type Associations

When you want a specific icon for a file type (like .myapp files):

• Register the file extension in the Windows Registry
• Point to the application executable or a separate ICO file
• The icon appears in File Explorer for all files of that type

Quality Troubleshooting

Blurry Icons

Cause: The ICO file is missing the specific size being requested, so Windows scales from the nearest available size.

Fix: Include all commonly needed sizes (16, 32, 48, 256). Check what sizes your ICO contains using a tool like IcoFX or Resource Hacker.

Jagged or Aliased Edges

Cause: Using binary transparency (1-bit) instead of full alpha transparency.

Fix: Use PNG-32 source files with a full alpha channel. The modern ICO format supports PNG-32 encoding inside the container.

Favicon Not Showing in Browser

Cause: Browser cache, incorrect HTML, or wrong file path.

Fix:

1. Clear browser cache and hard refresh (Ctrl+Shift+R or Cmd+Shift+R)
2. Verify the <link> tag is in <head> and the href path is correct
3. Check that the file is actually accessible (test by navigating directly to the URL)
4. Ensure the file is correctly formatted (use a favicon validator tool)

Testing Your Icons

Before shipping, verify your icons look correct in all contexts:

Windows Display Contexts

• Taskbar (small, typically 24×24 scaled from 32×32)
• Desktop shortcut (medium, typically 48×48)
• Large icon view in File Explorer (96×96 or 128×128)
• Extra-large icons (256×256)
• Windows 11 Start menu (various sizes)

Browser Contexts

• Browser tab (16×16 or 32×32)
• Bookmarks bar
• Browser history list
• On mobile: home screen shortcut icon

Background Testing

• Light backgrounds (the most common context)
• Dark mode / dark backgrounds (increasingly important)
• Colored taskbars and toolbars

Frequently Asked Questions

What sizes should an ICO file contain?

At minimum: 16×16, 32×32, and 48×48 for web favicons. For Windows applications, also include 256×256. For comprehensive coverage, add 24×24 and 64×64 as well.

Can I use PNG instead of ICO for favicons?

Yes, modern browsers support PNG favicons with <link rel="icon" type="image/png" ...>. However, ICO provides the broadest compatibility — especially with older browsers, email clients, and some third-party tools that look for favicon.ico in the root directory by default.

Why does my icon look blurry?

Your ICO file is missing the size that Windows or the browser is actually trying to display. Include all necessary sizes. You can verify the contents of an ICO file with tools like IcoFX, Resource Hacker, or online ICO inspectors.

Should icons always be square?

Yes. The ICO format is designed for square images. Non-square source images will be cropped to square (from the center) or stretched to fill the square canvas — neither result looks good. Always start with a square source image.

How do I make a transparent icon?

Use a PNG-32 source image with a transparent background. When converting to ICO, ensure the alpha channel is preserved. The resulting ICO will have clean transparency that composites correctly on any background color.

Conclusion

Creating a proper ICO file is straightforward once you understand that the format is a container for multiple sizes rather than a single image. Start with a clean, square, high-resolution PNG source, include all the necessary sizes for your use case, test across different display contexts, and you'll have icons that look sharp everywhere.

For the fastest way to create ICO files from any image, use our ICO Converter — it handles the multi-size generation automatically.

Create ICO File →

---

Related tools: Favicon Generator | Image Resizer | PNG Converter