Pixel Art Sizes: Choosing the Right Canvas for a Logo Favicon

The short answer

There is no single correct pixel art size. Choose the canvas size from the smallest size at which the icon will actually be displayed, and build a separate, hand-refined version for each small size you need. Do not shrink one large image to fit everything. For browser favicons, the long-standing convention is a square canvas of 16 by 16 pixels for the tab and 32 by 32 pixels for higher-density screens and other browser placements. Larger icons, such as home-screen or app tiles, follow each platform's current documentation. Confirm those sizes against the platform's own documentation rather than copying them from a general list.

In this context, a pixel art canvas is a raster grid where every cell is exactly one pixel when the icon is shown at actual size. A vector logo is built from mathematical paths and has no fixed resolution. Turning it into a small icon means fitting those paths onto a coarse grid. That fitting step is called pixel-grid refinement.

Why a vector logo cannot simply be scaled down

When a vector shape is rasterized, or converted to pixels, any edge that falls partway across a pixel is rendered as a blended, semi-transparent pixel. On a large canvas these blends are barely visible. On a very small grid they make thin strokes look grey and blurry and turn small counters, the enclosed spaces inside letters such as o or e, into smudges. Pixel-grid refinement fixes this by aligning edges to whole pixel boundaries, setting strokes to whole-pixel widths, and removing detail the grid cannot hold. A wordmark that reads well at full size usually needs to become a single letter, monogram or symbol at favicon sizes.

How canvas size relates to display size

• Design at the display size, not above it. A 16-pixel canvas has 16 cells across, and every design decision should be made with that limit in view.
• Use a square canvas for favicons and app-style icons. A non-square mark should be centered on the square, with padding left deliberately.
• Scale up only by whole-number multiples, such as two, three or four times, using nearest-neighbor resampling. That method copies pixels without blending them, so edges stay crisp. Fractional scaling mixes neighboring pixels and blurs the artwork.
• Treat each small size as its own drawing. A 32-pixel version can carry detail that must be dropped at 16 pixels, so it should not be a doubled 16-pixel file unless that deliberately blocky look is wanted.

Step by step: choosing and building the canvas

• List every place the icon will appear, such as a browser tab, bookmarks, a home screen or an app listing, and note each required pixel size from that platform's current documentation.
• Start with the smallest required size. It forces the most simplification, and larger versions can then add detail back.
• Create a square canvas at that exact pixel size and turn on a one-pixel grid, with snapping to the pixel grid if your vector editor offers it.
• Reduce the logo to its most recognizable element. Drop taglines, fine outlines and small text.
• Redraw or adjust paths so vertical and horizontal edges sit on whole-pixel lines and strokes are whole pixels wide. Accept that curves will become stepped.
• Limit the colors to strong contrasts, because subtle tints disappear at this scale.
• Repeat for each larger required size, refining each one on its own grid rather than resampling the smaller one.
• Export each size as a lossless raster file, such as PNG, at its exact dimensions. Package the files in the format your platform or build process asks for.

How to verify the result

• View each export at 100 percent zoom, not magnified, and check that it is still recognizable.
• Zoom in to check for stray half-tone pixels along straight edges. These mean an edge is not aligned to the grid.
• Preview the icon on both light and dark backgrounds, because browser tabs and system themes vary.
• Load the icon in a real browser tab and on a high-density screen if available, then compare it with neighboring site icons for legibility.
• Confirm that every file's pixel dimensions exactly match the target size.

Sourcing caveats

If you are working from supplied logo files, do not assume a file is fully vector or editable because of its extension. A vector-format file can contain embedded raster images, so open it and inspect the paths. Holding a logo file also does not by itself grant permission to adapt or reuse it, so confirm usage rights before producing derived icons.

Gaps in this guide

No platform-specific specifications were supplied for this guide. Apart from the widely used 16- and 32-pixel favicon convention, it does not list required sizes for app icons, home-screen icons or manifest files. Treat any size beyond those as something to confirm in the current documentation for each target platform. The workflow above is a design recommendation, not a documented requirement.