Anti-Aliasing Favicon Edges in Affinity Photo

Affinity Photo anti-aliases the edges of vector shapes, curves, text and most selections by default. It blends edge pixels with the background so diagonals and curves look smooth instead of stair-stepped. For a favicon, the aim is usually not to turn that off. The aim is to control where it happens. Curves need some smoothing to read as curves. Straight horizontal and vertical edges look sharpest when they land exactly on whole pixels, so they need no blending at all. Most of the practical work is aligning artwork to the pixel grid at the final icon size and choosing the right tool or setting for each edge.

What anti-aliasing does to a favicon

A favicon is shown at very small sizes, commonly 16×16 and 32×32 pixels, so every edge pixel is a large share of the image. When a vector logo is rendered at that size, any edge that falls between two pixels becomes a row of partially transparent or blended pixels. On a large logo this is invisible. On a 16-pixel icon it can make a crisp outline look soft, grey or blurry. The same mechanism keeps round shapes and diagonal strokes from looking jagged, which is why simply disabling anti-aliasing everywhere tends to trade blur for harsh stair steps.

Where Affinity Photo controls edge smoothing

Edge smoothing in Affinity Photo is not one global switch. It depends on the kind of layer and the tool used to create it.

• Selections: marquee and freehand-style selection tools offer an antialias option in the context toolbar. With it unchecked, the selection, and any fill or mask made from it, has hard pixel edges.
• Vector shape, curve and text layers: these are rendered with anti-aliasing. Affinity's layer blend options include an antialiasing override that can force it on or off for an individual layer. Confirm the exact location and wording in your version.
• Pixel painting: the Pixel tool paints hard-edged, non-anti-aliased strokes. The Paint Brush produces soft, blended edges. For hand-correcting individual favicon pixels, the Pixel tool is the appropriate choice.
• Snapping: snapping options include settings for aligning objects and nodes to whole pixels. They help straight edges sit on pixel boundaries instead of between them.
• Resampling: resizing a document, or exporting at a different size, uses a resampling method. Smooth methods such as bilinear, bicubic or Lanczos blend pixels. Nearest neighbour does not blend at all.

Vector artwork, rasterized layers and previews

Affinity Photo is primarily a raster editor that also supports vector shapes and curves. Anti-aliasing is applied to vector layers each time they are rendered, so you can still move or adjust the paths and keep clean results. Once a vector layer is rasterized, its anti-aliased edge pixels become fixed image data. Any further scaling resamples those pixels, and the result is typically softer edges.

Imported files need checking before you rely on them. An SVG, PDF or EPS may contain true editable paths, but it may also contain an embedded raster image or only a raster preview. The file extension does not tell you which. Inspect the Layers panel after import. Curve or shape layers can be pixel-aligned and re-rendered cleanly. An image layer is already pixels, and you cannot recover sharper edges from it.

A practical workflow for crisp small sizes

• Create a document at the exact output size, such as 32×32 pixels, rather than designing large and relying only on downscaling.
• Keep the logo as vector layers while you work, and turn on pixel-aligned snapping so straight edges and stroke boundaries fall on whole pixels.
• Adjust stroke weights and shape sizes so they cover whole pixels at the target size. This is an editorial simplification of the logo, not something the software does for you.
• Leave anti-aliasing on for curves and diagonals. Consider forcing it off only on layers made purely of horizontal and vertical edges, and compare the results.
• Check the result at 100% zoom and zoomed in on the pixels, ideally against both light and dark backgrounds, since blended edge pixels show differently on each.
• Repeat the alignment check at each size you deliver. Artwork that is pixel-aligned at 32×32 is not automatically aligned at 16×16.
• For final touch-ups, rasterize a copy and correct individual pixels with the Pixel tool, keeping the vector original intact.

Situation | Suggested approach

Straight edges look blurry at small size | Align shapes and nodes to whole pixels; optionally force anti-aliasing off for that layer

Curves or diagonals look jagged | Keep anti-aliasing on; simplify the shape rather than removing smoothing

Hard-edged selection or mask needed | Uncheck the antialias option before making the selection

Scaling pixel-drawn favicon art | Use nearest neighbour resampling to preserve hard pixels

Scaling vector or photographic artwork | Use a smooth resampling method, then check edges at 100%

Imported logo looks soft regardless of settings | Check whether it is an embedded raster or preview rather than vector paths

Limits and gaps

No version-specific documentation, test results or measurements were supplied for this article. Menu names, option locations and export formats can differ between Affinity Photo releases, so verify them in the version you use. Depending on your version, multi-size ICO export may not be built in. A common route is to export a PNG at each size and combine them with a separate tool. The recommendations on when to keep or force off anti-aliasing are editorial judgments based on general rendering principles, not results measured in Affinity Photo.