How to convert a PNG to ICO
- Add your image. Drop a PNG, JPG, SVG or WebP on the box. A square logo of at least 256 pixels is ideal; an SVG works at any size because it is drawn large first and scaled down sharply.
- Pick the sizes. For a website favicon, 16, 32 and 48 pixels cover browser tabs, bookmarks and Windows shortcuts. Add 256 for a Windows desktop or app icon. If your image is not square, choose how to handle it: Fit keeps the whole picture with empty margins, Fill crops it to a square, Stretch squashes it.
- Check the preview. Every size is shown at its real pixel size on a checkerboard, so you can see how the logo holds up at 16 pixels, and whether the transparency came through.
- Download. Save
favicon.ico, put it in the root folder of your website, and paste the one line of HTML shown under the preview. If you also want the Apple icon, the Android icons and the web manifest, the favicon generator makes the whole set from the same image.
What is an ICO file
ICO is the icon format Windows has used since the 1990s, and the format browsers first used for favicons. An ICO file is a container: a small header followed by one or more complete images, each at its own size. That is why one favicon.ico can hold a 16 pixel icon for a browser tab, a 32 pixel one for a high-density screen and a 48 or 256 pixel one for a desktop shortcut, and the operating system or the browser picks the one that fits.
Inside the container each image can be stored as a bitmap or as a PNG. This converter stores each size as a PNG, which keeps full transparency, keeps the file small and is read by every browser and by Windows since Vista. A converter that only renames the file from .png to .ico does not produce a valid icon: the container structure has to be built, and that is what this page does.
Which sizes does an ICO need
| Size | Where it is used | Include it for |
|---|---|---|
| 16 × 16 | Browser tabs and bookmarks on standard screens, address bar suggestions | Every favicon |
| 32 × 32 | Tabs on high-density screens, the Windows taskbar, Windows shortcuts | Every favicon |
| 48 × 48 | Windows desktop shortcuts, and a size Google likes for site icons in search results | Every favicon |
| 64 × 64, 128 × 128 | Larger Windows views and some launchers | Application icons |
| 256 × 256 | Windows Explorer extra-large icons and large application icons | Windows application icons |
For a website you rarely need more than one ICO and one extra line. A single favicon.ico with 16, 32 and 48 pixels, linked from the head of your pages, works in every browser. Modern sites often add an SVG icon and an Apple touch icon on top, which is what the favicon generator produces.
How to add the favicon to your website
Upload favicon.ico to the root of your site, so it opens at yoursite.com/favicon.ico. Browsers ask for that address by default, even if the page says nothing. For full control, add this line inside the head of every page: <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">. The sizes value lists what is inside, so the browser can pick the best match.
On WordPress, upload the icon under Appearance, Customize, Site Identity, where it is called the Site Icon (use a PNG of at least 512 pixels there; WordPress makes the sizes itself). Shopify, Squarespace and Wix have a favicon field in their theme or brand settings. After a change, browsers may keep showing the old icon for a while, because they cache favicons aggressively: open the icon's address directly and reload it, or test in a private window.
How to make the icon look sharp at 16 pixels
A 16 pixel icon has 256 pixels in total, so a detailed logo turns into a smudge. Three habits help. Use the simplest version of your mark, usually a single letter or symbol without the company name. Keep strong contrast between the shape and its background, which is also what a color contrast checker measures. And leave a little margin: browsers round the corners and add padding in some views, and a logo touching the edge gets clipped.
If the preview shows that your logo does not survive at 16 pixels, that is a design problem, not a conversion problem, and it is worth fixing once: a compact mark that works everywhere is one of the files a brand identity should include.
Methodology and limits
- Decoding
- Your image is opened by your browser on your device. SVG files are drawn at a large size first, so the small icons are scaled down from sharp artwork. Animated GIFs and WebPs use their first frame.
- Resizing
- Each size is drawn on its own square canvas with the browser's high-quality smoothing. Large reductions are done in halving steps to avoid jagged edges. Fit scales the whole image to touch the square on its longer side; Fill scales it to cover the square and crops the rest; Stretch ignores the proportions. A source smaller than a chosen size is enlarged, which looks soft, and the page warns you.
- The ICO file
- Each size is saved as a PNG (canvas toBlob) and written into an ICO container: a six-byte header, a 16-byte directory entry per size and the PNG data. After the file is built, the page reads its header back and lists the sizes it finds, so the numbers shown come from the file itself. PNG data inside ICO is supported by every current browser and by Windows Vista and later. Windows XP and some older programs cannot read PNG entries.
- Limits
- One source image at a time, up to 100 million pixels and 16,384 pixels on a side. Colors are converted to sRGB and metadata is not copied. The ICO holds square icons only, so a non-square source is fitted, filled or stretched as you choose.
Sources
- Define a favicon to show in Google Search results, Google Search Central, on the square shape, the size guidance and the link tag
- Image file type and format guide, MDN Web Docs, on the ICO format and where it is used
- HTMLCanvasElement: toBlob() method, MDN Web Docs, the browser encoder this tool uses
- rel="icon" link type, MDN Web Docs, on the link tag and its sizes attribute