PNG to Favicon (ICO)
The ICO format is a relic of Windows 3.1 that survives because browsers still request /favicon.ico from the site root whether or not you asked them to. Even a site with a perfectly modern favicon setup benefits from having one there, if only to stop the 404s filling the access log.
How to use it
- Drop in a square .png. Start from at least 256 by 256 for the sharpest result.
- The image is rendered to a canvas and encoded into an ICO container.
- Download the file, rename it favicon.ico, and place it at your site root.
Which sizes still matter
ICO is a container format that can hold several images at different sizes, and the browser picks whichever fits the context. The historical list of required sizes has shrunk considerably.
In practice 16 by 16 covers the browser tab and address bar, 32 by 32 covers taskbar shortcuts and higher-density tab rendering, and 48 by 48 covers Windows desktop shortcuts. The 64 and 128 pixel variants that older tutorials insist on are essentially never requested now.
Start from a large square source. Downscaling from 256 pixels produces a clean 16 pixel icon; upscaling from a 32 pixel source produces a blurry mess at every size above it.
Design for 16 pixels, not for your logo
A favicon is frequently rendered at 16 by 16, which is fewer pixels than a single character of body text. Detailed logos, wordmarks, and anything with fine line work turn into indistinct smudges at that scale.
What survives is a single bold glyph, a simple geometric mark, or a strong colour block. Most well-known sites use a heavily simplified version of their logo for exactly this reason. Test your icon at actual size before committing to it; scaled-down previews in design tools are misleading because they antialias differently from the browser.
The modern favicon setup
ICO at the root is now the fallback rather than the main event. A current setup declares an SVG favicon, which scales to any density and can respond to dark mode via a media query inside the SVG itself, plus a 180 pixel PNG for the Apple touch icon, plus the ICO for legacy requests.
Be aware that browsers cache favicons unusually aggressively, often beyond a normal hard refresh. If a change does not appear, request the icon URL directly in a new tab to confirm the new file is actually being served before assuming the markup is wrong.
At a glance
| Accepted input | .png |
|---|---|
| Output | .ico container |
| Recommended source | Square, at least 256 by 256 |
| Deployment | Rename to favicon.ico at the site root |
Frequently asked questions
What source size should I start from?
At least 256 by 256, and square. Downscaling produces sharp small icons; upscaling from a small source cannot add detail that was never there.
Do I still need favicon.ico if I have an SVG favicon?
It is worth keeping. Browsers request /favicon.ico from the root by default regardless of your markup, so having one prevents a stream of 404s, and it covers older clients that ignore the SVG declaration.
My new favicon is not showing up. Why?
Favicon caching is unusually persistent and often survives a hard refresh. Open the icon URL directly in a new tab to check which version is actually being served, then clear the site data if the old one is still coming back.
Can the icon have a transparent background?
Yes. ICO supports an alpha channel, and transparency from the source PNG is preserved. This matters because browser tab backgrounds differ between light and dark themes.
Read more
Choosing an image format — Why the same photograph can be 40 KB or 4 MB depending on a single dropdown, and how to choose deliberately.