How to Make a Pixel Art Favicon
A favicon is one of the smallest things on your site and one of the most overlooked. At 16×16 or 32×32 pixels, you're working with almost no canvas — which is exactly why pixel art is the right approach. Every pixel is intentional. You can't rely on smooth gradients or fine detail; you have to commit to a few solid shapes and colors. The result, when done right, is an icon that's immediately recognizable at any size.
Try the Pixel Art Editor free →
The problem
Favicons are tiny — 16×16 or 32×32 pixels. You can't just shrink a full logo and expect it to look good at that scale. A logo with thin lines, fine typography, or subtle gradients turns into a blurry smear at 16px. Pixel art is the natural approach for icons this small because you're drawing with individual pixels rather than fighting against scaling algorithms.
Most pixel art tools are desktop applications with steep learning curves. The browser-based options are often slow or require accounts. What you actually need for a favicon is a simple grid editor that exports a clean PNG you can drop into your site.
How it works
- Open the pixel art editor and set the canvas to 16×16 for a browser favicon, or 32×32 if you want a slightly larger base to work from.
- Start with the outline. At this scale, you have maybe 8–10 pixels of width to work with for a shape. Keep it simple — a letter initial, a geometric symbol, a small recognizable silhouette.
- Add 2–3 colors maximum. Favicons are too small for detail, and limited color palettes actually look sharper. One background color, one main shape color, and maybe one accent is plenty.
- Export at 1x (the actual 16×16 or 32×32 size) for the favicon file. Use the scale-up export for larger app icon sizes — the editor scales pixel-perfectly without blurring.
- Add the favicon to your site with
<link rel="icon" href="/favicon.png" type="image/png">in the<head>.
Why I built it
Every time I started a new project I'd spend twenty minutes fighting with a desktop pixel art app just to make a favicon. The tools are designed for game sprites, not 16×16 icons. I wanted something that opens instantly in a browser, has a clean grid, and exports immediately — nothing more.
Favicon sizes you'll actually need
Browsers and operating systems pull from different favicon files depending on context. Here's what you need to cover all the common cases:
| Context | Size | File |
|---|---|---|
| Browser tab | 16×16 | favicon.ico |
| Bookmark bar | 32×32 | favicon-32.png |
| Windows taskbar | 48×48 | favicon-48.png |
| Apple touch icon (iOS home screen) | 180×180 | apple-touch-icon.png |
| Android home screen | 192×192 | icon-192.png |
| PWA splash screen | 512×512 | icon-512.png |
You don't need to draw each size separately. Draw at 16×16 or 32×32, then use the Image Resizer to scale up to the larger sizes. Because pixel art uses hard edges and no anti-aliasing, it scales up cleanly with nearest-neighbor interpolation — no blurring.
For the favicon.ico file, you can rename a PNG to .ico and most modern browsers will accept it. If you need proper multi-resolution .ico support (which embeds multiple sizes in one file), there are free converters available.
Built with vanilla HTML/JS. No frameworks, no backend, loads instantly.