How to Crop & Convert HEIC to ICO: Step-by-Step Tutorial

By Bill Crawford  ·  March 2026  ·  5 min read  ·  Last updated March 12, 2026

Connect on LinkedIn →

Overview

This tutorial walks through every step of cropping a HEIC photo and converting it to an ICO icon file using the Data Conversion Center HEIC to ICO Crop Converter. The entire process takes under two minutes and requires no software installation. Your image never leaves your device — HEIC decoding, cropping, and ICO encoding all happen in your browser.

Step 1: Open the Tool

Navigate to dataconversioncenter.com/image-tools/heic-to-ico-crop/ in any modern browser. The tool works in Chrome, Firefox, Edge, and Safari on both desktop and mobile. No sign-in, no extension, and no download required. Chrome 105+ and Safari support HEIC natively; Firefox uses the built-in heic2any fallback automatically.

Step 2: Load Your HEIC File

You have two options for loading your HEIC photo:

• Drag and drop. Drag a .heic or .heif file from your file manager directly onto the drop zone in the tool. The file begins decoding the moment you release it.
• Browse. Click anywhere on the drop zone (or the "Browse Files" link) to open your operating system's file picker. Select your HEIC file and click Open.

After you select the file, a brief "Decoding HEIC file…" status message appears while the tool processes the compressed HEIC data. On a modern desktop, this typically takes under a second for a standard iPhone photo. Once decoding completes, the image appears in the source panel and the blue crop handles become active. If decoding fails, an error message describes what went wrong — the most common cause is selecting a file that is not actually HEIC/HEIF format.

Step 3: Adjust the Crop Area

The crop overlay has eight handles: four at the corners and four at the midpoints of each edge. Here is how each type behaves:

• Corner handles (NW, NE, SW, SE). Dragging a corner handle resizes the crop in both dimensions simultaneously. This is the most common handle for defining a square icon crop region.
• Edge handles (N, S, W, E). Dragging an edge handle moves only that edge, constraining the resize to a single axis. Use these to fine-tune one side without affecting the perpendicular edges.
• Interior pan. Click and drag anywhere inside the crop rectangle (not on a handle) to reposition the entire selection without changing its dimensions. Use this to slide the selection after setting the size.

For icon use, crop to a square region. Keep an eye on the crop dimensions badge in the panel header — it updates in real time to show the output pixel dimensions. A square output (e.g., 512 × 512 px) ensures the ICO displays correctly as a favicon and Windows icon without distortion.

Step 4: Preview the Crop

Before committing to a download, click Preview Crop. A pop-up window opens showing the cropped region rendered at full browser width. The pop-up title displays the exact output dimensions (e.g., "Crop Preview — 400 × 400 px"). Use this to verify your framing — confirm the subject is centered, nothing important is clipped at the edges, and the region looks sharp and clean as an icon would.

Close the preview with the × button or by clicking outside the modal. Return to the source panel and adjust the handles if needed. You can preview as many times as you like before downloading.

Step 5: Convert & Download the ICO

When you are satisfied with the crop, click Convert & Download ICO. The button briefly shows "⏳ Converting…" while the tool:

1. Draws the selected pixel region onto an off-screen canvas at the full original HEIC pixel dimensions.
2. Encodes that canvas as a PNG blob using the browser's built-in toBlob API.
3. Wraps the PNG data in a minimal ICO container (6-byte header + 16-byte directory entry + PNG payload) using a built-in JavaScript encoder — no external library or server required.
4. Creates a Blob URL for the encoded ICO file and triggers a browser download.

The file downloads as [original-filename]_crop.ico. For a source file named IMG_4521.heic, the output is IMG_4521_crop.ico. The download is immediate — there is no server round-trip.

Step 6: Start Over (Optional)

To crop and convert a different HEIC photo, click ↺ Start Over. This clears the current image, resets the crop handles, and returns the tool to its initial drop zone state ready for a new file.

Tips for Best Results

• Crop to a square for icon use. Favicons and application icons are always square. If your crop is not square, the ICO will appear letterboxed or stretched in icon contexts. Use the crop dimensions badge to confirm equal width and height.
• Use the Preview before downloading. It is much faster to adjust a handle and re-preview than to discover after the fact that the subject is off-center or the edges are clipped.
• Larger crop = sharper icon at smaller sizes. Crop from the highest-resolution area of the HEIC photo. A 500×500 px crop will look sharper when scaled to 32×32 than a 100×100 px crop, because the browser has more pixel data to work with during downscaling.
• Use Image Resizer after downloading. If your project requires a specific icon size (e.g., 32×32 or 48×48), use the Image Resizer on the downloaded ICO or on the PNG preview to hit the exact target dimensions.
• iPhone Live Photos. HEIC files from Live Photos contain both a still image and embedded video data. The tool decodes and crops the still image; the Live Photo motion component is not included in the ICO output.