Upscale Pixel Art Without Blur: A Practical Guide for Pixel Favicons

The short answer

To upscale pixel art without blurring, resize it with nearest-neighbor resampling and a whole-number scale factor, such as 2×, 3× or 4×. Nearest-neighbor resampling, also called point sampling, copies each original pixel into a larger solid block of the same color instead of blending neighboring colors. A whole-number factor makes every source pixel become a square block of identical size, so the grid stays even. Smoothing methods such as bilinear or bicubic resampling are meant for photographs. On pixel art they average colors across edges and produce the soft, muddy result most people are trying to avoid.

If the icon also has to work as scalable logo artwork, you can rebuild it as vector paths. In this approach each pixel becomes a square shape aligned to a grid, and adjacent squares of the same color are merged. The result scales to any size and keeps its hard edges.

Why upscaling pixel favicons usually blurs

Most image editors and many export dialogs default to a smoothing resampling method. That method calculates new in-between colors at every edge, and on a small icon nearly every pixel sits on an edge. A non-integer scale factor, such as 1.5×, causes a second problem even with nearest-neighbor. Some source pixels become wider or taller than others, which makes the icon look uneven or jagged. Upscaling also cannot add detail that was never in the source. It only makes the existing pixels larger.

Step-by-step: enlarge a pixel favicon cleanly

• 1. Start from the original, smallest clean source. Use a lossless file such as PNG, not a screenshot or a JPEG, because compression artifacts get enlarged along with the art.
• 2. Work out a whole-number scale factor that reaches your target size. For example, a 16 × 16 source at 2× becomes 32 × 32. If the size you need is not an exact multiple, scale to the nearest multiple first. Then decide whether to pad the canvas or redraw the icon at that size.
• 3. Set the resampling method to nearest-neighbor. Photoshop calls it "Nearest Neighbor (hard edges)" in Image Size. GIMP calls it Interpolation "None" in Scale Image. Other editors may say "point," "pixel" or "no interpolation."
• 4. Scale the image once from the original, rather than in several rounds of resizing.
• 5. Export as PNG, or another lossless format, and check that transparency is preserved.
• 6. Package the favicon formats your project requires. This guide includes no confirmed size or format specification, so check the current documentation for the browsers and platforms you target.

Command-line option

For batch work, ImageMagick can enlarge with point sampling. Replace the file names and percentage to match your source and factor. Use 200%, 300% or 400% for 2×, 3× or 4×.

magick favicon-source.png -filter point -resize 400% favicon-4x.png

Turning pixel art into vector logo artwork

Standard auto-tracing is a poor fit for pixel art. Tracing tools try to guess smooth curves, so they round off corners and distort the stair-step edges that define the style. For a faithful vector version, set up a document grid where one grid unit equals one source pixel, and enable snapping. Then draw or generate one square per pixel. Combine same-colored squares into single compound shapes with a union or merge operation, so the file stays manageable and seams do not appear between shapes. Keep every anchor point on whole grid coordinates. Points between grid lines cause anti-aliasing seams when the vector is rasterized back to a small size.

An .svg or other vector extension does not prove that a file contains clean, editable paths. It also does not grant permission to reuse a logo. Some vector files simply wrap an embedded bitmap, so open the file and check its contents. Confirm usage rights separately.

Verify the result

• Zoom in to a high magnification. Each original pixel should show as a solid square block with no gradient fringe.
• Check that all blocks are the same size. Uneven blocks mean the scale factor was not a whole number.
• Sample colors at the edges with an eyedropper. You should find only colors from the original palette, with no new blended tones.
• Check transparent areas. Their edges should be crisp, not surrounded by semi-transparent halos.
• View the exported favicon at the sizes where it will actually appear, and compare it with the source at the same magnification.

When to redraw instead of upscale

Nearest-neighbor upscaling keeps the look of the original but leaves every pixel visibly blocky at large sizes. If a larger icon needs finer detail, or the target size is not a clean multiple of the source, redraw the icon by hand on the new grid. If the logo needs to scale freely across print and digital use, build the pixel-aligned vector version described above. The source material for this guide includes no measured comparison of these approaches, so judge them by viewing the output at its real display sizes.