Preparing a 32×32 PNG Favicon on a Pixel Grid

The short answer

A 32×32 PNG favicon is a small raster image, 32 pixels wide and 32 pixels high. Browsers display it in tabs, bookmarks and similar places. You usually create it from a vector logo, but you cannot just shrink the full logo and export it. To get a crisp result, prepare the artwork on a 32×32 pixel grid. Simplify the mark, align its edges to whole pixels, and check the exported PNG at its actual size.

This article covers that process: moving from scalable vector artwork to a fixed-size raster file. It draws only on general, verifiable design and web principles. No product-specific figures, tool benchmarks or test results were available, so none are given here.

Vector source versus raster output

Vector artwork describes shapes as paths, so it scales without losing quality. A PNG is a grid of pixels with a fixed resolution. At 32×32 there are very few pixels, and any edge that falls between two pixel columns or rows gets anti-aliased into a soft, blurry band. Pixel-grid refinement means adjusting the vector shapes so their important edges land on whole-pixel boundaries before you export.

Confirm that your source file really contains editable vector paths. A file extension or filename is not proof. A file saved in a vector format can still hold an embedded raster image, or only a raster preview. Inspect it in a vector editor: check that the shapes are selectable paths and not a placed bitmap. If the source is raster only, you will be redrawing or tracing it, not refining it.

Preparing the artwork on a 32×32 grid

• Choose a simplified mark. A full logo with a wordmark, taglines or fine detail rarely reads at this size. A symbol, monogram or single initial usually works better.
• Set up a 32×32 artboard with a 1-pixel grid and enable snapping to pixel or grid, if your editor offers it.
• Align straight horizontal and vertical edges to whole-pixel positions so they render as solid pixels without soft halves.
• Use whole-pixel stroke and gap widths where you can. Thin lines and narrow counters tend to fill in or vanish.
• Remove or merge details that fall below one pixel. Gradients, hairlines and small text generally do not survive.
• Keep strong contrast between the mark and its background. Remember that the icon may appear on both light and dark browser interfaces.
• Decide how much padding to leave around the mark, and judge it visually at actual size, not at zoom.

Curves and diagonals cannot sit perfectly on a pixel grid, so some anti-aliasing is unavoidable. The aim is to make the defining edges sharp and the overall silhouette recognizable, not to remove every soft pixel.

Exporting and checking the PNG

Export the artboard as a PNG at exactly 32×32 pixels. If the icon should not sit on a solid block of color, keep the background transparent. View the exported file at 100% zoom, not enlarged. Ideally, also view it in a real browser tab. On high-density screens the browser may scale the icon, so many sites also provide larger versions alongside the 32×32 file. Each of those sizes benefits from its own grid check, not a simple resize.

To reference the PNG in a page, use a link element in the document head. Set rel to icon, type to image/png and sizes to 32x32, and point it at the file's location on your site. Exact browser behavior and the full set of recommended sizes vary and change over time. Check current browser documentation instead of relying on a fixed list.

Rights when the logo is not yours

If you are working from a logo you downloaded, being able to download it does not mean you may modify it. Simplifying or redrawing a mark for a favicon changes the artwork. Using it to represent a site can raise trademark questions, and any fonts in the original may carry their own license terms. Confirm that you have permission for the specific use, especially if the site is not owned by or affiliated with the brand.

Gaps in this overview

No specific logo, editor or export tool was identified, so this article does not compare software features or give tool-specific steps. It also includes no measured results, such as file sizes or rendering tests. Treat the workflow above as general practice, and confirm the details in the tools and browsers you actually use.