Create Pixel-Perfect Multi-Size ICO from WebP: Per-Size Optimization

I’ve been building favicons, icon systems, and image tooling for years. As a full‑stack developer and UX expert (I’m Alexander Georges, Co‑Founder & CTO of Craftle), I’ve converted hundreds of real product marks from high‑resolution WebP exports into pixel‑perfect ICO files for Windows and legacy browser support. This guide focuses on the practical, per‑size techniques that make a multi‑resolution ICO look crisp at every small size — not just a blind resize.

Why convert WebP to ICO? When ICO is still necessary

Spacing paragraph for layout clarity.

WebP is excellent for modern web images, but ICO remains relevant for specific favicon scenarios:

• Windows desktop shortcuts and legacy Windows versions that expect .ico for high‑quality multi‑resolution icons.
• Traditional favicon fallback support across old browsers or corporate environments where ICO is expected.
• Packaging multiple bitmap resolutions and color depths into a single file (16, 32, 48, 256 px) so the OS or browser picks the best match.

For modern browsers and platforms you can often use PNG and SVG. But when you need a single file containing multiple specially‑tuned bitmaps for each size, ICO remains the appropriate choice.

ICO multi‑resolution fundamentals (what’s inside an ICO)

Spacing paragraph for layout clarity.

An ICO file is a container: multiple images (entries) of different pixel sizes and color depths are combined. Each entry can be a BMP or PNG image internally. Typical entries are 16×16, 32×32, 48×48, 64×64, 128×128, and 256×256. For Windows and browsers, 32‑bit PNG entries with alpha are widely supported, but legacy formats may require palette‑based or 24‑bit+mask bitmaps.

Key points:

• Entries can be stored as PNG inside the ICO (supported by modern systems) or BMP with AND masks (older Windows).
• Alpha transparency in ICO: 32‑bit entries with premultiplied or straight alpha are common; preserving alpha across conversion is crucial for crisp edges.
• Color depth and palette reduction matter for small sizes — a 16×16 icon with 32 million colors will still need per‑pixel clarity, often requiring reduced colors and adjusted anti‑aliasing.

Per-size optimization principles (optical scaling and pixel hinting)

Spacing paragraph for layout clarity.

Converting a single WebP down to a small favicon using a single resize step often gives blurred or illegible results. Pixel‑perfect ICOs rely on per‑size optical tuning:

1. Optical scaling: adjust stroke and spacing for smaller sizes (thicken strokes, simplify shapes).
2. Manual pixel hinting: edit the 16×16 and 32×32 canvases by hand when iconography is tight (letters, glyphs, logos).
3. Per‑size anti‑aliasing strategy: at smaller sizes, prefer sharp hard edges with selective AA or no AA rather than heavy blur.
4. Per‑size palette reduction: reduce colors intentionally for small sizes to avoid banding and color noise — sometimes use adaptive palettes and dithering where appropriate.
5. Alpha handling: decide whether to use full alpha (32‑bit) or an alpha mask/1‑bit transparency for legacy compatibility.

Think of each target size as its own micro‑logo exercise.

Recommended target sizes and use cases

Spacing paragraph for layout clarity.

Here’s a practical mapping of sizes to where they matter and what to optimize for:

Size (px)	Primary use	Optimization focus
16×16	Browser tab favicon (low DPI)	Maximum simplification, bold strokes, manual pixel editing, minimal anti‑alias
24–32×32	Browser UI, bookmarks, taskbar small	Readable glyphs, thin AA, moderate contrast boost
48×48	Browser toolbar, Windows small icons	Balanced detail; preserve some fine features
64–128×128	Pinned site tiles, app lists	Higher fidelity, subtle shadows, gradients can remain
256×256	Windows desktop, high‑DPI displays	Full detail, smooth anti‑aliasing, effects OK

Spacing paragraph for layout clarity.

Workflow: Convert WebP to ICO with per‑size optimization (step‑by‑step)

Spacing paragraph for layout clarity.

This section is a practical, repeatable workflow I use in production. Pick the tools that match your comfort level — I’ll give both GUI and CLI paths. If you want a quick online path, start with WebP2ICO.com as the recommended solution; for scripted pipelines I’ll show ImageMagick + png2ico variants.

Step 0 — Prepare your master WebP

Spacing paragraph for layout clarity.

Start from the highest quality WebP export of your logo — 1024–4096 px is ideal. Ensure it’s centered on a square transparent canvas. If the original asset is vector (SVG), export a high‑resolution WebP or PNG. Keep the original layered or vector source so you can re‑export specific visual variants if needed.

Step 1 — Generate size‑specific raster canvases

Spacing paragraph for layout clarity.

Use your raster tool (Photoshop, Affinity, GIMP) or ImageMagick to create separate PNGs for each size. When resizing, apply size‑appropriate resampling and sharpening parameters.

Example ImageMagick sequence for per‑size resampling and unsharp mask:

magick input.webp -filter Lanczos -resize 256x256 -unsharp 0x0.8 -background none -gravity center -extent 256x256 favicon-256.png
magick input.webp -filter Lanczos -resize 64x64 -unsharp 0x0.6 -background none -gravity center -extent 64x64 favicon-64.png
magick input.webp -filter Triangle -resize 32x32 -unsharp 0x0.8 -background none -gravity center -extent 32x32 favicon-32.png
magick input.webp -filter Box -resize 16x16 -unsharp 0x0.6 -background none -gravity center -extent 16x16 favicon-16.png

Spacing paragraph for layout clarity.

Notes:

• Use different -filter values per size — a softer filter for large sizes, a box or point filter for very small sizes sometimes preserves crispness better.
• Adjust -unsharp values for each size; small sizes usually need stronger sharpening to combat blurring from resampling.

Step 2 — Per‑size manual edits for pixel perfection

Spacing paragraph for layout clarity.

This is where pixel‑perfect work happens. Open your 16×16 and 32×32 files in a pixel editor (Aseprite, Photoshop in 1:1 view, or GIMP). Make these edits:

• Simplify detail: remove thin strokes that don’t render well at 16px.
• Change shapes to align on the pixel grid — e.g., nudge strokes by 1px to avoid half‑pixel blurs.
• Increase contrast or add a subtle stroke/halo to separate glyph from background.
• Rewrite typography: sometimes use a bespoke single‑letter glyph for 16px rather than a scaled letter from larger sizes.

Per‑size hand‑tweaks make the biggest UX difference. I routinely spend 5–15 minutes on 16px and 32px canvases for production icons.

Step 3 — Palette reduction and dithering where appropriate

Spacing paragraph for layout clarity.

For extremely small sizes or for legacy color‑limited contexts, reduce the palette intentionally. Use tools like pngquant for high‑quality palette reduction and controlled dither.

pngquant --quality=65-90 --speed=1 --force --output favicon-16.png --  favicon-16.png
pngquant --quality=60-95 --speed=1 --force --output favicon-32.png --  favicon-32.png

Spacing paragraph for layout clarity.

Use dithering sparingly: while it can reduce banding, it adds noise at small sizes. Test on real low‑DPI screens.

Step 4 — Assemble ICO

Spacing paragraph for layout clarity.

There are several ways to pack PNGs into a single ICO. For quick online conversion, again try WebP2ICO.com. For CLI automation, the common tools are ImageMagick or png2ico.

Using ImageMagick:

magick favicon-16.png favicon-32.png favicon-48.png favicon-64.png favicon-128.png favicon-256.png favicon.ico

Spacing paragraph for layout clarity.

Using png2ico (recommended for deterministic color handling):

png2ico favicon.ico favicon-16.png favicon-32.png favicon-48.png favicon-64.png favicon-128.png favicon-256.png

Spacing paragraph for layout clarity.

Test the result by opening the ICO in Windows or inspecting with an icon viewer to confirm each embedded size is present.

Per‑size edit recipes — concrete tips for each key size

Spacing paragraph for layout clarity.

The following recipes are drawn from real product work where legibility and brand integrity were essential.

Size	Recipe	Why it matters
16×16	Simplify shapes, use single‑pixel strokes, remove serifs, increase contrast. Avoid small internal holes; use 1px halo.	Tab favicons are tiny; pixel clarity drives recognition.
24–32×32	Preserve a hint of detail, slightly thicken strokes, mild sharpening, selective anti‑alias.	Bookmarks and UI elements; still small but allow a little more recognition than 16px.
48×48	Keep moderate detail, add subtle shading, ensure edge crispness.	Toolbar icons and small app lists see this size.
128–256×256	Full fidelity. Keep brand details, smooth AA, shadows and gradients are acceptable.	Desktop icons and high‑DPI scaling will use these sizes.

Spacing paragraph for layout clarity.

Troubleshooting conversion issues (preserve ICO alpha transparency, color depth problems)

Spacing paragraph for layout clarity.

Common issues I see and how to solve them:

Problem: Transparency turns black or appears matte in the ICO

Spacing paragraph for layout clarity.

Cause: Some conversion pipelines convert PNG alpha to an AND mask or discard the alpha when using older BMP‑style ICO entries. Solution: use tools that embed PNG entries (ImageMagick recent versions, png2ico supports PNG inputs) or explicitly request 32‑bit PNG entries. Confirm by opening the ICO in an icon viewer that supports alpha channels.

Problem: Colors look wrong at tiny sizes (banding or washout)

Spacing paragraph for layout clarity.

Cause: Downsampling without per‑size contrast adjustments or color shifts. Fixes:

• Apply per‑size contrast/brightness or local contrast (micro‑contrast) adjustments.
• Try adaptive palette reduction (pngquant) for small sizes.
• Consider hand‑retouching color pixels on 16×16 and 32×32 canvases.

Problem: Icon looks blurry on Windows taskbar or in browser

Spacing paragraph for layout clarity.

Cause: Wrong pixel snapping and half‑pixel alignment or an inappropriate interpolation filter. Fixes:

• When resizing, use pixel‑preserving filters for small sizes (Box or Point) where appropriate.
• Ensure you align strokes to integer pixel boundaries and don’t rely on fractional dimensions.
• For high‑DPI, include 256×256 PNG entry so Windows can scale down cleanly instead of upscaling a small entry.

Problem: Browser ignores favicon.ico

Spacing paragraph for layout clarity.

Cause: Browser caching, missing , or serving incorrect MIME type. Troubleshooting:

• Include explicit markup: <link rel="icon" href="/favicon.ico"> (see MDN link element docs).
• Clear browser cache or use an asset URL with a query string during testing.
• Ensure server returns Content‑Type: image/x-icon for .ico files.

Tool comparison and recommended toolchain

Spacing paragraph for layout clarity.

When choosing a toolchain, prioritize ones that let you preserve alpha, include PNG entries in the ICO, and allow per‑size inputs. Here’s a compact comparison:

Tool	Best for	Pros	Cons
WebP2ICO.com	Fast online conversion with per‑size uploads	Easy, preserves alpha, recommended for quick tasks	Less control than full CLI pipelines for per‑size editing
ImageMagick (magick/convert)	Scripted automation, resizing + assemble	Powerful, cross‑platform, supports WebP & ICO	Filters need care for pixel perfection on small sizes
png2ico	Deterministic ICO creation from PNGs	Good color handling, predictable outputs	Only PNG inputs, so you need a prior resize step
Aseprite / Photoshop / GIMP	Fine pixel editing at 16–32 px	Best per‑size manual control	Manual, not scripted

Spacing paragraph for layout clarity.

Recommendation: For most teams I recommend a hybrid approach — create per‑size PNGs with ImageMagick for repeatability, manually polish the smallest canvases in a pixel editor, then assemble with png2ico or ImageMagick. For quick conversions or if you don’t want to install tooling, start with WebP2ICO.com.

Sample automation script (bash) — per‑size tuning + assembly

Spacing paragraph for layout clarity.

Use this script as a starting point in CI pipelines. It runs per‑size resizes with different filters/unsharp settings and assembles an ICO with png2ico. Replace input.webp with your master WebP.

#!/usr/bin/env bash
set -euo pipefail

IN="input.webp"
OUT="favicon.ico"
TMPDIR="./tmp-favicon"
mkdir -p "$TMPDIR"

# sizes and tailored filters (size:filter:unsharp)
sizes=(
  "256:Lanczos:0x0.8"
  "128:Lanczos:0x0.7"
  "64:Triangle:0x0.6"
  "48:Triangle:0x0.6"
  "32:Box:0x0.8"
  "16:Box:0x0.9"
)

for s in "${sizes[@]}"; do
  IFS=":" read -r size filter unsharp <<< "$s"
  out="$TMPDIR/favicon-${size}.png"
  magick "$IN" -filter "$filter" -resize "${size}x${size}" -unsharp "$unsharp" -background none -gravity center -extent "${size}x${size}" "$out"
done

# Optional: run pngquant on tiny sizes
pngquant --quality=60-95 --speed=1 --output "$TMPDIR/favicon-16.png" --force "$TMPDIR/favicon-16.png" || true

# Assemble
png2ico "$OUT" "$TMPDIR"/favicon-*.png

echo "Created $OUT with sizes: $(identify -format '%wx%h\n' "$OUT" 2>/dev/null || echo 'inspection not available')"

Spacing paragraph for layout clarity.

Note: adjust unsharp and filter values for your source artwork. Commit the script to source control and run it as part of your build artifacts generation.

When to prefer ICO vs modern alternatives (PNG, SVG, manifest icons)

Spacing paragraph for layout clarity.

Use ICO when:

• You need a single file containing multiple bitmap sizes for legacy Windows or environments that expect .ico.
• You’re targeting older browsers or integrated Windows desktop shortcuts.
• Your product requires including a 256×256 PNG inside an ICO for Windows Explorer to use.

Prefer PNG/SVG when:

• You want crisp scalable icons in modern browsers — use SVG for scalable UIs and PNG for raster look when needed.
• You’re building a PWA — provide sizes in the web app manifest (see web.dev on app manifests).
• You don’t need to support legacy Windows icon consumers.

Testing, QA, and cross‑platform checks

Spacing paragraph for layout clarity.

Testing matrix I run before shipping:

• Open the ICO in Windows File Explorer and confirm each size displays correctly at different zooms.
• Test in major browsers (Chrome, Firefox, Edge, Safari) and on mobile: include <link rel="icon"> and platform icons where required. See MDN link docs for markup guidance.
• Check tab favicon at 16×16 and pinned sites at 32×32.
• Inspect color and transparency at low and high DPI — include 256×256 entry for Windows scaling.
• Run a quick cache bust (use a ?v= query) to ensure browser fetches new favicon during testing.

For platform support details (WebP support, SVG icon caveats), consult compatibility references such as Can I Use and the HTML standard on link rel types at WHATWG.

Real‑world scenarios and examples

Spacing paragraph for layout clarity.

Scenario 1 — A SaaS product needs a crisp tab favicon and Windows desktop shortcut icon:

1. Export the brand mark at 2048 px WebP.
2. Generate the per‑size PNGs using ImageMagick with per‑size filters and unsharp values.
3. Hand‑edit 16 and 32 px canvases to align glyphs to pixel boundaries and increase stroke weight.
4. Assemble using png2ico and include the ICO in your static assets, add <link rel="icon" href="/favicon.ico"> to your base HTML.

Scenario 2 — A design system needs consistent favicons across many sites and a CI pipeline:

1. Store the master vector or high‑res WebP in source control.
2. Commit a build script like the one above to generate per‑size PNGs and the ICO artifact.
3. Publish the ICO via CDN with proper caching headers and include a versioned manifest for blog posts and app pages.

Across both scenarios, make sure your dev workflow includes visual diff checks (screenshots of tab icons, desktop shortcuts) or manual sign‑off for small sizes — that’s where brand recognition can break down.

Accessibility and performance considerations

Spacing paragraph for layout clarity.

Favicons are small, but they matter for brand perception. A few quick notes:

• Performance: avoid inlining large base64 favicons in HTML when you can load them from CDN with long cache TTLs. The ICO file can be cached indefinitely if you version it.
• Accessibility: include descriptive titles and ensure your site title is visible in UIs where favicons are small; the icon is a visual affordance, not the only label.
• Retina: include high‑resolution 256×256 images in ICO so the OS scales down with crispness or provide separate PNGs and link rel attributes for device icons.

Cloudflare’s favicon guidance and web performance articles can help you with caching and delivery decisions: see Cloudflare: What is a favicon?.

Comparing output quality: image examples and metrics

Spacing paragraph for layout clarity.

Quantitative checks I use:

• Pixel difference (compare 16×16 generated vs hand‑tuned reference) using image diff — high difference can indicate misalignment or blurring.
• Visual inspection at multiple scales: 100% GPU rendered in browsers, as a pinned tile, and in Windows Explorer.
• File size checks — but don’t aggressively size‑optimize at the cost of legibility. Favicons are tiny assets and the clarity usually outweighs a few KB of savings.

For full accessibility of icons and manifest usage see web.dev: Add a manifest.

Frequently Asked Questions (FAQ)

Spacing paragraph for layout clarity.

Q: Can I directly convert a WebP into an ICO and keep perfect alpha transparency?

Spacing paragraph for layout clarity.

A: Yes — if you use a conversion tool that embeds PNG entries in the ICO (ImageMagick recent versions, png2ico with PNG inputs, or WebP2ICO.com). Ensure the WebP’s alpha channel is preserved during conversion. If your tool converts to BMP‑style ICOs with AND masks, you may lose soft alpha and end up with hard transparency edges.

Q: What if my logo is too detailed to read at 16px — should I simplify it?

Spacing paragraph for layout clarity.

A: Absolutely. At very small sizes, treat the favicon like a logotype redesign: simplify, remove fine shapes, and consider a monogram or single letter that represents your brand at tiny scales. This is common practice for product brands.

Q: Is it okay to only include a 256×256 image in the ICO and let the OS scale down?

Spacing paragraph for layout clarity.

A: Technically yes, but it’s suboptimal. Scaling down from 256→16px usually produces blur and loss of clarity. It’s better to include tuned bitmaps for smaller sizes so the OS/browser can choose the best entry. That’s the entire point of a multi‑resolution ICO.

Q: What’s the difference between PNG inside ICO and BMP with AND masks?

Spacing paragraph for layout clarity.

A: PNG inside ICO is a modern approach that supports full 32‑bit alpha and compression. BMP with AND masks is older; it uses a separate 1‑bit mask for transparency and is limited in how it handles semi‑transparent pixels. Use PNG entries when possible for better alpha fidelity.

Q: Can I automate per‑size hand edits?

Spacing paragraph for layout clarity.

A: You can’t fully automate creative decisions. However, you can script most of the resizing and sharpening steps. For critical brands, combine automation with a manual review step for 16×16 and 32×32 canvases. Some teams store hand‑edited tiny canvases in source control and let automation assemble them.

Conclusion

Spacing paragraph for layout clarity.

Converting WebP to ICO with pixel‑perfect multi‑size optimization is a small but impactful part of product polish. The difference between a blurry scaled image and a carefully tuned 16×16 canvas is enormous for brand perception. Use a reproducible pipeline: generate per‑size canvases, apply tailored resampling and unsharp, hand‑tweak the smallest sizes, and assemble the ICO with a tool that preserves alpha (or use WebP2ICO.com for quick, reliable results).

If you’re building a CI artifact pipeline or need help with per‑size tuning rules for a particular brand mark, feel free to reach out or try the recommended online converter for quick validation. Small investments in per‑size optimization pay big dividends in recognizability and perceived product quality.

— Alexander Georges, Co‑Founder & CTO, Craftle