How to Crop & Convert BMP 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 BMP image and converting it to an ICO file using the Data Conversion Center BMP 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/bmp-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 BMP

You have two options for loading your source image:

• Drag and drop. Drag a BMP 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 BMP and click Open.

As soon as the image loads, it appears in the source panel on the left side of the tool. The tool uses URL.createObjectURL() combined with img.decode() to guarantee the BMP is fully decoded before drawing — ensuring you see real pixels rather than a blank canvas. The blue crop handles appear at the corners and edges of the image, initially set to the full image boundary.

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 setting a square crop for favicon use.
• 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. Use this to slide the selection to a different area of the image after setting the size.

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, watch this badge and aim for equal width and height (a square crop) — browsers and Windows always display icons in a square context.

The info bar below the source image shows the exact pixel coordinates of the crop rectangle's origin and extent, which is useful if you need to document exactly what region was captured.

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 — 256 × 256 px"). Use this to verify your composition — confirm the subject is centered, no important detail is clipped at the edges, and the overall shape looks correct for an icon context.

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. Calls toBlob() to produce a PNG of the cropped region.
3. Reads the PNG binary data and wraps it in a valid ICO container structure (6-byte header + 16-byte directory entry + PNG data).
4. Creates a Blob URL for the encoded ICO and triggers a browser download.

The file downloads as [original-filename]_crop.ico. For a source file named logo.bmp, the output is logo_crop.ico. The download is immediate — there is no server round-trip. The output ICO uses a PNG-embedded format, which is compatible with Windows Vista and later, all major browsers, and any icon-aware application.

Step 6: Use the ICO as a Favicon

To use the downloaded ICO as a favicon, place it in the root of your web server and add the following tag to your HTML <head>:

<link rel="icon" href="/favicon.ico" sizes="48x48">

All major browsers will automatically detect and use this file. For a more complete favicon setup, you can also include PNG versions at multiple sizes alongside the ICO, but a single ICO file is sufficient for basic favicon support across all browsers and operating systems.

Step 7: Start Over (Optional)

To crop and convert a different BMP, 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. Icons are always displayed in a square bounding box. If your crop is not square, the rendered icon will appear stretched or letterboxed. Watch the dimensions badge and aim for 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 crop is off-center or clipped at an edge.
• Keep the crop region simple for small sizes. At 16×16 or 32×32 pixels, fine details from a large BMP will be invisible or muddy. Choose a crop that contains bold, high-contrast shapes — a simple mark, letter, or symbol — rather than a detailed photograph.
• For 256×256 ICO output. If you want a high-resolution ICO for Windows Explorer thumbnails or installer icons, crop to a large square region of your BMP and let the tool embed it at full resolution. The resulting ICO will scale down gracefully for smaller display sizes.
• For large BMP files on mobile. Very high-resolution BMPs may take a few seconds to process on mobile devices with limited RAM. This is normal — BMP files are uncompressed and can be very large. Wait for the "Converting…" label to clear before opening the downloaded file.