Overview
Introduction
This tool resizes a PNG icon to an exact target width and height, entirely in your browser using the HTML canvas API.
It's a straightforward way to hit a specific pixel size that a platform or app manifest requires.
What Is Icon Resizer?
A client-side icon resizer that reads an uploaded icon's pixel data and resamples it to a new width and height you specify, using nearest-neighbor sampling.
The output PNG's dimensions exactly match the target width and height you enter, regardless of the source icon's original size or aspect ratio.
How Icon Resizer Works
The tool validates that both target dimensions are whole numbers between 1 and 4096 pixels, then for every pixel in the new output buffer, maps its position back to the nearest corresponding pixel in the source image and copies that pixel's color.
No blending or interpolation happens between neighboring source pixels, so hard edges stay sharp rather than getting smoothed out.
When To Use Icon Resizer
Use it whenever you need an icon at a specific pixel size — app icons, favicons, and UI assets often require exact dimensions like 16x16, 32x32, or 512x512.
It's also useful for quickly previewing how a pixel-art or hard-edged icon looks scaled up or down.
Often used alongside Icon Cropper and Icon Rotator.
Features
Advantages
- Runs entirely client-side; the uploaded icon is never sent to a server.
- Nearest-neighbor sampling keeps pixel-art and hard-edged icons crisp rather than blurring them.
- Exact pixel-dimension control for hitting platform-required icon sizes.
Limitations
- Nearest-neighbor resampling can look blocky or aliased when significantly enlarging smooth, photographic, or gradient-heavy icons.
- Width and height are set independently, so mismatched values will stretch or squash the icon rather than preserving its aspect ratio automatically.
Examples
Best Practices & Notes
Best Practices
- Calculate proportional width/height yourself first if you want to preserve the source icon's aspect ratio.
- Preview the result before downloading, especially when upscaling, since nearest-neighbor can look blocky on smooth source content.
Developer Notes
The pure resize math is reused as-is from the base PNG Resizer's resizePng function (itself a thin, validating wrapper around the shared resizeNearest pixel-buffer helper, no DOM); this tool is a further thin, subject-relabeled wrapper (resizeIcon) around resizePng, since resizing an icon is identical pixel math to resizing any other PNG.
Icon Resizer Use Cases
- Producing a favicon or app icon at a required pixel size
- Scaling a pixel-art icon up for display at a larger size
- Standardizing a batch of icons to one consistent size
Common Mistakes
- Entering width/height values with a different ratio than the source, which stretches or squashes the icon unexpectedly.
- Assuming smoothing/interpolation happens automatically — nearest-neighbor deliberately keeps hard edges rather than blurring them.
Tips
- For platform icon requirements, check the exact required pixel size first, then enter that value directly rather than guessing.
- If the source icon has a different aspect ratio than your target, crop it to a square first with the Icon Cropper tool.