logoredraws.com

How to Prepare a 64×64 Favicon from a PNG

Turn a PNG logo into a crisp 64×64 favicon: start from the cleanest source, simplify the mark, align it to the pixel grid, export, and check the result.

Published

Contents
  1. The short answer
  2. Terms you need
  3. Step 1: Check your source and your right to use it
  4. Step 2: Decide what belongs in the icon
  5. Step 3: Build the icon on a 64×64 grid
  6. Step 4: Export the files
  7. Step 5: Verify the result
  8. Gaps to check yourself

The short answer

To turn a PNG into a 64×64 favicon, start from the cleanest, largest source you have. A vector original is best. Crop the logo to a square, simplify it so it still reads at a very small size, and align its edges to a 64×64 pixel grid. Then export a 64×64 PNG with transparency and, if your setup needs it, an ICO file. Finally, check the result at actual size. Simply scaling a large PNG down to 64×64 usually works technically, but it often produces soft edges and lost detail. Most of the quality comes from the grid-refinement step.

Terms you need

  • Pixel grid: the fixed matrix of square pixels in a raster image. A 64×64 favicon has 64 columns and 64 rows, and every edge must land somewhere on that grid.
  • Anti-aliasing: the partially colored pixels that software adds along edges that do not fall exactly on pixel boundaries. In moderation they smooth curves. In excess they make straight edges look blurry.
  • Pixel snapping (grid alignment): moving vector anchor points and edges so they sit on whole-pixel boundaries. Horizontal and vertical edges then render as sharp lines instead of gray fringes.
  • Artboard: the canvas area in a vector editor that defines the exported image bounds. Here it should be exactly 64×64.
  • ICO: a Windows icon container format that can hold one or more raster images in a single file. It is commonly used for favicons.

Step 1: Check your source and your right to use it

A PNG is a raster file. It stores pixels, not editable paths. If an SVG, AI, EPS or PDF version of the logo exists, use that instead. Paths can be redrawn and snapped cleanly at the target size, while pixels can only be resampled. A file extension does not prove what a file contains, though. An SVG or PDF may simply wrap an embedded raster image, so open it and confirm it contains real paths. The extension also says nothing about whether you may reuse the logo. Confirm permission with the logo owner before publishing a favicon based on it.

Step 2: Decide what belongs in the icon

Full logos rarely survive at 64×64. Fine text, thin strokes, taglines and small secondary elements turn into noise. Choose the most recognizable part of the identity, such as a symbol, monogram or initial, and drop the rest. This is a design recommendation, not a technical rule. Making the call at this stage avoids fighting unreadable detail later.

Step 3: Build the icon on a 64×64 grid

  • Create a square 64×64 artboard in your editor and turn on a 1-pixel grid with snapping.
  • Place the simplified mark so it fills the square sensibly, with consistent padding on all sides. The padding is a design choice. Whatever amount you pick, keep it visually balanced.
  • Snap straight horizontal and vertical edges to whole-pixel boundaries so they render crisply.
  • Thicken strokes and widen gaps that would otherwise blur into one or two pixels of gray.
  • Keep curves and diagonals smooth, and accept some anti-aliasing on them. Only straight orthogonal edges can be perfectly sharp.
  • If you only have a raster PNG, either trace the mark into vector paths and refine those, or resample to 64×64 and clean up stray edge pixels by hand in a raster editor.

Step 4: Export the files

Export a 64×64 PNG with a transparent background, unless the design calls for a solid tile. If you are working from a raster source and use ImageMagick, these commands resize a square PNG to 64×64 and then package it as an ICO. Resizing from a square image keeps the proportions intact. Otherwise, crop the image to a square first.

magick source.png -resize 64x64 favicon-64.png
magick favicon-64.png favicon.ico

Treat the automated resize as a starting point, not a finished icon. It does not perform the grid alignment described in Step 3. The best results come from exporting a grid-refined vector artboard directly at 64×64.

Step 5: Verify the result

  • Confirm the dimensions are exactly 64×64. For example, run: magick identify favicon-64.png
  • View the icon at 100% zoom, not enlarged, and check that the mark is still recognizable.
  • Preview it on both light and dark backgrounds to make sure transparent edges do not leave a halo.
  • Zoom in to inspect straight edges for unwanted gray fringe pixels, and fix any by re-snapping.
  • Add the icon to your site's HTML head with a link element whose rel attribute is icon and whose sizes attribute is 64x64. Then check how it actually appears in the browsers you support.

Gaps to check yourself

This guide covers how to prepare and refine the 64×64 artwork. It does not settle which other icon sizes or formats specific browsers, operating systems or platforms request, because no evidence on those requirements was available. Before you finalize a full favicon set, check the current documentation for each target platform. The 64×64 size is also the size you asked about, not a documented universal requirement.