Favicon pixel editor
Draw a crisp favicon pixel by pixel – from 16×16 to 64×64 – or fine-tune an imported image, then turn it into a complete favicon package with one click.
Keyboard shortcuts & tips
- BPencil
- EEraser
- GFill bucket
- IEyedropper
- LLine
- RRectangle
- OEllipse
- MMove image (wraps around)
- XSwap primary and secondary colour
- #/Toggle grid
- Ctrl+ZUndo
- Ctrl+YCtrl+Shift+ZRedo
- +-0Zoom in, out, fit
- ShiftStraight lines, perfect squares and circles
- ←→Shift the image (Move tool)
- EscCancel the current shape
Right-click paints with the secondary colour. On touch screens, a second finger cancels the current stroke.
How to draw a good 16×16 favicon
A favicon is usually displayed at only 16 or 32 pixels, so every single pixel counts. Drawing it by hand on a pixel grid gives you sharp edges and full control – something an automatically downscaled logo rarely achieves.
Start with the 16×16 canvas and keep the design simple: one bold letter, a simple symbol or the most recognisable part of your logo. Use strong contrast so the icon stays readable on both light and dark browser tabs, and check the live previews while you draw.
When you are happy with the result, click "Generate favicons from this". The generator keeps the pixels sharp and creates favicon.ico, PNG icons, Apple touch icons and Android icons from your drawing.
Tips for crisp pixel-art favicons
- Use two to four colours – too many shades turn into noise at small sizes.
- Leave a 1-pixel margin or fill the whole square; avoid shapes that touch only some edges.
- Prefer horizontal and vertical lines; diagonal lines look best at 45 degrees.
- Use mirror mode for symmetric icons and the transparent colour for see-through areas.
- Draw at 32×32 or 48×48 if your icon is detailed – larger sizes are used on high-resolution screens.