Pixel circle

A pixel circle is a circle approximated by whole, square pixels. A grid cannot reproduce a true curve exactly, so every pixel circle is a compromise between geometric accuracy and visual smoothness. For favicons and other very small renderings of a logo, the best result usually comes from two steps: build the circle so its geometry lines up with the target pixel grid, then refine the stair-step edge by hand at the final size.

The short answer

To get a clean circle on a pixel grid, choose the exact output size first. Decide whether the diameter should be an odd or an even number of pixels. Place the circle's center and bounding box on whole-pixel or half-pixel coordinates to match that choice. Then render the circle and correct the edge so the runs of pixels are symmetrical and change length gradually from the flat sides toward the diagonals. Scaling a smooth vector circle down to a tiny size without these checks usually produces blurred edges, lopsided shapes or flat spots.

The supplied material contains no specific pixel patterns, measurements or test results. The guidance below therefore relies on general, verifiable principles of raster rendering rather than on documented cases.

Odd and even diameters

Diameter parity is the first decision because it fixes where the center sits.

• Odd diameter: the center falls in the middle of a single pixel. The circle has one central row and one central column, which suits designs with a dot or a vertical stroke through the middle.
• Even diameter: the center falls on a grid intersection between four pixels. The circle has two central rows and two central columns, which suits designs that split evenly into halves or quarters.

Neither option is better in general. The right choice depends on the other elements of the mark and on the canvas size. A centered odd-diameter circle fits evenly only on a canvas with an odd number of pixels, and an even-diameter circle only on an even one; otherwise one side gets an extra pixel of margin. Favicon canvases are typically even-sized, so an even diameter is often the simpler fit when the circle must be exactly centered.

How the edge is constructed

Pixel art circles are traditionally built with the midpoint circle algorithm, a variant of Bresenham's approach. It steps around one eighth of the circle, chooses at each step the pixel closest to the ideal curve, and mirrors that eighth into the other seven octants. Because of this eightfold mirroring, the result is symmetrical by construction. A hand-drawn or auto-rendered circle that does not match its own mirror image is a sign that something needs correcting.

x = r
y = 0
err = 1 - r
while x >= y:
    plot (cx + x, cy + y), (cx - x, cy + y)
    plot (cx + x, cy - y), (cx - x, cy - y)
    plot (cx + y, cy + x), (cx - y, cy + x)
    plot (cx + y, cy - x), (cx - y, cy - x)
    y = y + 1
    if err < 0:
        err = err + 2 * y + 1
    else:
        x = x - 1
        err = err + 2 * (y - x) + 1

This sketch produces an odd-diameter circle centered on a pixel. Even-diameter circles need the center offset by half a pixel, or a version of the algorithm adapted for that case. The algorithm gives a mathematically reasonable outline, but at very small sizes designers often adjust it by eye. The usual targets are clean pixel runs: long runs along the flat top, bottom and sides, shortening steadily toward the 45-degree diagonals.

Common defects and their causes

Defect | Likely cause | Typical fix

Blurry or soft edge | Circle bounds or center placed on fractional coordinates, so anti-aliasing spreads partial pixels | Snap the bounding box to the grid for the chosen diameter parity

One side heavier than the other | Center not aligned with the grid, or a canvas whose parity does not match the diameter | Recenter, or change the diameter or canvas by one pixel

Flat or square-looking circle | Runs too long near the diagonals | Shorten the diagonal runs so they step one pixel at a time

Jagged or bumpy outline | Run lengths that rise and fall unevenly instead of changing in one direction | Make the runs change monotonically from the axis to the diagonal

Doubled corner pixels | Two pixels touching only at their corners where one would do | Remove the extra pixel so the outline stays one pixel thick

Order of checks for a vector logo

When the circle comes from an existing vector logo, it helps to separate what you can verify in the file from what you have to judge visually.

• Confirm the construction. Open the file and check whether the circle is a real vector path or ellipse object. A file extension or a sharp-looking preview does not prove this; a vector-format file can contain embedded raster images, and text may still be live type rather than outlines.
• Record the geometry. Note the circle's center coordinates, its diameter and any stroke width, and how these translate to pixels at the target export size.
• Check grid alignment. At that size, see whether the bounds land on whole-pixel boundaries for the chosen parity. Strokes need extra care, because a stroke centered on a path extends half its width on each side.
• Render at the final size. Export or preview at exactly the target pixel dimensions and view it at actual size and zoomed in on a pixel grid.
• Refine by hand. Correct the run lengths, symmetry and corner pixels on the raster version for that size, and keep a separate file for each size you refine.
• Judge the result. Whether the circle reads as round and balanced next to the other elements is a visual judgment, best made at actual size against the kind of background it will appear on.

Steps one to four are observable file and rendering properties. Steps five and six involve judgment, and two designers may reasonably reach slightly different pixel patterns for the same size.

Hard edges or anti-aliasing

A pixel circle can be fully aliased, with only on and off pixels, or lightly anti-aliased with intermediate tones along the edge. Hard edges give a crisp, deliberate pixel-art look and stay predictable at tiny sizes. Controlled anti-aliasing can make a circle look rounder, but it is most effective when the partial pixels are placed intentionally rather than left to an automatic downscale. The material supplied here does not favor one approach. The choice depends on the logo's style and the backgrounds the favicon will appear against.

Sizes and remaining gaps

A circle refined for one pixel size does not transfer cleanly to another. Each output size needs its own check and often its own hand-tuned pattern. The material supplied here gives no specific list of required favicon sizes and no reference pixel patterns for particular diameters. Confirm the target sizes for your platform separately, and build the refined circles from those dimensions.

Having access to a logo file does not by itself grant permission to modify or redraw it. If the circle is part of a mark you do not own, confirm the usage rights before producing pixel-refined versions.