Pixel Art Shading: Light and Shadow for Pixel-Grid Icons and Favicons
How to shade pixel art icons and favicons: pick one light source, build a short color ramp, place highlights and shadows pixel by pixel, and check readability at real size.
Contents
The short answer
Pixel art shading means placing light and shadow by hand, one pixel at a time, on a fixed grid. You choose a single light direction, build a small set of related tones for each base color, and assign those tones deliberately. You do not rely on gradients, blurs or automatic anti-aliasing. For a favicon or other tiny logo icon, the aim is not realism. The aim is to make the shape read clearly at its delivered size, so every shaded pixel should either explain the form or separate it from the background. If a pixel does neither, remove it.
Terms you need first
| Term | Meaning in this context |
| Pixel grid | The fixed square matrix of the final icon. Each cell holds exactly one solid color. |
| Pixel grid refinement | Adjusting a vector logo so its edges and details land on whole pixels at a target size, instead of being blurred by automatic rasterization. |
| Light source | The assumed direction light comes from. Top-left is a common convention in interface icons. It is a design convention, not a requirement. |
| Color ramp | A short ordered series of tones for one base color, running from shadow through midtone to highlight. |
| Hue shifting | Changing hue slightly along a ramp, for example moving shadows toward cooler hues and highlights toward warmer ones, instead of only darkening or lightening. |
| Anti-aliasing (manual) | Intermediate-tone pixels placed by hand along curves or diagonals to soften jagged steps. |
| Dithering | A checkerboard or patterned mix of two tones to suggest an in-between value. It is usually too noisy for very small icons. |
| Pillow shading | A common mistake: shading inward from every edge as if light came from all sides, which flattens the form instead of giving it volume. |
Step by step: shading a pixel icon from a vector logo
- 1. Decide the target sizes first. Shading that works on a larger app icon may turn to noise on a small browser-tab favicon. Plan a separate hand-tuned version for each size you need.
- 2. Simplify the vector source. Remove fine strokes, small counters and thin details that cannot occupy at least a full pixel. Do this on a copy of the master artwork, not on the original.
- 3. Place the silhouette on the grid. Rasterize at exact size with smoothing off, or redraw the outline by hand, so edges sit on whole pixels. Check that the shape reads in a single flat color before you add any shading.
- 4. Choose one light source and keep it consistent. Every highlight and shadow should agree with that direction across the whole icon.
- 5. Build a short ramp for each base color. Keep it as small as possible, because each extra tone costs clarity at small sizes. Try hue shifting so the shadows stay rich instead of muddy grey.
- 6. Shade by form, not by outline. Put highlights on surfaces that face the light and core shadows on surfaces that face away. If the logo has a ground plane or overlapping parts, add a cast shadow. Avoid pillow shading.
- 7. Clean the edges. Remove stray single pixels. Fix jagged diagonals with consistent step lengths. Add manual anti-aliasing only where it improves the curve and keeps the outline crisp.
- 8. Protect contrast against the background. Favicons appear on light and dark browser interfaces, so test whether the edge tones hold up on both. If they don't, add a contrasting outline or adjust the edge colors.
How to verify the result
- View the icon at 100 percent, its true display size, not only zoomed in. Zoomed views hide readability problems.
- Preview it on both light and dark backgrounds, and next to other icons, the way it will actually appear.
- Squint, or reduce the preview, to check that the light direction and main form still read.
- Confirm that the shaded version stays recognizable as the same brand mark as the vector logo, and that brand colors stay within any approved palette.
- Export with smoothing and resampling turned off, then reopen the exported file to confirm no blur or color shift was introduced.
How this connects to usable logo artwork
Pixel shading is a raster finishing step, so keep it separate from the vector master. Store the hand-shaded files as their own size-specific assets. Don't edit the vector logo to match them. A shaded favicon is a derivative of the logo, and a file extension proves nothing about whether a file is editable vector artwork or whether you may reuse it. Check usage rights and brand guidelines before you create or alter icon versions of a logo you don't own.
Evidence gaps
No subject-specific evidence was supplied for this guide. It contains no documented palette limits, required favicon dimensions, browser rendering specifications or test measurements. The guidance above reflects general pixel-art and icon-design practice. Treat it as design recommendations rather than documented requirements, and confirm the exact sizes and formats against the current specifications of your target platforms.