How to make a favicon (.ico)
A favicon needs several sizes inside one file. Here is how to produce it, and the HTML that makes browsers pick it up.
Make the file
- Open the converter and go to the "Convert a file" tab.
- Add a square PNG. Ideally 512×512 or larger — it is scaled down, never up.
- Choose ICO icon (favicon).
- Convert. The result contains 16, 32, 48, 64, 128 and 256 pixel versions in one file.
Install it
Put the file in the root of your site as favicon.ico. Browsers look there automatically, so strictly speaking no HTML is needed. Being explicit is still better:
<link rel="icon" href="/favicon.ico" sizes="any">
For a complete modern setup, an SVG icon and an Apple touch icon cover the remaining cases:
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
The Apple touch icon should be a 180×180 PNG, which the same converter will produce if you set a maximum width of 180.
Why one file holds several sizes
ICO is a container. A browser tab shows the icon at 16 or 32 pixels, a bookmark bar may use 32, and a pinned shortcut on a desktop can ask for 256. Supplying each size separately means each one is drawn deliberately, rather than the browser crushing a 256-pixel image down to 16 and producing mush.
Design for 16 pixels first. Whatever looks good large will be unrecognisable at tab size if it has fine detail, thin lines or small text. Most effective favicons are a single letter, a bold shape, or a heavy silhouette — nothing more.
Practical requirements
- Square. A rectangular source gets squashed, since ICO sizes are square by definition. Crop first.
- Transparency. PNG transparency is preserved, and is usually what you want so the icon sits cleanly on light and dark browser themes.
- Contrast. Test against both a white and a dark background — browser chrome varies.
- Caching. Browsers cache favicons aggressively. After replacing one, hard-refresh, or load
/favicon.icodirectly to confirm the new version is being served.
Do you still need ICO at all?
Every browser supports PNG favicons now, and SVG favicons work in all current versions. ICO remains worth shipping for two reasons: it is the automatic fallback at /favicon.ico that requires no markup, and some older software, feed readers and link-preview crawlers still look for it specifically. It costs a few kilobytes to include, so include it.