Anti-Aliasing Artifacts in Favicons: Why They Look Blurry and How to Fix Them

The short answer

A favicon looks blurry because its vector edges land between pixels when the logo is turned into a tiny bitmap. The renderer fills those edge pixels with intermediate shades, which shows up as soft gray borders, smeared thin lines or colored halos. To fix it, rebuild the small sizes so their important edges sit exactly on pixel boundaries. Remove or thicken any detail that is thinner than a pixel. Then export each size directly at its final pixel dimensions, not by shrinking one large image. Anti-aliasing is not the problem in itself, and switching it off usually produces jagged edges. The goal is to control where it happens.

Terms you need

• Rasterization: converting vector paths, which are mathematically defined shapes, into a grid of colored pixels.
• Pixel grid: the fixed square cells of the output image. A favicon has very few of them, so every cell counts.
• Anti-aliasing: shading edge pixels in proportion to how much of each pixel a shape covers, so curves and diagonals look smooth instead of stair-stepped.
• Partial coverage: an edge that crosses the middle of a pixel. A dark shape covering half a pixel on a white background produces a mid-gray pixel there, not a crisp edge.
• Pixel fitting (also called pixel hinting or grid fitting): moving or resizing path points so that edges line up with pixel boundaries at a specific output size.
• Resampling: recalculating pixels when an existing bitmap is scaled. Downscaling averages neighboring pixels, which softens edges a second time.

Why small icons get blurry

In a large rendering, a one-pixel band of gray anti-aliasing along an edge is invisible. In a favicon that same band can make up a large share of the whole shape, so the icon reads as out of focus. The usual causes are listed below, and most icons suffer from more than one.

• Off-grid coordinates: horizontal and vertical edges sit at fractional positions, so they split across two pixels.
• Centered strokes: a stroke is drawn half inside and half outside its path. A one-pixel stroke on a whole-number coordinate therefore covers half of two adjacent pixels and renders as a two-pixel gray line.
• Fractional stroke widths or scaled strokes: scaling the master logo down also scales stroke widths to values that do not match whole pixels.
• Sub-pixel details: serifs, hairlines, small gaps and tight letter spacing become smaller than one pixel and collapse into gray mush.
• Double resampling: a large PNG is shrunk to favicon size, or a single favicon file is scaled by the browser or operating system to a size it was not drawn for.
• Edge fringes from transparency: semi-transparent edge pixels were blended against a matte color during export. They show as a light or dark halo on a background of a different color.

Step by step: fitting the artwork to the pixel grid

• 1. Keep the master vector logo untouched. Work on a copy for each favicon size, because pixel-fitted versions are derivatives and should not replace the master artwork.
• 2. Create an artboard at the exact target pixel size, such as 16 by 16 or 32 by 32. Turn on a one-pixel grid and pixel snapping if your editor has them.
• 3. Decide what survives at this size. A full logo with wordmark rarely works in a favicon. A symbol, monogram or single letterform from the identity usually does.
• 4. Scale the simplified mark to fit. Then move every horizontal and vertical edge onto a whole-pixel boundary, adjusting widths and heights so they come out as whole pixels too.
• 5. Handle strokes on purpose. Either convert them to filled shapes and snap those edges, or keep them as strokes with whole-pixel widths. For an odd stroke width such as one pixel, place a centered stroke's path on a half-pixel coordinate so the stroke fills whole pixels.
• 6. Thicken or remove detail that falls below one pixel. Widen counters (the enclosed spaces in letters such as o or e) and gaps so they stay open.
• 7. Accept some anti-aliasing on curves and diagonals, because they cannot sit fully on a square grid. Adjust curve extremes, meaning the top, bottom, left and right points of a curve, so they touch pixel boundaries. This keeps the softened area small and balanced.
• 8. Repeat for each size you deliver. A 32-pixel version is a separate drawing problem from a 16-pixel version, not just a scaled copy.
• 9. Export each size natively at its final dimensions with no resampling step. If the export has transparency, check that edge pixels were not blended against a background color you will not use.

The snippet below shows the off-grid problem in plain SVG. Both squares are the same size. The first has edges at half-pixel positions and renders with soft gray borders at 16 by 16. The second sits on whole-pixel boundaries and renders crisply.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
  <!-- Off-grid: edges fall mid-pixel, soft borders -->
  <rect x="2.5" y="2.5" width="10" height="10" fill="#000"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
  <!-- On-grid: edges on pixel boundaries, crisp -->
  <rect x="3" y="3" width="10" height="10" fill="#000"/>
</svg>

A note on SVG favicons

An SVG favicon is rasterized by the browser when it is displayed, at whatever size the browser needs. You can still draw the SVG on a grid that matches a common display size, which helps at that size. However, you cannot fit it separately for every size it might be rendered at. If the smallest sizes must be crisp, supply pixel-fitted bitmap versions, such as PNG files or a multi-size ICO, alongside or instead of the SVG. Also note that a file extension alone does not prove the content. An SVG can wrap an embedded bitmap, and neither the extension nor the format confirms that the artwork is editable or that you have permission to reuse it.

How to check the result

• View each exported file at 100 percent, then zoom in on a screenshot to inspect individual pixels. Look for gray bands along straight edges, which point to misaligned edges.
• Check the icon on both light and dark backgrounds to reveal halos from transparency.
• Load the favicon in real browser tabs and bookmarks, on both standard and high-density displays. High-density screens may use a larger version than you expect.
• Confirm that the mark is still recognizable at the smallest size and that its counters and gaps have not filled in.

What this guide could not confirm

No tool-specific settings, browser-by-browser rendering tests or measured before-and-after comparisons were available for this article. Snapping options, export dialogs and menu names differ between vector editors, so check your editor's documentation for its pixel-alignment features. The method above rests on general rasterization principles, not on documented requirements from any particular platform.