How to Convert PNG to ICO: Step-by-Step Tutorial

By Bill Crawford  ·  March 2026  ·  6 min read  ·  Last updated March 8, 2026

Connect on LinkedIn →

What This Tutorial Covers

This tutorial walks you through converting PNG images to ICO format using the browser-based tool on this site. No software installation required. You will learn how to add files, understand the per-file status system, use batch ZIP download, and deploy your ICO as a favicon or Windows application icon.

For background on why you might want ICO and when to use it, see the companion PNG to ICO Complete Guide.

What You Need

• One or more .png files (logos, icons, graphics, screenshots)
• A modern browser: Chrome, Edge, Firefox, or Safari (2022 or later)
• No account, no software, no subscription

Step 1: Open the Converter

Navigate to dataconversioncenter.com/image-tools/png-to-ico/. The page loads JSZip from CDN for the optional ZIP download feature — no install needed. The ICO encoder itself is written in pure JavaScript using the browser's built-in Canvas API. PNG is natively decoded by all modern browsers, so no external image library is required.

Step 2: Add Your PNG Files

You have two ways to add files:

• Drag and drop: Open your file manager and drag one or more .png files directly onto the drop zone labeled "Drop PNG files here". The zone highlights in blue when you hover over it.
• Browse: Click anywhere on the drop zone (or the "Browse Files" link) to open your file picker. Select multiple files using Ctrl+click (Windows) or Cmd+click (Mac).

As soon as files are added, the tool generates thumbnail previews for each one instantly. You will see an Input Files grid with a card per file showing the filename, file size, and a Ready status badge.

Note: Files with an extension other than .png are automatically rejected with an inline error message. They are not added to the conversion queue.

Step 3: Choose Download Mode

Before converting, decide how you want to download your ICO files:

• Individual downloads (default): Leave "Download as ZIP" unchecked. After conversion, each output card has its own Download button, and a "Download All ICOs" button appears for sequential bulk download.
• ZIP archive: Check "Download as ZIP". After conversion, a single "Download ZIP" button downloads all ICOs in one file named dataconversioncenter_png_to_ico_YYYYMMDDHHMM.zip using your local date and time.

For batches of more than 5 files, the ZIP option is strongly recommended to avoid multiple browser download dialogs.

Step 4: Click "Convert to ICO"

Click the blue Convert to ICO button. The button label changes to "Converting…" and is disabled while conversion runs.

For each file in sequence:

1. The status badge on the input card changes from Ready to Converting…
2. The browser draws the PNG to an HTML Canvas element at full native resolution using createObjectURL and an <img> tag.
3. The canvas is scaled to six sizes: 16, 32, 48, 64, 128, and 256 pixels square.
4. Each scaled canvas is encoded as a PNG blob using canvas.toBlob('image/png').
5. All six PNG blobs are assembled into a standards-compliant ICO binary with a proper ICONDIR header and ICONDIRENTRY table.
6. The status changes to Converted and an output card appears in the Output Files grid.

The progress bar tracks overall progress — "Converted X of N". Files are processed two at a time for throughput efficiency on large batches.

Step 5: Review the Results

After conversion completes, a summary banner appears: "✓ All N files converted successfully" or "Completed: X succeeded, Y failed."

An Output Files grid displays cards for each successfully converted ICO, showing:

• A thumbnail preview (the full-resolution source rendered for display)
• The output filename — same base name as the input with .ico extension (e.g. logo.png → logo.ico)
• Output file size (typically 50–300 KB for a 6-size ICO)
• A per-file Download ICO button

Any files that failed to convert are marked with a red Error badge. The most common cause is that the file is not a valid PNG (e.g. a renamed JPG). The tool continues converting remaining files when one fails.

Step 6: Download Your ICOs

Individual download

Click the ⬇ Download ICO button on any output card to save that file. The filename is the same as the input with .ico extension.

Download All (no ZIP)

With "Download as ZIP" unchecked, click Download All ICOs. The tool triggers sequential browser downloads with a 120 ms delay between each to prevent browser throttling.

Download ZIP

With "Download as ZIP" checked, click Download ZIP. JSZip assembles all ICO blobs in memory and downloads a single file named, for example, dataconversioncenter_png_to_ico_202603081400.zip.

Step 7: The Tool Resets Automatically

After a ZIP download or "Download All" completes, the tool automatically resets to its initial empty state. All thumbnails, cards, and file references are cleared. The checkbox resets to unchecked. This prevents accidental re-downloads and keeps browser memory clean between sessions. Click Start Over to reset manually at any point.

Bonus: Deploy as a Favicon

If your goal is a website favicon, here is what to do after downloading the ICO:

1. Rename the file to favicon.ico.
2. Upload it to the root directory of your web server (the same level as index.html).
3. Add this to your HTML <head>: <link rel="icon" href="/favicon.ico" sizes="48x48">
4. Clear your browser cache and reload — the new favicon should appear in the browser tab.

For high-DPI displays and modern browsers, also add a 32×32 PNG or SVG favicon alongside the ICO for the sharpest rendering on Retina and 4K screens:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/favicon-180.png">

Troubleshooting

• File shows Error status: Verify the file is a genuine PNG. Files renamed from another format (e.g. a JPG with a .png extension) will fail to decode correctly. Re-export the image as PNG from your graphics application.
• Thumbnails not generating: Very large PNG files (e.g. 50+ MB screenshots) may take a few seconds to decode. The tool will proceed when the browser finishes loading the image data.
• Icon looks blurry at 16px: The source PNG has too much fine detail or too small a subject for the 16px frame. Use a simpler, higher-contrast source image with a bold, centered subject element.
• Transparent background not preserved: Verify the source file actually has a transparent background (check in GIMP, Photoshop, or a PNG viewer that shows the transparency grid). If the background is white in the source, it will be white in the ICO.
• ZIP not downloading: Some browsers require a direct user interaction to trigger downloads. Ensure you clicked the Download ZIP button directly (not via script or automation).
• ICO looks different in different apps: Windows and browsers independently select the embedded size that best fits their display context. The 16px frame is used in browser tabs; the 256px frame is used in Explorer's extra-large icon view. Test in both contexts.

Next Steps After Conversion

• Deploy as favicon: Follow the steps above to place favicon.ico in your web root.
• Use in Windows app: Add the ICO file to your Visual Studio, Delphi, or other IDE project as an application icon resource.
• Compress the source for web: Use Image Compressor if you also need a web-optimized version of the original PNG.
• Resize for other targets: Use Image Resizer to scale the source PNG to specific social media or app store icon dimensions.
• Convert to other formats: If you also need WebP or GIF versions of the same source, try PNG to WebP or PNG to GIF.

Related Tools