PNG is the most common image format, but browsers don't accept a raw PNG as a favicon without the right setup. This guide explains how PNG-to-favicon conversion works, what's inside a complete package, and how to avoid the blurry results that come from naive resizing.
What “convert PNG to favicon” actually means
A proper favicon isn't one file — it's a package. When you convert a PNG, the output should include:
- An
.icofile that bundles 16×16, 32×32 and 48×48 in one - Individual PNGs at 16, 32, 180, 192 and 512 pixels
- An
apple-touch-icon.pngat 180×180 - A
site.webmanifestlinking the icons
You can use a single PNG as a favicon with <link rel="icon" type="image/png" href="/icon.png">, but you'll lose compatibility with old browsers and miss iOS/Android support.
How to convert PNG to favicon (free)
- Open the Favicon.one generator and upload your PNG.
- The tool resizes it to every required size — entirely in your browser.
- Download the ZIP, which contains the .ico, all PNGs, and the manifest.
- Extract into your site root and add the HTML link tags.
Everything runs client-side. Your PNG is never uploaded to a server, so sensitive logos stay private.
Why transparency matters
PNG supports transparency; JPEG does not. A transparent PNG favicon lets the browser-tab background show through, which looks far more professional than a white square. If you're starting from a JPEG, convert it to PNG first and remove the background.
Avoiding blurry favicons
The #1 complaint with auto-generated favicons is blurriness at 16×16. Causes and fixes:
- Too much detail. A complex logo shrunk to 16px becomes mush. Use a simplified version — a single letter or shape works best.
- Thin lines. Hairlines disappear at small sizes. Use bold, high-contrast shapes.
- Low-resolution source. Start from at least 512×512 (1024×1024 is better). Never upscale.
- Provide an SVG too. Vector favicons stay crisp at any size — see our SVG vs PNG guide.
What's inside the .ico file?
The ICO format is special: a single .ico can embed multiple PNG/BMP images at different sizes. When a browser requests favicon.ico, it receives all sizes and picks the best one for the current display. That's why a good .ico is the most compatible favicon format — every browser since Internet Explorer supports it.
The complete HTML after conversion
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Skip the manual work — convert your PNG to a complete favicon package in seconds, free.