What is an ICO file?
ICO is the Windows icon format, and the original format for website favicons (the small picture in a browser tab). Unlike PNG, one .ico file can hold several sizes of the same icon. The browser or Windows picks the size that fits best: 16 pixels for a tab, 32 for a bookmark or taskbar, 48 for a desktop shortcut, 256 for a large Explorer view. That is why simply renaming logo.png to favicon.ico is not enough: it is still one PNG at one size, and some programs refuse it.
How this converter builds the icon
- Your image is drawn into a square at each size you tick. Large images are halved step by step before the last resize, which keeps small icons crisp instead of mushy.
- Each size under 256 pixels is stored as 32-bit BMP data with full transparency, plus a 1-bit mask for very old programs. The 256-pixel size is stored as PNG, which Windows Vista and later expect and which keeps the file small.
- A directory at the start of the file lists every size, and the
.icois ready to download.
Everything happens in your browser, so unreleased logos and client artwork never leave your device.
Which sizes do you need?
| Use | Sizes in the .ico | Notes |
|---|---|---|
| Website favicon | 16, 32, 48 | Covers tabs, bookmarks, history and Windows shortcuts |
| Windows app or folder icon | 16, 24, 32, 48, 64, 128, 256 | All sizes Explorer, the taskbar and Start show |
| Minimal favicon | 32 | One size; browsers scale it down for tabs |
Modern sites also add separate PNG icons for phones and app shortcuts. The Favicon pack button downloads them together in a ZIP:
favicon.ico, the multi-size icon abovefavicon-16x16.pngandfavicon-32x32.pngapple-touch-icon.pngat 180 × 180 (with a solid background, because iOS shows transparency as black)icon-192.pngandicon-512.pngfor Android home screens and web app manifests
Copy the HTML from the tool into your page’s <head> and upload the files to your site’s root folder.
Worked example: a favicon from a wide logo
A small business has a logo that is 1200 × 400 pixels: an orange circle with the company name beside it.
- Fit (add borders) would squeeze the whole logo into 16 × 16 pixels. The text becomes an unreadable 5-pixel smudge.
- Crop the centre would cut the logo in the middle of the name.
The better approach is to crop the circle on its own first with Crop Image (a 1:1 square around the circle, about 400 × 400), then convert that square here with the Website favicon preset. The result is a 16, 32 and 48 pixel icon of a clear orange circle, recognisable in a row of 20 tabs.
Tips for icons that look sharp
- Start big and square. A 512 × 512 PNG or any SVG gives the best results. Convert vector logos with SVG to PNG if your design tool only exports SVG, or drop the SVG here directly.
- Simplify for 16 px. Use the symbol or first letter, thick strokes and two or three strong colours.
- Check on dark and light tabs. Browsers show favicons on both. A transparent icon with a dark outline or a solid rounded background works on either.
- Remove a photo background first with Background Remover if you are making an icon from a picture.
- Caching: browsers cache favicons hard. After replacing one, open the icon URL directly and refresh, or add
?v=2to the link in your HTML.
Can I convert ICO back to PNG?
Browsers can display ICO files, but support for decoding them in tools varies. If you only need one size, open the .ico in a browser tab and save the image, or export again from your original PNG with Resize Image.