Most favicon advice is a list of a dozen PNG sizes copied from a generator that was written in 2014. Most of those sizes no longer do anything. What a site needs today is short: one favicon.ico for the browsers and tools that still look for it, one scalable or high-resolution icon for everything modern, and one touch icon for phones. The part that trips people up is the .ico itself, because it is not an image with an odd extension. It is a small container holding several images.
This guide covers how an ICO file is built, which sizes belong inside a favicon.ico and why, which other icon files a site needs alongside it, and the mistakes that make an icon look soft or unreadable in a browser tab. It sits under the image tools hub, and every size quoted for the Toolz converter comes from its source code.
TL;DR: An ICO file is a container: a short directory followed by several square images, one per size, from which the browser or operating system picks the closest match. For a favicon.ico, include 16, 32 and 48 px, and add 256 px if the same file doubles as a Windows icon. Each entry can hold at most 256 x 256 pixels. Alongside it, declare an SVG or large PNG icon and a 180 x 180
apple-touch-icon. The PNG to ICO converter writes 16, 32, 48 and 256 px entries as PNG with transparency, client-side, nothing uploaded, free, no signup.
What is an ICO file?
An ICO file is the Windows icon format: a header, a directory listing each image inside, and the image data for each entry. Microsoft documented the layout in its Icons technical article, and it has been the format for Windows program, shortcut and folder icons since the first versions of Windows. Browsers adopted it for favicons in the late 1990s, which is why the file on most websites is still called favicon.ico.
The directory is what makes it different from a PNG or JPG. Software that needs an icon at 16 pixels reads the directory, finds the entry closest to 16, and draws that one. A tab, a bookmark list, a taskbar button and a desktop shortcut can each take a different image from the same file. That lets a designer supply a simplified mark for the tiny sizes and a detailed one for the large sizes, instead of letting a single image be scaled everywhere.
The format goes by two media types. IANA lists image/vnd.microsoft.icon, while most servers and browsers use the older image/x-icon. Both work for a favicon.
How is an ICO file structured?
An ICO file starts with a 6-byte header, followed by one 16-byte directory entry per image, followed by the image data. All numbers are little-endian.
ICONDIR (6 bytes)
reserved 2 bytes always 0
type 2 bytes 1 = icon (2 = cursor)
count 2 bytes number of images
ICONDIRENTRY (16 bytes, repeated count times)
width 1 byte pixels; 0 means 256
height 1 byte pixels; 0 means 256
colorCount 1 byte palette size; 0 when there is no palette
reserved 1 byte 0
planes 2 bytes 1
bitCount 2 bytes bits per pixel, e.g. 32
bytesInRes 4 bytes size of this image's data
imageOffset 4 bytes where this image's data starts in the file
Image data (one block per entry)
either a BMP-style DIB (without the file header)
or a complete PNG file
Two details in that layout explain most of the confusing things about icons.
The 256 pixel ceiling comes from a single byte. Width and height are each stored in one byte, which can hold 0 to 255. The format reuses 0 to mean 256, and there is no way to express anything larger. A 512 x 512 entry cannot exist in a valid ICO, whatever a generator claims.
Entries can be PNG. Early icons stored every image as an uncompressed bitmap with a separate 1-bit transparency mask. Since Windows Vista, an entry can instead hold a complete PNG file, which is far smaller at large sizes and carries a proper alpha channel. A 256 x 256 icon stored as an uncompressed 32-bit bitmap is roughly 256 KB; the same image as PNG is usually a fraction of that.
The Toolz converter writes the modern variant. Its ICO builder sets type 1, one directory entry per size with planes 1 and 32 bits per pixel, writes 256 as 0, and stores each entry as a PNG with its alpha channel. Asking it for a size outside 1 to 256 is refused before anything is written, because the directory has no way to record it.
What size should a favicon be?
A favicon.ico should contain 16 x 16, 32 x 32 and 48 x 48 images, and a 256 x 256 image if you also want the file to work as a Windows icon. Beyond the .ico, modern browsers prefer an SVG or a large PNG declared with a link tag, and phones use a separate touch icon.
This table maps each size to where it is used. Exact behavior varies with browser, operating system and display scaling, so treat it as the common case:
| Size | Where it shows up | Needed in favicon.ico? |
|---|---|---|
| 16 x 16 | Browser tabs, address bar, bookmarks on standard displays | Yes |
| 32 x 32 | Tabs on high-density displays, Windows taskbar and shortcuts | Yes |
| 48 x 48 | Windows desktop shortcuts, medium icon views; Google Search recommends going larger than this | Yes |
| 256 x 256 | Windows large and extra large icon views | Only if used as a Windows icon |
| 180 x 180 | iPhone and iPad home screen (apple-touch-icon) |
No, separate PNG |
| 192 x 192 | Android home screen, web app manifest | No, separate PNG |
| 512 x 512 | Web app manifest, install and splash screens | No, cannot fit in ICO |
| Any (SVG) | Modern browsers that support SVG icons, including dark mode variants | No, separate SVG |
On search results, Google's favicon guidelines ask for a square icon and recommend one larger than 48 x 48 pixels, and Google fetches it from the icon declared on your home page. An .ico that tops out at 16 pixels is a common reason a site's icon looks blurry next to its search result.
Which favicon files does a site need?
A site needs three icon files and one manifest entry to cover every mainstream browser and device. More than that is almost always leftovers.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
Each line has a job:
favicon.icois the fallback. The WHATWG HTML standard lets browsers request/favicon.icofrom the site root when a page declares no icon at all, and RSS readers, crawlers and older tools still do. Keep the file at the root even if you declare other icons.icon.svgis the sharp icon for browsers that support SVG favicons. It scales to any density and can include aprefers-color-schememedia query so the icon adapts to dark tabs. Not every browser honors it, which is why the .ico stays.apple-touch-icon.pngat 180 x 180 is what iOS uses when someone adds your site to the home screen. Give it an opaque background, since iOS does not keep transparency on home screen icons.- The manifest icons at 192 and 512 are what Android and Chromium-based browsers use when a site is installed as an app, as described in the W3C Web Application Manifest.
The sizes attribute on the .ico link matters in one way. When a browser sees an SVG and a sized .ico, it can tell the SVG is the scalable choice. Some setups use sizes="any" on the .ico instead, and some Chrome versions responded by picking the .ico over the SVG. A specific size avoids that.
Why does my favicon look blurry or wrong?
Most favicon problems come from the source image, not the format. The ICO stores whatever it is given at each size, and scaling can only go well in one direction.
| Symptom | Cause | Fix |
|---|---|---|
| Soft, blotchy 256 px entry | Source smaller than 256 px, so it was stretched up | Start from a 512 x 512 or larger export |
| Logo squashed or stretched | Non-square source stretched to square | Crop or pad to square before converting |
| Wordmark unreadable in the tab | Text drawn at 16 px is two pixels tall | Use the symbol alone for 16 and 32 px |
| Thin outline disappears | Strokes under 1 px at small sizes | Thicken strokes in a small-size variant |
| White box around the icon | JPG source has no transparency | Use a PNG with an alpha channel |
| Old icon keeps showing | Browsers cache favicons aggressively | Rename the file or add a query string, then hard refresh |
| No icon in Google results | Icon under 48 px, blocked by robots.txt, or not on the home page | Serve a larger icon from the home page and allow crawling |
The first row is worth spelling out, because it catches experienced designers too. A 64 px source converted with 256 ticked produces a 256 px entry that is the 64 px image enlarged four times. It is exactly the entry high-density Windows views and large shortcuts show. Downscaling from a big source is the direction that looks good.
The third row is a matter of arithmetic. A 16 x 16 icon has 256 pixels in total. A five-letter wordmark squeezed into that width gets about three pixels per letter, and anti-aliasing turns those into gray smudges. Nearly every well-known site uses a single letter or symbol for its favicon for that reason.
How do I make a favicon.ico from a PNG?
Export a square PNG of at least 512 x 512 pixels with a transparent background, convert it to ICO with the sizes you need, and check the 16 px entry at real size before publishing.
Using the PNG to ICO converter on Toolz:
- Drop the PNG. Several can go in at once; each becomes its own .ico.
- Choose the icon sizes. All four boxes, 16, 32, 48 and 256 px, are ticked to start. For a pure favicon, untick 256 to make the file much lighter, since the 256 entry is most of its weight. If you untick all four, the converter falls back to writing all four rather than producing an empty icon.
- Press Convert to ICO. A square 512 x 512
logo.pngcomes back aslogo.icowith the note "Contains 16, 32, 48, 256 px icons." - Download the file, or take a batch as
converted-ico.zip.
The converter draws your image onto a canvas at each size, encodes each square as PNG, and packs them smallest first into one .ico, all client-side, so the artwork never leaves the device. Transparency is kept at every size. A non-square source is stretched to fill each square rather than cropped, and the note says so: drop a 1024 x 256 wordmark and it reports that the image was 1024x256 and was stretched to squares of the sizes you chose. That note is your cue to crop or pad first.
For the best result at small sizes, make two PNGs: a detailed one for 48 and 256 px and a simplified symbol for 16 and 32 px. Convert each with only its sizes ticked. The converter writes one source per file, so the two-image approach gives you two .ico files; use the simplified one as favicon.ico, since browsers mostly pick the small entries, and the detailed one for Windows application or shortcut icons.
Can I make an ICO from a JPG or an SVG?
Yes to both, with a caveat for each.
A JPG works, but every icon entry comes out as a filled square with no transparency, because JPEG has no alpha channel and no converter can recover one. The JPG to ICO converter resamples the photo into the same 16, 32, 48 and 256 px squares. Photos also lose almost all detail at 16 px, so crop tightly around a single high-contrast subject and make the crop square before converting. A 4032 x 3024 phone photo converted as-is is squeezed horizontally, and the note tells you so.
An SVG is the best possible source, since it has no fixed resolution and renders sharp at every entry size. The route depends on how much control you want. The SVG to PNG converter renders the SVG to a PNG you can inspect and edit first; any SVG whose longest side is under 512 px is drawn at 512, so a 24 x 24 icon SVG still gives a clean source for the 256 entry. Or drop the SVG straight into the general Image Converter, which accepts SVG, PNG, JPG and a dozen other formats, and choose ICO as the target to render and pack it in one step.
| Source | Transparency in the ICO | Sharpness at 256 px | Best use |
|---|---|---|---|
| SVG | Kept | Sharp, rendered from vectors | Logos you have in vector form |
| PNG 512 px or larger | Kept | Sharp | Most favicons |
| PNG under 256 px | Kept | Soft at 256 | Untick 256, or re-export larger |
| JPG | None, filled square | Depends on source size | Photo-based icons only |
| Existing ICO | Kept | Rebuilt from the entry the browser decodes | Changing which sizes a file carries |
An existing .ico can be fed back in too. The converter never treats ICO to ICO as a rename; it always rebuilds the file at the sizes you tick. That is a quick way to strip a bloated favicon down to 16, 32 and 48, though it rebuilds from the one entry the browser decodes, so start from the original artwork if you have it. SVG vs PNG covers why the vector master is worth keeping for exactly this kind of re-export.
Does favicon.ico still matter in 2026?
Yes, as a fallback. Current browsers use the SVG or PNG icons you declare, but the root /favicon.ico is still what some browsers, feed readers, bookmark tools and crawlers fetch when they find no declaration or do not support the declared type. A missing one also fills server logs with 404s, since those requests arrive whether the file exists or not.
What no longer matters is the long tail of legacy sizes. Separate 57, 60, 72, 76, 114, 120, 144 and 152 pixel touch icons date from older iOS versions and are covered by the single 180 px file. Windows tile images declared through browserconfig.xml belonged to Windows 8 and 10 Start screen tiles. Neither is needed for a new site.
Here is the practical minimum set with file sizes to expect:
| File | Pixel size | Typical weight | Required? |
|---|---|---|---|
favicon.ico with 16, 32, 48 |
16, 32, 48 | A few KB | Yes, as fallback |
icon.svg |
Scalable | Under 2 KB for a simple mark | Recommended |
apple-touch-icon.png |
180 x 180 | 5 to 20 KB | Yes, for iOS |
icon-192.png, icon-512.png |
192, 512 | 10 to 60 KB | If the site has a manifest |
Is converting icons in the browser private?
Yes. On Toolz, decoding, resizing, PNG encoding and packing the .ico all happen client-side, inside the browser tab, so no image is uploaded, and the page keeps working offline once loaded. Metadata and color profiles attached to the source are dropped by the canvas step, which for an icon is harmless.
Images above 100 megapixels and empty files are refused with a message, and SVG sources over 50 MB are refused. The tools are free, no signup, with a daily limit on conversions.
