Pixel curves: how to smooth a curve on a favicon pixel grid

The short answer

A curve looks smooth on a pixel grid when its shape is fitted to whole pixels. Detail and resolution alone do not make it smooth. Move the curve's key points onto pixel boundaries, keep the straight and near-straight parts aligned with the grid, and simplify the shape until each pixel carries meaning. Then fix the edge in one of two ways. You can let the software soften it with controlled anti-aliasing. Or you can draw the curve as an even staircase of pixels. Judge the result at actual size, never zoomed in.

Some terms used below:

• Pixel grid: the fixed lattice of square pixels where the final icon is shown. A vector shape has no resolution of its own. Each pixel it covers must become a single colour.
• Anchor point: a point on a vector path where segments meet.
• Bézier handle: the control line attached to an anchor that sets the direction and tension of the curve.
• Extremum (plural extrema): the topmost, bottommost, leftmost or rightmost point of a curve. Here the curve runs exactly horizontal or vertical.
• Anti-aliasing: blending edge pixels with partial tones so a diagonal or curved edge looks softer.
• Hinting or grid fitting: adjusting a shape so its edges land on pixel boundaries at a given size.

Why curves break up at small sizes

An edge that ends halfway across a pixel cannot be drawn exactly. The renderer gives that pixel an in-between tone. On a large logo these partial pixels are invisible. On a favicon a single edge may be only a few pixels long, so half-tone pixels make the shape look blurry. Uneven pixel steps make it look lumpy. Both problems come from the same cause: the geometry ignores the grid.

Choose your approach

Approach | What you do | Best suited to

Grid-fitted vector with anti-aliasing | Align points and edges to the pixel grid, then export with the software's normal anti-aliasing | Icons with soft, rounded forms where slight edge softness is acceptable

Hand-drawn pixel curve (aliased) | Draw or correct the curve pixel by pixel, using only fully on or fully off pixels, or a deliberate few intermediate tones | The smallest sizes, where crisp edges matter more than softness

Hybrid | Export a grid-fitted vector, then retouch individual edge pixels by hand | Most real favicon work, because export rarely produces perfect pixels on its own

Step by step: smoothing a curve on the grid

• 1. Set up the artboard at the exact target size, and treat each target size as a separate drawing. A shape fitted for one size will not stay fitted when scaled to another.
• 2. Turn on a pixel grid or pixel preview in your vector editor so you can see where pixel boundaries fall.
• 3. Simplify the logo first. Remove fine details, thin strokes and small counters (enclosed spaces in letters or marks) that cannot survive at this size. A simpler shape gives each curve room to read.
• 4. Place anchor points at the extrema of each curve, and delete anchors you do not need. Fewer, well-placed anchors give smoother curves.
• 5. Make the handles at each extremum exactly horizontal or vertical. The curve then meets the flat top, bottom or sides squarely, with no wobble.
• 6. Snap the extrema to whole pixel boundaries. The outer edge of a round shape should end exactly on a grid line, not partway into a pixel.
• 7. Make stroke widths and the straight parts of shapes whole numbers of pixels, positioned so both edges fall on grid lines.
• 8. Export or preview the raster at actual size. Look for edge pixels that are half-toned where they should be solid, or solid where they should be soft.
• 9. If needed, retouch the raster pixel by pixel. On a curve, the run lengths of the stepped edge should change gradually, getting shorter as the curve turns toward the diagonal and longer as it flattens out. Avoid single odd steps that break the progression.
• 10. Keep the curve symmetric where the logo is symmetric. Mirror one quarter or one half of a round shape so both sides match pixel for pixel.

How to verify the result

• View the icon at 100 percent, at the real size it will be displayed, not enlarged.
• Check it on both light and dark backgrounds. Anti-aliased edge pixels can show a halo or look heavier depending on what sits behind them.
• Look at it in the real context, such as a browser tab or bookmark list, beside other sites' icons.
• Zoom in only to diagnose problems: uneven step lengths, stray half-tone pixels, or asymmetry between mirrored sides.
• Squint or step back. If the curve reads as one smooth form rather than a jagged or blurry edge, the fitting worked.

Delivery cautions

Pixel fitting only helps at the size it was done for. A scalable favicon format may be drawn by the browser at whatever size it needs, so grid alignment made at one size gives no guarantee at others. If crisp small sizes matter, prepare and check a separate raster version for each size you deliver. Check which sizes and formats your target browsers and platforms request. This guide does not include confirmed platform requirements, so treat any specific size list as something to confirm before you deliver.

A file's extension does not tell you what is inside. A file can carry a vector or icon extension and still contain embedded raster images, unfitted geometry or uneditable content, so open it and inspect it. Owning a logo file also does not mean you are allowed to modify or reuse it. Confirm usage rights separately.

Gaps in this guide

No subject-specific evidence was available for this article. It does not cover the exact menu commands of any particular design application, any tested rendering behaviour of specific browsers, or measured comparisons between approaches. The steps above are general grid-fitting principles. Check the details against your own software and your target platforms.