Why does the 16×16 favicon look blurry?

At 16×16 pixels, most logos are too detailed to render sharply. For best results at small sizes, manually design a simplified version of your icon at 32×32 and scale down.

Does the tool support transparent backgrounds?

Yes. Any transparent areas in the source PNG are preserved in the output. Browser tabs typically display favicons against a white or grey background, so transparency is usually desirable.

What size should I use for the best cross-platform result?

Use 32×32 for browser favicons and 64×64 for desktop application shortcuts. For a comprehensive set, generate 16, 32, and 48 separately and bundle them using a proper ICO tool.

Is my image uploaded to a server?

No. The resize and export run entirely in your browser via the HTML Canvas API.

guide

How to Convert PNG to ICO — Free Favicon Maker (2026)

By Rui Barreira · Last updated: 18 June 2026

You can convert a PNG to an ICO file for free using brevio PNG to ICO Converter. The tool resizes your PNG to the selected favicon size and downloads it with an .ico extension — entirely in your browser, no upload required.

How to Convert PNG to ICO

Open brevio PNG to ICO Converter. No account needed.
Drop your PNG or click to choose a file. The file is loaded in the browser only.
Select the output size: 16×16, 32×32, 48×48, or 64×64 pixels.
Preview the resized icon. Small icons reveal how well your design reads at that size.
Click "Download .ico" to save the file.

What this tool produces (and its limitation)

This tool creates a single-size PNG saved with an .ico extension. Modern browsers (Chrome, Firefox, Edge, Safari 12+) accept these as valid favicons. However, a true multi-size .ico file is a binary container that bundles multiple resolutions (typically 16×16, 32×32, and 48×48) into one file. Desktop applications like Windows Explorer use the multi-size format to display different resolutions at different zoom levels. If you need a proper multi-size ICO binary, use favicon.io or RealFaviconGenerator, which generate the full binary format.

How to add a favicon to your website

Place the .ico file in your web root and reference it in your HTML <head>:

<!-- Classic ICO favicon (all browsers) -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- PNG favicon (modern browsers, recommended for quality) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple touch icon (iPhone/iPad home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- SVG favicon (Firefox 41+, Chrome 80+) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

For maximum compatibility, provide both the .ico file (for old IE and direct root discovery) and PNG favicons at 16×16 and 32×32 for modern browsers.

Choosing the right source image for a favicon

Keep it simple: Favicons display at 16×16 pixels in browser tabs. Detailed logos with thin lines or small text become unrecognisable. Use the simplest version of your mark — typically just the symbol, not the full wordmark.
Use square images: Favicons are displayed in a square (or circle on some platforms). Non-square images are letterboxed, which wastes the available space.
Start from a vector: Convert SVG → PNG at 512×512 or higher, then downscale to favicon sizes. Starting from a large raster image loses quality; starting from vector preserves sharpness at every size.
Test at small sizes: Open the generated 16×16 favicon in an image viewer zoomed to 100% to check legibility before deploying.

Frequently Asked Questions

Why does the 16×16 favicon look blurry?: At 16×16 pixels, most logos are too detailed to render sharply. The browser uses bilinear or bicubic downscaling, which can appear blurry. For best results at small sizes, manually design a simplified version of your icon at 32×32 and scale down, rather than starting from the full-size logo. Enabling image-rendering: pixelated in CSS can help for pixel-art-style icons.
Does the tool support transparent backgrounds?: Yes. The canvas uses clearRect before drawing, so any transparent areas in the source PNG are preserved in the output. Browser tabs typically display favicons against a white or grey background, so transparency is usually desirable.
What size should I use for the best cross-platform result?: Use 32×32 for browser favicons and 64×64 for desktop application shortcuts. For a comprehensive set, generate 16, 32, and 48 separately and bundle them using a proper ICO tool such as favicon.io.
Is my image uploaded to a server?: No. The resize and export run entirely in your browser via the HTML Canvas API. Nothing is sent over the network.

Frequently Asked Questions

Why does the 16×16 favicon look blurry?: At 16×16 pixels, most logos are too detailed to render sharply. For best results at small sizes, manually design a simplified version of your icon at 32×32 and scale down.
Does the tool support transparent backgrounds?: Yes. Any transparent areas in the source PNG are preserved in the output. Browser tabs typically display favicons against a white or grey background, so transparency is usually desirable.
What size should I use for the best cross-platform result?: Use 32×32 for browser favicons and 64×64 for desktop application shortcuts. For a comprehensive set, generate 16, 32, and 48 separately and bundle them using a proper ICO tool.
Is my image uploaded to a server?: No. The resize and export run entirely in your browser via the HTML Canvas API.