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

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

Connect on LinkedIn →

Overview

This tutorial walks through every step of cropping an ICO image and converting it to an AVIF file using the Data Conversion Center ICO to AVIF Crop Converter. The tool invokes the browser's native AVIF encoder via the Canvas API — producing files up to 50% smaller than equivalent PNG output while preserving full alpha channel transparency. Everything runs inside your browser with no software installation and no server upload.

Best suited for: modern web pages, performance-critical applications, and any context where a small, high-quality image with transparency is needed and Chrome, Firefox, Safari 16+, or Edge is the target browser.

Step 1: Open the Tool

Navigate to dataconversioncenter.com/image-tools/ico-to-avif-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.

Step 2: Load Your ICO

You have two options for loading your source image:

• Drag and drop. Drag an ICO file (with a .ico extension) from your file manager directly onto the drop zone. The file loads 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 ICO and click Open.

As soon as the image loads, it appears in the source panel. The blue crop handles appear at the corners and edges, initially set to the full image boundary. ICO files are decoded via the browser's native image decoder, so the canvas displays whichever resolution the browser selects — typically the largest available, often 256×256 px.

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). Drag to resize the crop in both dimensions simultaneously — the most common handle for free-form cropping.
• Edge handles (N, S, W, E). Drag to move only that edge, constraining resize to a single axis. Use these to trim one side without affecting the opposite edge.
• Interior pan. Click and drag inside the crop rectangle (not on a handle) to reposition the entire selection without changing its dimensions.

As you drag, the crop dimensions badge in the panel header updates in real time to show the output pixel dimensions at full ICO resolution. The info bar below shows the exact pixel coordinates of the selection corners.

AVIF tip: AVIF handles both flat-color regions and complex gradients efficiently. Crop tightly to the region of interest to minimise the pixel area the encoder must process — this produces the smallest possible output file.

Step 4: Preview the Crop

Before downloading, click Preview Crop. A pop-up opens showing the cropped region at browser width, with the exact output dimensions in the title. Use this to verify the composition — confirm that the icon content is not clipped at the edges and that the framing looks correct.

The preview renders as JPEG for speed. The actual AVIF output will look identical or marginally better at the edges due to AVIF's superior compression. Close the preview and adjust handles if the composition needs refinement.

Step 5: Convert & Download the AVIF

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

1. Draws the selected pixel region onto an off-screen canvas at full ICO resolution.
2. Calls canvas.toBlob('image/avif', 0.88) to invoke the browser's native AVIF encoder at 88% quality.
3. If AVIF is not supported by the current browser, automatically falls back to WebP, then PNG — ensuring you always receive a usable file.
4. Triggers a browser download of the resulting file.

The file downloads as [original-filename]_crop.avif. For a source file named app-icon.ico, the output is app-icon_crop.avif. No server round-trip occurs.

Step 6: Start Over (Optional)

To crop and convert a different ICO, click ↺ Start Over. This clears the current image, resets the crop handles, and returns the tool to its initial drop zone state.

Tips for Best Results

• Check browser AVIF support first. AVIF encoding is available in Chrome 85+, Edge 121+, Firefox 93+, and Safari 16+. On unsupported browsers the tool automatically falls back to WebP or PNG — check the downloaded file extension to confirm what format was produced.
• Crop tightly for the smallest file. AVIF file size scales with pixel area. Removing empty transparent padding before conversion produces the most compact output.
• Transparency is fully preserved. AVIF supports full alpha. Any transparent or semi-transparent regions in the ICO are encoded exactly in the AVIF output — no white-fill compositing occurs.
• Use the preview to check composition, not compression. The preview renders as JPEG and cannot show you AVIF compression artifacts (which are minimal at 88% quality anyway). Use it to verify framing and content only.
• For maximum compatibility, use PNG instead. If the output will be used in a context that may not support AVIF — older browsers, document editors, or legacy systems — use ICO to PNG Crop instead for guaranteed compatibility.