How to Crop & Convert DDS to ICO: Step-by-Step Tutorial
🚀 Follow along with the tool open. DDS to ICO Crop Converter — free, in your browser.
Open Tool →Overview
This tutorial walks through every step of cropping a DDS game texture and converting it to a multi-size ICO icon file using the Data Conversion Center DDS to ICO Crop Converter. The entire process takes under two minutes and requires no software installation. Your texture never leaves your device — all DDS decoding, cropping, and ICO encoding runs in the browser.
The output is a standard multi-size ICO containing PNG frames at 16, 32, 48, 64, 128, and 256 pixels — the full set needed for Windows application icons, taskbar entries, and browser favicons. ICO encoding is supported in all modern browsers, so no special configuration is needed.
Step 1: Open the Tool
Navigate to dataconversioncenter.com/image-tools/dds-to-ico-crop/ in any modern browser. The tool works in Chrome, Firefox, Edge, and Safari on desktop and mobile. No sign-in, no extension, and no download required. ICO encoding uses the browser's built-in canvas.toBlob('image/png') API, which is universally supported — unlike AVIF, there are no browser compatibility restrictions for ICO output.
Step 2: Load Your DDS File
You have two options for loading your source texture:
- Drag and drop. Drag a DDS file from your file manager directly onto the drop zone in the tool. The file decodes immediately when you release it.
- Browse. Click anywhere on the drop zone (or the "Browse Files" link) to open your OS file picker. Select your DDS file and click Open.
As soon as the texture loads it appears in the source panel with the crop handles visible at the full texture boundary. The format info bar below the source shows the detected DDS compression type — for example, DDS format: DXT5/BC3 or DDS format: BC7. The tool supports DXT1 (BC1), DXT3 (BC2), DXT5 (BC3), BC4, BC5, BC7, and uncompressed RGBA/BGRA/RGB DDS layouts, including DX10-extended files. No manual format selection is needed — the decoder reads the DDS file header automatically.
Step 3: Adjust the Crop Area
The crop overlay has eight handles: four blue circles at the corners and four rounded rectangles at the midpoints of each edge. Here is how each behaves:
- Corner handles (NW, NE, SW, SE). Drag a corner to resize in both dimensions simultaneously. This is the most versatile handle for free-form crop adjustments — drag the bottom-right corner inward to shrink from that corner, or outward to expand.
- Edge handles (N, S, W, E). Drag an edge handle to move only that boundary. The top edge handle moves the top boundary without changing the left, right, or bottom edges — useful for trimming one side precisely.
- Interior pan. Click and drag anywhere inside the crop rectangle (not on a handle) to slide the entire selection to a different position on the texture without changing its dimensions. Use this to fine-tune placement after setting the crop size.
As you drag, two indicators update in real time:
- The crop dimensions badge in the source panel header shows the output size in native texture pixels (e.g., 256 × 256 px). This is the pixel count at full DDS resolution, not the display size on screen.
- The info bar below the source canvas shows the crop rectangle's origin and extent coordinates in full-resolution pixels (e.g., Crop: 128, 0 → 384, 256 px).
Step 4: Preview the Crop
Before downloading, click 👁 Preview Crop. A modal window opens showing the cropped region rendered at full browser width. The modal title shows the exact output dimensions — for example, Crop Preview — 512 × 512 px. Use this to check:
- That important edge content is not clipped by the crop boundary
- That the composition is centered or framed as intended
- That any transparent areas (alpha channel) look correct
Close the preview with the × button or by clicking outside the modal. Return to the handles and adjust as needed. You can preview as many times as you like at no cost.
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:
- Maps the crop rectangle from display coordinates back to full DDS resolution coordinates.
- Draws the selected pixel region onto an off-screen canvas at full texture resolution using
drawImagewith source rectangle parameters. - Creates six additional canvases at 16, 32, 48, 64, 128, and 256 px and scales the cropped content onto each.
- Calls
canvas.toBlob('image/png')on each sized canvas to produce lossless PNG byte buffers. - Assembles the buffers into a valid ICO container: a 6-byte header, a 16-byte directory entry per frame, then the concatenated PNG data.
- Creates a Blob URL for the assembled ICO and triggers a browser download.
The file downloads as [original-filename]_crop.ico. For a source file named game_logo.dds, the output is game_logo_crop.ico. The download is immediate — there is no server round-trip, no waiting for an upload, and no expiry link.
Step 6: Start Over (Optional)
To crop a different DDS file, click ↺ Start Over. This clears the current decoded texture, resets the crop handles, and returns the tool to its initial drop zone state. You can then load a new DDS file and repeat the process.
Using the ICO File
As a favicon. Place the downloaded ICO at your web server root (typically as favicon.ico) and add the link tag to your HTML <head>. Browsers will automatically select the correct size frame — 16px for tab favicons, 32px for bookmarks, and larger for high-DPI contexts.
As a Windows application icon. In Visual Studio, right-click your project, go to Properties → Application → Icon, and browse to the ICO file. For Electron apps, set the icon property in your BrowserWindow configuration. NSIS and Inno Setup installers accept ICO files in their icon directives. The six-size ICO produced by this tool satisfies all Windows shell icon requirements.
As a desktop shortcut icon. Right-click a Windows shortcut, choose Properties → Change Icon, and browse to the ICO file. All six embedded sizes will be available for Windows to select from.
Tips for Best Results
- Preview before downloading. It is faster to preview and adjust a handle than to discover a composition issue after opening the ICO in an icon editor.
- Watch the dimensions badge. Icon sizes are often expected to be square. If the badge shows an asymmetric crop (e.g., 300 × 512 px) the ICO frames will be non-square and may appear letterboxed or stretched in some icon contexts. Adjust handles to a square or near-square crop for best results.
- Prefer DXT5 or BC7 sources for smooth alpha. DXT1 textures carry only 1-bit alpha, which produces jagged edges on icon artwork with smooth transparency. If your source is DXT1 and the icon requires smooth alpha, check whether a DXT5 or uncompressed version of the same texture is available.
- Crop to content, not to a pixel count. Set the crop to capture the correct content first. The ICO encoder will scale the cropped area to all six standard sizes — you do not need to crop to an exact pixel dimension for ICO output.
- Trim power-of-two padding. Game textures are often padded to the next power of two (e.g., a 96×96 logo padded to 128×128). Crop to the actual logo boundary before downloading to avoid empty padding in your icon frames.
- Check the format info bar. The detected DDS format (e.g., DXT5/BC3 or BC7) is shown below the source canvas. This tells you what alpha and quality to expect in the output. BC7 and DXT5 generally produce the cleanest ICO results from game textures.
✍ Ready to crop your DDS texture and download a multi-size ICO?
Open DDS to ICO Crop Converter →