Pixel Art Dithering: When and How to Use It in Favicons and Small Logo Icons

Pixel art dithering places pixels of two colors in a deliberate pattern so the eye reads an in-between tone or a gradient that the palette doesn't contain. For favicons and other very small logo icons, use it sparingly or not at all. At the smallest sizes a dither pattern usually reads as noise or grey mush, especially once a browser or operating system rescales the icon. It works best on larger pixel-grid icon sizes, on limited-palette artwork where the texture belongs to the style, and only when you place it by hand rather than let an export filter generate it.

What dithering means in pixel art

In vector design, a logo is built from paths: mathematically defined outlines and fills that can be scaled without losing sharpness. A favicon drawn on a pixel grid is a raster image, a fixed set of square pixels where each pixel holds one color. When a vector logo contains a gradient, soft shadow or subtle tint, the small raster version has too few pixels and often too few colors to reproduce it. Dithering is one way to approximate those transitions. The visual mixing depends on the pixels being small relative to the viewing distance, so the pattern blends instead of showing as individual dots.

• Checkerboard (50% dither): two colors alternate pixel by pixel, which suggests a tone halfway between them. It is the simplest pattern and the most common one in hand-made pixel art.
• Ordered dithering: a fixed threshold matrix, often a Bayer matrix, decides which pixels switch color. The result is a regular, repeating texture that can step through several intermediate tones.
• Error diffusion (for example Floyd–Steinberg): each pixel's rounding error is pushed onto its neighbors. This preserves tone well in photographs but produces irregular, grainy scatter that is hard to control on a small icon.
• Hand-placed or selective dithering: the designer places a few pixels only where a transition needs softening, such as the edge of a shadow or a curve. This is usually the most appropriate approach for logo icons.

The examples below show a checkerboard pattern and the standard 4×4 Bayer threshold matrix used for ordered dithering. A pixel takes the lighter color when its target tone exceeds the threshold at that position in the repeating matrix.

Checkerboard (X = color A, . = color B)

X . X . X . X .
. X . X . X . X
X . X . X . X .
. X . X . X . X

4x4 Bayer threshold matrix (values 0-15)

 0   8   2  10
12   4  14   6
 3  11   1   9
15   7  13   5

Why dithering is risky at favicon sizes

Favicons appear in browser tabs, bookmarks, history lists and shortcuts, where every pixel has to support recognition of the mark. Dithering spends pixels on texture instead of shape, which creates several practical problems:

• Shape loss: on a very small grid, a dithered area can blur the silhouette of a letterform or symbol, and the silhouette is what makes a logo recognizable.
• Rescaling artifacts: browsers and operating systems often display an icon at a different size than the file provides, particularly on high-density screens. Resampling a fine checkerboard can turn it into a flat grey, a blotchy texture or moiré, which is an unintended interference pattern.
• Background conflict: a tab bar may be light or dark. A pattern that blends well on one background can look speckled or dirty on the other.
• Brand drift: a dithered area reads as a different color and texture from the flat or gradient fill in the master vector logo, which may conflict with brand guidelines.

The usual alternative at the smallest sizes is to simplify. Remove the gradient, pick one or two flat colors that best represent it, and use the pixel grid to keep the main shapes crisp.

When dithering is worth using in a logo icon

• The brand is deliberately pixel-styled or retro, so a visible dither texture is part of the identity and not a compromise.
• The icon is a larger raster size in the icon set, where the pattern has enough pixels to read as a tone rather than noise.
• The palette is intentionally restricted, and a transition between two colors needs a suggested midtone that isn't in the palette.
• A small, controlled transition is needed, such as a few pixels softening a stepped curve or the edge of a shadow, without covering a large area in pattern.

If the icon is delivered as an SVG favicon, the browser renders it from vector paths at whatever size it needs. Pixel-level dithering does not belong in that file. Hand-tuned pixel work, including any dithering, applies to the raster files built for specific sizes.

Step by step: applying dithering to a pixel icon from a vector logo

• 1. Start from the master vector logo and confirm you are permitted to adapt it. A file extension such as SVG, AI or EPS does not prove the file contains only vector paths, is fully editable, or that reuse is allowed.
• 2. Create a simplified icon version: drop small text, thin strokes and fine detail that cannot survive the target grid, and keep the most recognizable shape.
• 3. Place the simplified artwork on a canvas sized exactly to the target pixel dimensions, and align key edges to whole pixels so outlines don't straddle pixel boundaries.
• 4. Rasterize without anti-aliasing, or with it and then clean the edges by hand, so you control every pixel.
• 5. Reduce to a small, deliberate palette drawn from the brand colors.
• 6. Decide whether each gradient or tint should become a flat color or a dither. Default to flat color at the smallest sizes.
• 7. Where dithering is justified, apply it by hand. Use a checkerboard or a simple ordered pattern only across the transition zone, keep pattern pixels away from the edges of letterforms and symbols, and avoid automatic error-diffusion filters.
• 8. Repeat the decision for each size in the icon set instead of scaling one dithered file up or down. A pattern that works at one size rarely transfers cleanly to another.

Export settings that preserve the pattern

• Use a lossless raster format such as PNG, or ICO containing correctly sized images. Lossy compression such as JPEG smears alternating pixels and destroys the pattern.
• Export each size at its native pixel dimensions. If any resizing is unavoidable, use nearest-neighbor scaling, which copies pixels without blending them, and limit it to whole-number multiples.
• Disable export options that add dithering automatically during color reduction, unless that is the effect you designed.
• Use alpha transparency for soft edges where the format supports it, rather than dithering against transparency. Dithered transparency was a workaround for formats limited to fully opaque or fully transparent pixels.

How to verify the result

• View each file at 100% actual size, not zoomed in. Zoomed views flatter dithering.
• Check the icon on both light and dark tab or toolbar backgrounds.
• Check it on a standard-density and a high-density display, where the system may rescale the image, and look for grey mush, blotches or moiré.
• Compare the dithered and flat-color versions side by side at actual size, and keep the dither only if it clearly improves recognition or fidelity.
• Squint or step back from the screen. The mark's silhouette should still read immediately.
• Confirm the colors and overall impression still match the master vector logo and any brand guidelines.

Gaps in the available evidence

No confirmed subject evidence was supplied for this guide. It contains no tested size thresholds at which dithering becomes legible, no browser-specific scaling behavior, and no software-specific settings. The advice above is a design recommendation based on general raster and pixel-art principles, not a documented requirement. Confirm the exact icon sizes and formats your target browsers and platforms request against their current documentation, and test on the actual devices and backgrounds where the icon will appear.