Make a multi-size favicon ICO from a PNG
A multi-size ICO contains several representations of the same icon. That gives an app a suitable small bitmap without relying on it to downscale a large logo each time.
Compare sizes and fitting options
| Choice | When to use it | Check |
|---|---|---|
| 16 × 16 | Small tab or bookmark icon | The silhouette reads without lettering |
| 32 × 32 and 48 × 48 | Larger icon slots | Edges look consistent with the 16-pixel version |
| 256 × 256 | A larger representation in the same file | The source has enough resolution |
| Fit and pad / center crop | Preserve artwork edges / fill the square | Padding does not shrink the mark too far, and cropping keeps important details |
Build and inspect the icon
- Start with a still PNG and a simple mark. Use Image Cropper at 1:1 if you need to center the subject manually. Keep the PNG output to preserve transparency. If you need the whole rectangular mark, skip the crop and use proportional fit with padding.
- Open the PNG in PNG to ICO. Choose the recommended sizes, then check native-size previews on light and dark backgrounds. If a detail vanishes at 16 pixels, simplify the artwork or reduce padding before exporting.
- Download the ICO, add it to your site and load the icon URL directly. If a browser tab still shows an old version, check that the new URL serves the new icon and test in a fresh browser session.
For a separate web PNG asset, use Image Studio to resize and compare the source PNG. The ICO and PNG remain separate files for their respective uses.
Choose between cropping and adding space
Suppose the original mark is 600 by 300 pixels. A centered square crop takes the middle 300 by 300 pixels and removes 150 pixels from either side. This works when the important symbol is centered, but can remove a wordmark or a shape near the edge. Proportional fit keeps the full mark. At 16 pixels wide, a 2:1 mark occupies only about 8 pixels of height before any extra padding. If that version looks too thin, start with a square icon variant or remove fine text from the artwork.
A one-pixel gap at small size can separate shapes that otherwise merge. If all you see is a colored square, simplify the silhouette or increase contrast. Transparent padding is useful for separation, but excessive padding reduces the number of pixels available to the mark.
Check the downloaded file and browser reference
Review the selected sizes before export. Open the downloaded ICO with an image viewer that can enumerate its entries if available. Some viewers show only one size, so use the generator’s native-size previews to compare the smaller representations as well.
After uploading the file, visit its URL and confirm it serves the ICO instead of an error page or an HTML redirect. Check that the page points to the intended icon URL. If the URL is correct but an existing tab still shows the old design, test in a new browser profile or change the asset URL in the page and retest.