What is an ICO file?
ICO is the standard icon format for Windows and browser favicons. Unlike JPG or PNG, an ICO file is a container — it can store multiple resolutions of the same icon in a single file (for example, 16×16 and 32×32 simultaneously). Browsers and operating systems pick the most appropriate resolution automatically.
Most web developers start with a high-resolution PNG logo and need to produce an ICO for the <link rel="icon"> tag. This tool handles that conversion entirely in your browser — no files are uploaded anywhere.
Which ICO size should you choose?
| Size | Used for | Notes |
|---|---|---|
| 16×16 | Browser tab favicon | Minimum size; very little detail fits |
| 32×32 | Browser address bar, bookmarks | Best single-size choice for websites |
| 48×48 | Windows taskbar pinned sites | Useful for PWAs and desktop shortcuts |
| 64×64 | High-DPI browser tabs (2× screens) | Retina-sharp on MacBooks and 4K monitors |
| 128×128 | macOS dock, Windows Store tiles | Needed for Progressive Web Apps |
| 256×256 | Windows desktop icon, Vista+ | Highest quality; large file but still under 100 KB |
How to create a favicon from PNG
- Prepare your PNG — use a square image (equal width and height). If your logo is rectangular, add padding to make it square first. Transparent backgrounds work perfectly.
- Choose a size — 32×32 for a standard website favicon; 256×256 if you also need a Windows desktop icon.
- Drop your PNG files — drag onto the upload zone or click to browse. Batch conversion is supported.
- Download the ICO — place it at the root of your site as
favicon.ico.
How the conversion works
Your PNG is drawn onto an HTML canvas at the selected pixel dimensions, then re-encoded as a PNG at the target size. That PNG is wrapped in an ICO binary container (a 22-byte ICONDIR + ICONDIRENTRY header followed by the raw PNG data). Modern browsers, Windows, and Linux desktop environments all support ICO files that embed PNG data — this approach preserves full color depth and transparency.
PNG to ICO vs PNG to favicon: what is the difference?
Nothing, really. "Favicon" is the intended use case; ICO is the file format. Modern browsers also accept PNG and SVG files directly as favicons via the type attribute on the <link> tag. ICO remains the most universally compatible choice because it works in every browser and operating system without any extra markup.
Complete favicon setup for a modern website
A production-ready favicon setup goes beyond favicon.ico. The full recommended set:
favicon.icoat 32×32 — catches all browsers and OS-level shortcutsapple-touch-icon.pngat 180×180 — iOS and macOS Safari home screen bookmarksicon-192.pngandicon-512.png— declared inmanifest.jsonfor Android and Progressive Web Apps- An SVG favicon —
<link rel="icon" type="image/svg+xml">— for modern browsers that support it
This converter handles the ICO and PNG raster sizes. For the SVG favicon, keep the original SVG file and reference it directly.
Favicon design tips: what works at 16×16
At 16×16 you have 256 pixels total — roughly a 4×4 grid of clearly distinguishable elements. Detailed logos, thin lines, and multi-color text all disappear or blur at this size. What works: a single bold letter in a contrasting color, a simple geometric shape (circle, square, triangle), or a heavily simplified mark that is immediately recognizable at a glance. Design the favicon as a standalone symbol rather than a miniaturized logo. Many well-known brands (Airbnb, Notion, Figma) use a completely different, simplified mark for their favicon compared to their full logo.
SVG favicon vs ICO: should you use both?
Yes. The cleanest setup is to declare both in your HTML <head>:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/x-icon" href="/favicon.ico">Browsers read these tags in order and use the first format they support. Modern Chrome, Firefox, and Edge pick the SVG (infinitely scalable, tiny file). Internet Explorer, older Safari, and some embedded browsers fall back to ICO. This single two-line declaration covers every browser from IE11 to the latest Chrome on a 4K display.
Privacy
All processing runs in your browser using the Canvas API. Your PNG files are never sent to any server — we cannot see them, and nothing is stored after you close the tab.