Free tool
PNG to ICO: Build a Favicon File with Every Size Inside
Browsers, Windows shortcuts and bookmarks each pick the icon size that suits them. This page packs several sizes of your PNG into one ICO file, and can also hand you a ready favicon set for a website.
Your PNG is resized and packed into the icon inside this page and is never sent anywhere. Your size and shape choices stay on your own device.
The launch day job: a tab icon that is not missing
Close to launch, someone opens the site in a browser tab and sees a blank page icon. The logo exists as a PNG, but the site needs an icon file. Drop the PNG on the box, or paste it from the clipboard with Ctrl+V, or Command+V on a Mac, and the page builds the icon.
The icon is a container. Each size you tick is drawn from your picture and stored inside the same file, so one upload serves many places.
Choosing the sizes to put inside
| Size | Ticked at the start | Where people usually meet it |
|---|---|---|
| 16 px | Yes | Browser tabs and address bars |
| 24 px | No | Small toolbar and list uses |
| 32 px | Yes | Higher density tabs and taskbar buttons |
| 48 px | Yes | Desktop shortcuts in some systems |
| 64 px | No | Medium icon views |
| 128 px | No | Large icon views |
| 256 px | Yes | Extra large icon views |
The starting selection of 16, 32, 48 and 256 is a reasonable mix. The more sizes you tick, the larger the file becomes.
Fit or crop: what happens to a picture that is not square
An icon is a square. If your PNG is wide, the page has two ways to deal with that.
- Fit, with clear sides: the whole picture is shrunk to sit inside the square, and the spare space is left see-through. Nothing is cut off.
- Crop to a square: the picture fills the square and the long sides are trimmed evenly. The edges are lost.
A wordmark usually needs the fit option. A round badge that is already square needs neither. If a logo is long, make a separate square mark for the icon instead of squeezing the full logo into sixteen pixels.
The favicon set download
The Download favicon set button gives you a ZIP with three files. The first is the ICO itself, named favicon. The second is a 180 pixel apple-touch-icon.png, made on a white background, for the Home Screen on iPhone and iPad. The third is a text file with two lines of HTML that point to both icons.
Upload the two image files to the root of your site and paste the two lines into the head of your pages. Our Webflow maintenance work often includes small launch fixes like this one.
The home screen icon has a white fill, so a white logo will not show on it. Check it before you publish.
Designing for sixteen pixels
- Use a bold simple shape. Fine detail turns to mush at 16 px.
- Start from a PNG that is at least as big as the largest size you tick.
- Avoid thin outlines and small text.
- Preview the finished icon in a real browser tab before you call it done.
After the file is saved
A favicon that looks fine in your downloads folder can still fail on a live site. Browsers keep old icons for a long time, so a new file may not appear until the cache is cleared or the file name changes. Open the page in a private window to see what a first time visitor sees.
- Place favicon.ico at the root of the site, next to the home page.
- Add the two lines from the text file to the head of every page, or to the shared layout.
- Load the site in a private window and look at the tab.
- Look at the bookmark and at the Home Screen image on a phone.
Frequently asked questions
What is an ICO file?
It is an icon container that can hold several sizes of the same picture. Browsers and operating systems pick the size that fits.
Which sizes should I include for a website?
The starting selection of 16, 32, 48 and 256 px is a good all round choice. The favicon set button adds an iPhone Home Screen image as well.
Will the transparent background survive?
Yes. See-through parts of the PNG stay see-through inside the icon. The extra Home Screen image in the favicon set is the exception, since it sits on white.
My logo is wide. What should I do?
Use Fit, with clear sides to keep all of it, or crop to a square mark first. For tiny sizes a square symbol reads better than a full wordmark.
Can I paste an image instead of choosing a file?
Yes. Copy the picture, click on the page and press Ctrl+V, or Command+V on a Mac.
Is a PNG upload enough for a site icon on its own?
Many browsers accept a PNG icon, but an ICO is still the classic format and works across older setups, so many people ship both.
Does the page keep the ICO after I leave?
No. The file is made in memory and handed to you as a download. Only your size and shape settings are remembered.
More free tools
- JPG to ICO converter: Convert a JPG into a multi-size ICO file, with fit or crop and a favicon set for websites.
- Favicon generator: Turn letters, an emoji or a logo into a favicon.ico, PNG sizes and a manifest, with live previews.
- App icon generator: Make iOS, Android, macOS and web app icon sets with Contents.json files from one square picture.
- SVG to PNG converter: Export SVG files as PNG at a width from 16 to 8000 pixels, one or many at a time.
- image converter: Convert a mixed set of pictures to JPG, PNG, WebP, AVIF or ICO in your browser.