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

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

Connect on LinkedIn →

Overview

This tutorial walks through every step of cropping a WebP image and converting it to an ICO file using the Data Conversion Center WebP to ICO Crop Converter. The tool produces a single-frame 32-bit PNG-in-ICO — a valid favicon.ico format recognised by all modern browsers, Windows, and macOS. It includes a size selector (16×16 through 256×256), full transparency preservation, and no external library dependency. The entire process takes under two minutes. Your image never leaves your device.

Planning Your Favicon Crop

Before loading your WebP, take a moment to identify the region you want to extract. A good favicon is almost always a crop of a single symbol or letterform, not the full brand lockup. At 32×32 pixels — the standard favicon size — there are only 1,024 pixels total. A full logo with a wordmark, tagline, and padding will be illegible at that scale. The goal of the crop step is to isolate the core mark: the icon, the initial letter, the distinctive shape. That isolated mark, cleanly cropped to a square if possible, will produce the most readable favicon.

Step 1: Open the Tool

Navigate to dataconversioncenter.com/image-tools/webp-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. The ICO binary is constructed entirely in JavaScript — no external library is fetched.

Step 2: Load Your WebP

You have two options for loading your source image:

• Drag and drop. Drag a WebP file (with a .webp 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 WebP and click Open.

As soon as the image loads, it appears in the source panel with the blue crop handles set to the full image boundary.

Step 3: Crop to Your Icon Region

This is the most important step for ICO output. The crop defines what will fill the entire icon canvas after resampling to your chosen size.

• Corner handles (NW, NE, SW, SE). Drag to resize in both dimensions simultaneously — use these to isolate the icon region from the surrounding image.
• Edge handles (N, S, W, E). Drag to trim one side at a time — useful for fine-tuning the boundary after you have the rough region selected.
• Interior pan. Click and drag inside the crop rectangle (not on a handle) to reposition the selection without resizing it.

The crop dimensions badge in the panel header shows the selection size at full WebP resolution. The info bar below shows the exact pixel coordinates.

Icon crop tips:

• Crop to a square region if possible — ICO sizes are square, and a non-square crop will be scaled to fit, which may distort the design.
• Leave a small amount of padding around the mark if the design has elements that reach the edge — tight crops with no margin often look cramped in browser tabs.
• Zoom into the source panel on mobile by pinching — the crop handles remain functional while zoomed.

Step 4: Choose the Icon Size

Below the crop panels, a Icon size dropdown lets you choose the output dimensions. The available sizes and their common uses are:

• 16 × 16 — Minimum favicon size. Suitable only for extremely simple, high-contrast marks.
• 32 × 32 (default) — Standard favicon size. The best choice for a single-size favicon.ico. Browsers scale this to 16×16 when needed.
• 48 × 48 — Windows taskbar and desktop shortcut icon. Minimum recommended size for Windows application icons.
• 64 × 64 — High-DPI favicon for retina displays. Some browsers request this size on 2× screens.
• 128 × 128 — macOS Dock and high-resolution desktops. Good for cross-platform app icon sets.
• 256 × 256 — Windows Vista+ large icon view. Maximum ICO size; PNG-in-ICO is required at this size for 32-bit colour.

For most favicon workflows, leave the selector at 32 × 32 and proceed.

Step 5: Preview the Icon

Click Preview Crop. The preview modal opens showing the cropped region resampled to the chosen icon size, displayed larger for visibility. The title shows the exact output dimensions (e.g., "Icon Preview — 32 × 32 px"). Use this to verify:

• The icon content is legible and recognisable at the chosen size. At 32×32, the mark should be immediately identifiable — if it looks cluttered, either simplify your crop or choose a larger output size.
• Transparent areas show through to the modal background — confirming the alpha channel will be preserved in the ICO.
• The framing is centred and balanced with appropriate padding.

Close the preview and adjust the crop or size selection if needed.

Step 6: Convert & Download the ICO

When you are satisfied, click Convert & Download ICO. The tool:

1. Draws the selected pixel region to an off-screen canvas resampled to the chosen icon size (e.g., 32×32), preserving alpha.
2. Calls canvas.toBlob('image/png') to get the PNG image bytes.
3. Reads the PNG bytes into an ArrayBuffer via FileReader.
4. Constructs the ICO binary: a 6-byte ICONDIR header, a 16-byte ICONDIRENTRY (with the PNG byte count and data offset), followed immediately by the raw PNG bytes.
5. Creates a Blob of type image/x-icon and triggers a browser download.

The file downloads as [original-filename]_crop_32x32.ico (or whichever size you selected). For a source file named logo.webp at 32×32, the output is logo_crop_32x32.ico. No server round-trip occurs.

Deploying Your Favicon

Once you have your favicon.ico, place it at the root of your web server so browsers find it automatically when they request /favicon.ico. You can also explicitly reference it in your HTML <head>:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/favicon-180.png">

The favicon.ico covers legacy browsers and any context that requests the ICO format. The SVG favicon covers modern browsers with scalable rendering. The PNG covers Apple touch icons. This three-file approach provides complete favicon coverage across all browsers and devices.

Step 7: Start Over (Optional)

To crop and convert a different WebP, 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. ICO frames are square. Cropping to a square region before converting ensures your mark fills the full icon canvas without distortion.
• 32×32 for favicon, 48×48 for Windows app icons. These two sizes cover the most common use cases. Generate both if you need a favicon and a Windows application icon from the same source.
• Transparency is fully preserved. The tool produces a 32-bit PNG-in-ICO with full alpha channel support. Logos with transparent backgrounds will have clean, crisp edges in the icon.
• Simple marks work best at small sizes. At 16×16 or 32×32, only the simplest designs remain legible. If your logo has fine detail or thin lines, they may disappear entirely at icon scale. Test the preview at 16×16 to see what survives.
• Works entirely offline after load. ICO construction uses only native JavaScript APIs — no external library is needed. Once the page has loaded, the tool works without an internet connection.