Why do I still need ICO?

ICO remains the most compatible favicon format and can embed multiple bitmap sizes in a single file, which helps Windows and legacy browsers.

What sizes should my ICO include?

Include 16, 32, 48, 64, 128 and 256 px to cover classic, Hi‑DPI and Windows scenarios.

Does IcoSmith upload my images?

No. Processing happens locally in your browser; files are not uploaded to our servers.

Should I use transparent background?

Yes in most cases. Use a solid color only for specific legacy UIs that require it.

How do I add the favicon to my site?

Export the favicon package and include the generated HTML tags (ICO + PNG + manifest) in your .

PNG to ICO – complete guide

Author: Augusto Cesar Perin • Updated: Sep 28, 2025

Favicons still rely on the ICO format for universal compatibility. This guide walks you through converting a PNG into a crisp multi‑size ICO, explains the ideal sizes, and shows how to ship a production‑ready setup in minutes.

Try it now: Open IcoSmith, drop your PNG, pick sizes 16, 32, 48, 64, 128, 256, and export. You can download either the ICO file or the full favicon package with all tags.

Why ICO is still needed

ICO can embed multiple bitmap sizes in one file. Windows and many legacy contexts prefer ICO, and some tooling still looks specifically for favicon.ico at the site root. Shipping an ICO ensures your brand mark appears correctly everywhere.

Recommended sizes

16×16 and 32×32: classic tab icons.
48×48 and 64×64: Hi‑DPI desktop.
128×128 and 256×256: Windows and large contexts.

Start from a square source of at least 512×512. If your logo has very thin strokes, enable the “sharp small icons” profile in IcoSmith for better 16px clarity.

Step‑by‑step

Open IcoSmith and drag your PNG (or click to choose).
Select the sizes listed above. Keep transparent background unless you need a solid color.
Preview the 16–32 px results; adjust the “sharp/smooth” profile if needed.
Export the ICO, or click favicon package to get HTML tags, PNG fallbacks, mask icon and manifest.

Add it to your site

Place favicon.ico at the root and add the tags from the package in your <head>. We also recommend a 180×180 Apple Touch PNG and a mask icon SVG. See favicon sizes and best practices.

Troubleshooting

Looks blurry at 16px: re‑export with the “sharp small icons” profile or simplify the logo.
Wrong color background: ensure the PNG has transparency; avoid flattening on export.
Browser still shows the old icon: hard refresh or bump the file name with a query string to bust cache.

Ready? Generate your favicon now. You can also explore PNG → ICO, JPG → ICO and SVG → ICO tools.

What is inside an ICO file?

An ICO is a container of multiple bitmaps. Each entry is a PNG or BMP at a given resolution (for example 16×16, 32×32, 48×48, 64×64, 128×128, 256×256). When the OS or browser needs to render an icon, it picks the closest match instead of downscaling a single big image. That’s why multi‑size ICOs look sharper than one‑size favicons.

ICO vs PNG vs SVG

ICO: best compatibility, multi‑size container, preferred in Windows legacy contexts and still expected at /favicon.ico.
PNG: great for explicit sizes (Apple Touch, pinned shortcuts) and social cards; not a container.
SVG: scalable and tiny, but some contexts rasterize poorly at 16–32 px and some UIs still expect bitmap icons.

Prepare the source image

Start large: 1024×1024 or 2048×2048. This gives the resampler room to work.
Square canvas: crop/pad to a square to avoid distortion.
Contrast first: simplify shapes, increase stroke contrast, avoid hairline details.
Transparency: prefer transparent background; only add solid color for specific legacy themes.

Small‑size quality: sharp vs soft profiles

At 16–32 px, details get fragile. IcoSmith provides two micro‑pipelines:

Sharp: multi‑step downscale + light edge sharpening. Works well for bold marks.
Soft: preserves thin strokes by reducing contrast steps. Good for delicate logos.

Preview both profiles at 16/32 px and pick the one that reads better. If strokes still disappear, simplify the logo or increase internal spacing.

Windows and Electron assets

If your app targets Windows, generate the optional Windows asset set: taskbar targetsize 16–96 (including 20/24) and Store logos. IcoSmith can export canonical filenames and organize subfolders to match Visual Studio conventions.

PWA/manifest setup

Beyond favicon.ico, modern sites should include a site.webmanifest declaring name, icons (192/512 maskable) and theme color. This enables install banners and proper icons on Android. IcoSmith’s package includes a ready manifest and Apple Touch 180×180 PNG.

Performance and caching

Serve icons with long cache (Cache-Control: public, max-age=31536000, immutable).
Reference hashed file names or append ?v=2 when updating.
Avoid blocking font/icon loads during LCP; icons should not shift layout.

Accessibility and SEO

Use meaningful alt text for illustrative images in docs and guides.
Include canonical URL and hreflang alternates for localized versions.
Provide a mask‑icon color for Safari pinned tabs to ensure good contrast.

Deployment checklist

ICO with 16, 32, 48, 64, 128, 256 embedded.
PNG 180×180 for Apple Touch.
SVG mask icon with brand color.
site.webmanifest with 192/512 icons and theme color.
Head snippet updated (ICO + SVG + Apple + manifest + mask‑icon).
Caching headers and no 404s verified.