Anti-Aliasing in Illustrator: How It Shapes Favicon Exports
How Illustrator's anti-aliasing options (None, Art Optimized, Type Optimized) affect favicon exports, and how pixel grid alignment keeps small icons crisp.
Contents
The short answer
Anti-aliasing in Adobe Illustrator controls how vector edges become pixels when you export or rasterize. It does not change your paths. For a favicon, it decides whether curves and diagonals come out with soft, semi-transparent edge pixels or hard, stair-stepped ones.
For most logo-based favicons, Art Optimized (supersampling) is the sensible default. The anti-aliasing setting cannot fix artwork that sits between pixels, though. At very small sizes, aligning shapes to the pixel grid before export matters as much as the anti-aliasing choice.
What anti-aliasing applies to
Illustrator works with vector paths, which have no pixel resolution. A favicon delivered as PNG or ICO is a raster image, so the paths must be converted to a fixed grid of pixels. Anti-aliasing is the rule for that conversion.
When an edge passes partway through a pixel, anti-aliasing gives that pixel a partial colour or partial transparency instead of forcing it fully on or off. The setting only acts at this conversion step.
It helps to keep three things apart:
- Vector artwork: paths and shapes in the Illustrator document. They stay editable and resolution-independent, and anti-aliasing never alters them.
- Embedded raster images: bitmaps placed inside the file. They already consist of pixels, so export resamples them rather than anti-aliasing vector edges. A logo that is secretly an embedded bitmap will not sharpen through edge settings.
- Raster previews and exports: PNG, JPEG or ICO output. This is where anti-aliasing has a visible, permanent effect.
A file name or extension does not confirm that a logo contains editable vector paths. An AI, EPS, PDF or SVG file can wrap a raster image. Check the artwork in Outline view or the Layers panel before relying on export settings to clean up edges.
The three anti-aliasing options
Illustrator's PNG export and Rasterize dialogs generally offer three choices. Exact labels and their location vary between versions and export paths (Export As, Export for Screens, the legacy Save for Web dialog, and Object > Rasterize).
| Option | What it does | Typical favicon use |
| None | Edge pixels are fully on or fully off, with no partial transparency | Pixel-art style icons, or shapes built only from horizontal and vertical edges that are already aligned to the grid |
| Art Optimized (Supersampling) | Samples the artwork at higher detail and averages the result into smooth edge pixels | Most logo marks with curves, circles or diagonals |
| Type Optimized (Hinted) | Applies smoothing tuned for text and glyph shapes | Favicons built mainly from live type or letterforms |
Art Optimized usually gives the smoothest curves. The cost is that thin strokes and edges not on the grid can look soft or slightly blurred at favicon sizes. None gives maximum crispness on straight, aligned edges but makes curves look jagged. Type Optimized is meant for text, and whether it beats Art Optimized for a lettermark is a visual judgment best made by comparing both exports.
Why pixel grid refinement matters as much as the setting
Favicons are commonly produced at very small sizes, such as 16×16 and 32×32 pixels. At those sizes a single soft edge pixel takes up a noticeable share of the icon.
If a vertical stem starts halfway across a pixel, anti-aliasing must split it across two columns. The result is a grey, blurry stem instead of a solid one. Changing the anti-aliasing option only swaps that blur for a jagged edge.
Illustrator provides tools to deal with this before export:
- Pixel Preview (View menu) shows the artwork as it will rasterize, so soft or misplaced edges are visible while you edit.
- Align to Pixel Grid, available as an object or document option depending on version, snaps the horizontal and vertical edges of selected art to whole pixels.
- An artboard sized exactly to the target pixel dimensions, with shapes drawn on whole-pixel coordinates, keeps straight edges from landing between pixels.
- Stroke widths in whole pixels, or strokes converted to filled outlines and then aligned, avoid half-pixel lines.
Grid alignment fixes horizontal and vertical edges. Curves and diagonals always need some anti-aliasing to look smooth, so the usual approach is to align what can be aligned and let Art Optimized handle the rest.
Display smoothing versus export smoothing
Illustrator also has an anti-aliased artwork preference, found in the general preferences in many versions. It affects only how artwork looks on screen while you work and does not change exported files.
Rasterizing inside the document is different. Object > Rasterize, or raster-based effects controlled by Document Raster Effects Settings, uses its own anti-aliasing choice and permanently converts or renders that content as pixels. For favicon work it is usually better to keep the master artwork as vectors and apply anti-aliasing only in the export step.
A practical sequence for favicon export
- Confirm the logo mark is made of vector paths rather than an embedded bitmap.
- Simplify the mark for small sizes if needed, since fine detail that works in a full logo often turns to noise in a favicon.
- Create an artboard at each target pixel size and turn on Pixel Preview.
- Align straight edges to the pixel grid and adjust stroke widths to whole pixels.
- Export PNGs with Art Optimized as a starting point, plus a None version for comparison if the mark is mostly straight lines.
- Compare the results at actual size, not zoomed in, and keep whichever reads more clearly.
- Convert the chosen PNGs to ICO with a separate tool if an ICO file is required, because Illustrator does not generally export ICO natively.
Where SVG favicons fit
An SVG favicon stays vector, and the browser or operating system rasterizes it at display time. Illustrator's export anti-aliasing setting does not apply to that rendering.
Pixel-aligned geometry still helps an SVG render cleanly at small sizes. Many sites also supply PNG or ICO versions for contexts where SVG favicons are not used, and those raster files are where Illustrator's anti-aliasing choice applies.
Using someone else's logo
If the favicon is based on a logo you downloaded rather than created, being able to download the file does not by itself grant permission to modify the artwork, alter its fonts or use the trademark as a site icon. Check the applicable brand guidelines or licence before reworking it.
Gaps in this assessment
No version-specific documentation, test exports or measurements were available for this article. Menu locations and option names are described in general terms and may differ in your Illustrator release.
The recommendation to start with Art Optimized and compare against None is an editorial judgment, not a measured result. For a particular mark, a side-by-side export at the target size is the reliable test.