How to Crop & Convert TGA 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 TGA image and converting it to a multi-size ICO file using the Data Conversion Center TGA to ICO Crop Converter. The output is a single ICO file containing up to four size tiers — 256×256, 128×128, 64×64, and 32×32 pixels — each encoded as a 32-bit PNG-in-ICO with full alpha-channel transparency. The ICO is ready to use as a website favicon or Windows application icon. The entire process takes under two minutes and your image never leaves your device.

Step 1: Open the Tool

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

You have two options for loading your source image:

• Drag and drop. Drag a TGA file (with a .tga extension) from your file manager directly onto the drop zone. The image 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 TGA and click Open.

The built-in TGA decoder handles uncompressed and RLE-compressed TGA files at 8, 16, 24, and 32 bits per pixel. As soon as decoding completes, the image appears in the source panel with the blue crop handles set to the full image boundary.

Step 3: Crop a Square Region

ICO size tiers are always square, so the best practice is to crop a square region for icon use. The crop overlay has eight handles:

• Corner handles (NW, NE, SW, SE). Drag to resize the crop in both dimensions simultaneously. For a square crop, watch the crop dimensions badge and drag until width equals height.
• Edge handles (N, S, W, E). Drag to adjust only one edge at a time — useful for fine-tuning the crop boundary after setting the initial square.
• Interior pan. Click and drag anywhere inside the crop rectangle (not on a handle) to reposition the entire selection without changing its dimensions.

The crop dimensions badge in the panel header updates in real time to show the output pixel dimensions. Aim for equal width and height for the best icon output. The info bar below the panel shows exact pixel coordinates.

Tip: For the best multi-size ICO, start from a crop of at least 256×256 pixels so all four size tiers can be generated. Tiers larger than your crop dimensions are skipped automatically.

Step 4: Preview the Crop

Before converting, click Preview Crop. A pop-up opens showing the cropped region at browser width, with the title displaying the exact output dimensions. Use this to verify:

• The icon element is cleanly centred and no important detail is clipped at the edges.
• Any transparent background from a 32-bit TGA renders as expected — transparency is fully preserved in the ICO output.
• The crop is approximately square for correct rendering in all icon contexts.

Close the preview and adjust handles if needed before proceeding.

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. Determines which size tiers to generate based on the crop dimensions (256, 128, 64, 32 px — tiers larger than the crop are skipped).
2. For each tier, draws the cropped region onto a separate off-screen canvas scaled to the target size using drawImage.
3. Encodes each scaled canvas as a 32-bit PNG using toBlob('image/png').
4. Assembles all PNG tiers into a valid ICO binary structure — ICONDIR header, ICONDIRENTRY records, and concatenated PNG data.
5. Downloads the ICO as a Blob named [original-filename]_crop.ico.

For a source file named logo.tga, the output is logo_crop.ico. No server round-trip occurs at any point.

Step 6: Deploy the ICO as a Favicon

To use the downloaded ICO as a website favicon:

1. Rename the file to favicon.ico and place it in the root directory of your website.
2. Add the following line to the <head> section of your HTML:

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

The sizes="any" attribute tells browsers the ICO contains multiple sizes — the browser automatically selects the best tier for each display context (browser tab, bookmark bar, taskbar). No additional configuration is needed.

Step 7: Start Over (Optional)

To crop and convert a different TGA, click ↺ Start Over. This clears the current image, resets the crop handles, and returns the tool to its initial drop zone state ready for a new file.

Tips for Best Results

• Always crop a square region. ICO tiers are always square. Non-square crops are scaled to fit each square tier target, which distorts the content. Equal width and height in the crop dimensions badge means a perfect square.
• Start from at least 256×256 px. A crop smaller than 256×256 will skip the larger tiers. For a favicon that looks sharp at every display size, use a source crop of at least 256 pixels on each side.
• Transparency is preserved. Each size tier is encoded as a 32-bit PNG-in-ICO, preserving full alpha-channel transparency from 32-bit TGA sources. No background colour is composited.
• Preview before converting. Check that the icon element is well-centred and cleanly cropped before generating the ICO — it is faster to adjust handles than to regenerate after noticing a problem.
• Verify in a browser tab after deployment. After placing the ICO on your server, open the site in Chrome and check the tab icon. It may take a browser cache refresh (hard reload) to display the new favicon.
• TGA source stays untouched. The tool reads your TGA and produces the ICO without modifying the original file in any way.