How to Make a Pixel Art Favicon or Icon

Why Pixel Art Works for Favicons

Favicons live at 16x16 or 32x32 pixels. At that scale, every pixel matters and traditional illustration techniques fall apart. Pixel art is built for exactly this constraint. You place each pixel deliberately on a grid, which means the final icon looks intentional rather than blurry. There is no anti-aliasing to muddy the edges and no detail lost to downscaling. The grid you draw on is the grid the browser displays.

This is why most memorable favicons look like pixel art even when they were not designed that way. The ones that work best embrace the limitation: bold shapes, minimal colors, and sharp edges. The Pixel Art Editor gives you a canvas that matches these target sizes directly, so what you see while drawing is exactly what appears in a browser tab.

Step by Step: Making a Favicon

1. Set the canvas to 16x16. This is the standard favicon size for browser tabs. If you want extra detail, use 32x32 instead, but 16x16 forces you to keep things simple, which usually produces a better icon.
2. Pick 3-4 colors. At 16 pixels wide, there is no room for gradients or subtle shading. Choose one main color, one accent, and one for outlines. A transparent background counts as a color if you are using PNG.
3. Draw the outline first. Block out the shape of your icon with a single dark color. This gives you a frame to fill in. Keep the outline one pixel wide.
4. Fill and refine. Add your fill colors inside the outline. Step back and view the canvas at 1x zoom to see how it will actually look in a browser tab. Remove any detail that disappears at actual size.
5. Test at actual size. Zoom out to 100% and check if the icon reads clearly. If you cannot tell what it is at a glance, simplify further.
6. Export at 1x. Save the image as PNG at 1x scale. This gives you the exact 16x16 or 32x32 file you need. Rename it to favicon.png.

Recommended Favicon Sizes

Context	Size	Notes
Browser tab	16x16 px	The classic favicon size, used in tabs and history
Bookmarks bar	32x32 px	Higher resolution for bookmark icons and taskbar shortcuts
Apple touch icon	180x180 px	Used when saving a website to the iOS home screen
Android home screen	192x192 px	Required for Progressive Web App icons on Android

For pixel art icons at larger sizes like 180x180 or 192x192, draw at 16x16 or 32x32 and export at a higher scale (e.g., 6x or 12x). The Pixel Art Editor uses nearest-neighbor scaling, which keeps every pixel crisp and blocky rather than blurring them.

Design Tips for Tiny Icons

• Keep it simple. A favicon has 256 pixels at 16x16. You are working with less space than a single character of text. One recognizable shape beats a complex illustration every time.
• Use bold shapes. Thick lines and filled areas hold up better than thin strokes. A single-pixel line at 16x16 is barely visible, especially on high-DPI screens where the favicon is rendered even smaller physically.
• Test on light and dark backgrounds. Browser tabs can be light or dark depending on the theme. If your icon relies on a light background to be visible, it will vanish in dark mode. Add a contrasting outline or pick colors that work on both.
• Avoid thin lines. Diagonal lines that are one pixel wide create a jagged, noisy appearance at favicon sizes. Stick to horizontal and vertical lines, or use two-pixel-wide diagonals.
• Use a transparent background. PNG favicons support transparency. A transparent background lets your icon sit cleanly on any browser tab color without a visible square border.

Adding the Favicon to Your Website

Once you have exported your favicon PNG, add it to your website by placing the file in your site's root directory and adding a link tag in the HTML head section:

<link rel="icon" href="/favicon.png">

For Apple devices, add a separate touch icon at 180x180 pixels:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Create the touch icon by exporting your 16x16 design at a higher scale. In the Pixel Art Editor, export at 12x to get a 192x192 image, then crop or resize to 180x180. The pixel art style scales perfectly because nearest-neighbor interpolation preserves the sharp grid.

Frequently Asked Questions

What size should a favicon be?

The standard favicon is 16x16 pixels for browser tabs. For bookmarks and shortcuts, include 32x32 as well. Apple devices use 180x180 for touch icons. Create your design at 16x16 or 32x32 in the Pixel Art Editor and export at 1x for the actual file.

How to make a pixel art favicon?

Open the Pixel Art Editor, set the canvas to 16x16, and draw your icon. Use 3-4 colors maximum because favicons are viewed at tiny sizes and simplicity is key. Export at 1x as PNG, rename to favicon.png, and add a link tag to your HTML.

Can I use PNG as a favicon?

Yes. All modern browsers support PNG favicons via the link tag: <link rel="icon" href="/favicon.png">. PNG is preferred over ICO for simplicity and transparency support. Include both 16x16 and 32x32 sizes for best coverage across browsers and devices.

How to add a favicon to HTML?

Add this to your HTML head: <link rel="icon" href="/favicon.png">. For Apple devices, also add: <link rel="apple-touch-icon" href="/apple-touch-icon.png"> with a 180x180 pixel version of your icon.