pixelMake a favicon that stays readable at 16 pixels
Reviewed · PixelDesk practical documentation
A favicon is often seen at only 16 or 32 pixels. A logo that looks good in a large hero image can become unreadable at that size. Start with a simple silhouette and check the smallest version before replacing the icon on your site.
Choose a mark rather than a full banner
A short symbol usually survives downscaling better than a long wordmark, thin outline or detailed photo. Crop away empty margins that make the mark too small. Use a transparent PNG or WebP if you need clear corners; a source JPEG already has an opaque background.
You can use Crop to choose the important area first. Keep an untouched source so you can try a different composition if the icon looks cramped.
Compare Fit and Center crop
Open the favicon generator and select your image. Fit retains the complete picture inside a square, leaving padding where proportions differ. Center crop fills the square and removes content at the edges. For a tall symbol, Fit may be the useful choice; for a mark with generous outside whitespace, a crop may help.
Export all six sizes
The downloaded ICO contains 16, 32, 48, 64, 128 and 256-pixel square icons. Each entry is a PNG-compressed image. This is intended for modern browsers and systems, and is not a bitmap-only ICO export for every legacy application.
| Check | Why it matters |
|---|---|
| Silhouette at 16 pixels | Fine details can merge into an indistinct shape |
| Light and dark backgrounds | A clear edge on one tab theme can disappear on another |
| Padding and cropping | The mark should remain visible without losing important edges |
| Destination compatibility | Older software may require a different kind of ICO |
Use and verify the actual file
Upload the ICO to your site's public files and select it in your website builder, or reference its URL with a link element whose rel attribute is icon. Open the site in a new tab to inspect the result. Browser icon caching can keep an earlier version; checking a changed file URL can help distinguish a cache issue from a failed export.
This generator creates the ICO file. It does not configure your website, produce an entire app-icon package or test how every operating system renders it. Keep your larger source for other uses, and use Resize when you need a separate PNG at an exact pixel size.
Prepared by Operance Labs · Report a documentation issue
Try it with the sample