How to Crop & Convert SVG 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 an SVG and converting it to an ICO icon file using the Data Conversion Center SVG to ICO Crop Converter. The entire process takes under two minutes and requires no software installation. Your file never leaves your device.

Step 1: Open the Tool

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

You have two options for loading your source image:

• Drag and drop. Drag an SVG 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 SVG and click Open.

As soon as the image loads, it appears in the source panel. The browser rasterizes the SVG at its declared pixel dimensions. 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 free-form cropping.
• 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 icon use, aim for a square selection — equal width and height values in the badge.

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. Use this to verify your composition — check that the icon mark is centered, that no important detail is clipped at the edges, and that the selection is square if you are targeting favicon or app icon use.

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 canvas to a PNG blob using toBlob('image/png').
3. Reads the PNG bytes and wraps them in an ICO binary container with a 6-byte header and 16-byte directory entry — no external library or server required.
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.svg, 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 SVG, 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 always display icons in square frames. A non-square ICO will be 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 a clipped edge after downloading.
• SVGs without explicit dimensions. If your SVG lacks width and height attributes, the browser may render it at a default size (often 300×150 px). If the result looks too small or oddly proportioned, edit the SVG to add explicit width and height attributes matching your intended icon size before loading into the tool.
• Test at actual favicon size. After downloading the ICO, drag it into a browser tab or file manager to check how it looks at 16–32 pixels. If the icon is hard to read, return to the tool, tighten the crop around the boldest part of the symbol, and re-export.
• Resize after cropping if needed. The ICO output size is determined by the crop dimensions at the SVG's raster resolution. If you need a specific favicon size (e.g., exactly 32×32), use the Image Resizer tool after downloading to scale the ICO to the target dimensions.
• Transparency is preserved. If your SVG has transparent regions, they are carried through to the ICO via the PNG payload. Your favicon will have a transparent background by default, which allows the browser chrome color to show through.