AVIF to ICO Crop: Complete Conversion Guide for Icons & Favicons

By Bill Crawford  ·  March 2026  ·  9 min read  ·  Last updated March 10, 2026

Connect on LinkedIn →

What Is ICO Format and Why Does It Matter?

ICO is the native icon format for Windows and the universal favicon format for browsers. Introduced with the original Windows release, it has persisted as the primary container for icon images because it supports storing multiple image sizes within a single file — a browser or operating system can pick the most appropriate size for the current display context. A 16×16 image serves the browser tab favicon; a 48×48 image serves the Windows taskbar; a 256×256 image serves the Windows file explorer at high DPI.

Modern ICO files support embedded PNG images rather than raw bitmap data. This means the ICO container is small even at larger sizes, and the embedded PNG can carry a full alpha channel for transparent icons. The format is supported natively in every version of Windows, all major browsers, and most icon-handling software across operating systems.

What Is AVIF and Why Use It as a Source?

AVIF (AV1 Image File Format) is a next-generation image format that uses the AV1 video codec for still image compression. It typically achieves 50% smaller file sizes compared to JPEG at equivalent visual quality, and 20–30% smaller than WebP. It supports wide color gamut, HDR, transparency, and lossless compression. It is supported in Chrome 85+, Firefox 93+, Safari 16+, and Edge 121+.

Designers and developers who work with modern web assets often have AVIF source files — brand marks, icons, illustrations — that they need to repurpose for non-web contexts like Windows application icons and favicons. Converting from AVIF to ICO bridges this gap, and adding a crop step lets you extract precisely the right compositional region from a larger AVIF image without a round-trip through a desktop image editor.

The AVIF Loading Challenge in the Browser

Loading AVIF files in a browser for canvas operations requires special handling that differs from JPEG and PNG. AVIF uses AV1 compression, which requires asynchronous, often GPU-accelerated decoding. The standard approach for loading images in JavaScript — creating an Image element, setting its src via FileReader.readAsDataURL(), and listening for the onload event — fires onload before AV1 pixel decoding completes. When you then call ctx.drawImage(img, ...), the canvas silently receives a blank image. There is no error, no exception, and no warning — the canvas just contains nothing.

The correct solution is createImageBitmap(file). This is a browser API that returns a Promise which resolves only after the complete pixel decode is ready. It uses bitmap.width and bitmap.height to get the image dimensions (not naturalWidth / naturalHeight, which are properties of the Image element and not available on an ImageBitmap). The AVIF to ICO Crop Converter on this site uses this approach exclusively, ensuring that AVIF files always decode correctly before the canvas attempts to draw them.

Why Crop Before Converting to ICO?

Icons are almost always square. AVIF source images are almost never perfectly square — they come from photos, marketing assets, or design exports that include padding, backgrounds, or context that does not belong in an icon. Cropping before conversion lets you extract exactly the subject area you want in the icon: a logo mark isolated from its wordmark, a product photo centered on the product, or a face centered in a portrait.

Cropping in the same operation as conversion also avoids intermediate file saves. Saving back to AVIF or JPEG introduces additional lossy compression. Cropping directly and downloading the ICO means the pixel data flows from the original AVIF decode to the ICO output in a single pass with no additional compression step.

When Should You Crop and Convert AVIF to ICO?

• Creating a website favicon from an AVIF logo or illustration. Your brand assets may be AVIF files. Crop to the icon mark, convert to ICO, and deploy as your favicon.ico at the server root.
• Producing a Windows application icon from AVIF source artwork. If your design workflow outputs AVIF, crop the icon area and convert to ICO for use in Windows application packaging.
• Extracting a square icon from a wider AVIF composition. A product photo or a marketing banner may contain a centered logo or product that works as an icon at small sizes. Crop and convert without re-exporting the source file.
• Converting AVIF brand marks for use in desktop software. Many desktop applications expect ICO format for toolbar icons, tray icons, and application window icons. AVIF is not a supported input for these contexts; ICO is.

AVIF vs ICO: Format Comparison

ICO Sizing for Favicons and Windows Icons

The standard icon sizes for different contexts are well defined. For browser favicons, 16×16 and 32×32 are the most common sizes, with 48×48 used by some browsers at high DPI. A single-size ICO at 32×32 or 48×48 is sufficient for most favicon deployments. For Windows application icons, the standard sizes are 16×16, 24×24, 32×32, 40×40, 48×48, and 256×256. A full Windows icon set contains all of these sizes in a single ICO file.

The AVIF to ICO Crop Converter produces a single-image ICO with the cropped image embedded as PNG at whatever pixel dimensions you select. If you need a multi-size ICO, generate multiple crops at different sizes and combine them with a dedicated ICO editor. For most favicon use cases, a single 32×32 or 48×48 ICO is sufficient and will display correctly in all major browsers.

How the Crop Workflow Works in the Browser

The AVIF to ICO Crop Converter loads your file using createImageBitmap(file), which returns a fully decoded ImageBitmap after the AV1 decoding completes. The bitmap's pixel dimensions are read from bitmap.width and bitmap.height. The bitmap is then drawn onto an HTML5 Canvas scaled to fit the display panel, with the canvas width calculated by subtracting the container's horizontal padding from its client width — this prevents the canvas from overflowing its container and breaking the centering layout.

An SVG overlay renders the crop rectangle and handles. When you drag a handle, the tool maps the canvas coordinates back to the original image's pixel dimensions using a scale factor (bitmap width ÷ display width). When you click Convert & Download ICO, an off-screen canvas draws the selected pixel region from the bitmap at full resolution, exports it as a PNG blob, and wraps it in a minimal ICO container built from scratch in a JavaScript ArrayBuffer. The download is immediate with no server round-trip.

Frequently Asked Questions

Does cropping an AVIF before saving as ICO affect quality?

No — the quality of the source pixels is fixed by the original AVIF encoding. Cropping selects a region; it does not alter the pixels within that region. The ICO output step stores those pixels as a lossless PNG embedded in the ICO container, so there is no additional compression loss from the conversion step itself.

What square size should I crop to for a favicon?

For a simple favicon.ico deployment, 32×32 or 48×48 pixels works well for most browsers at standard and high DPI. If you are building a full Windows icon set, you will need 16×16, 32×32, 48×48, and 256×256 sizes. The tool's crop dimensions badge updates in real time as you drag handles, making it easy to target a specific pixel size.

Is the conversion really free with no file size limit?

Yes. Because processing runs entirely in your browser, there is no server to impose a limit. The only practical limit is your device's available RAM. There are no usage caps, no watermarks, and no account required.

Why does AVIF need special loading code compared to JPEG or PNG?

JPEG and PNG use synchronous or near-synchronous decoding that completes quickly enough that the Image element's onload fires with pixel data already available. AV1 (used by AVIF) is a much more complex codec that can take hundreds of milliseconds to decode, especially on mobile or lower-end CPUs. The browser fires onload when the metadata is ready, not when the pixels are ready. createImageBitmap() was designed to address this; it resolves its Promise only after pixel data is fully available.