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

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

Connect on LinkedIn →

Overview

This tutorial walks through every step of cropping a GIF image and converting it to an ICO icon file using the Data Conversion Center GIF to ICO Crop Converter. The entire process takes under two minutes and requires no software installation. Your image never leaves your device.

Step 1: Open the Tool

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

Step 2: Load Your GIF

You have two options for loading your source image:

• Drag and drop. Drag a GIF file from your file manager directly onto the drop zone in the tool. 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 GIF and click Open.

As soon as the image loads, it appears in the source panel on the left side of the tool. The blue crop handles appear at the corners and edges of the image, initially set to the full image boundary. If your GIF is animated, the tool captures the first visible frame for cropping and conversion.

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. Drag the bottom-right corner inward to shrink from that corner, outward to expand.
• Edge handles (N, S, W, E). Dragging an edge handle moves only that edge, constraining the resize to a single axis. Drag the top edge down to trim from the top without affecting the left or right boundaries.
• Interior pan. Click and drag anywhere 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 image resolution. For favicon use, aim for a square crop — equal width and height. Common favicon sizes are 16×16, 32×32, 48×48, and 256×256 pixels.

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 — 48 × 48 px"). Use this to verify your composition — check that the icon content is centered, edges are clean, and the aspect ratio is square if you are creating a favicon.

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 with no penalty.

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 full image resolution.
2. Encodes the cropped area as a PNG using the Canvas toBlob API — preserving full RGBA color and transparency.
3. Wraps the PNG in a minimal ICO container: a 6-byte header, a 16-byte directory entry, and the raw PNG data.
4. Creates a Blob URL for the encoded file and triggers a browser download.

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

Step 6: Start Over (Optional)

To crop and convert a different GIF, 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

• Crop to a square for favicon use. Browsers and operating systems display icons as squares. An equal width and height ensures your favicon renders without distortion or letterboxing.
• Use the Preview before downloading. It is much faster to adjust a handle and re-preview than to open the downloaded ICO in Photoshop and discover the crop is off.
• Watch the dimensions badge. If your deployment target requires a specific pixel size (e.g., exactly 32×32 for a Windows icon), keep an eye on the badge as you drag handles to reach the correct value.
• Animated GIFs. Only the first frame of an animated GIF is captured. The output ICO is always a static icon. If you need a specific frame other than the first, you will need to extract that frame from the GIF before using this tool.
• Transparency is preserved. The ICO file embeds a PNG, which supports full alpha channel transparency. Any transparent areas in your GIF (binary transparency) will be carried through as full alpha in the output ICO.