Formatly

← All guides

Make a Favicon from PNG — Free Guide

Turn any PNG into a proper multi-size .ico favicon in under a minute. Includes the exact sizes you need, HTML snippet, and common mistakes to avoid.

By Formatly

A favicon is the tiny icon in the browser tab — and getting it wrong is one of those small details that makes a site look unfinished. The good news: converting a PNG to a proper favicon takes about a minute and requires no software installation.

What a favicon actually needs to be

Browsers are forgiving — most will accept a PNG as a favicon — but the robust, works-everywhere approach is still a multi-size .ico file. The ICO format is a container that holds several bitmap sizes in one file, so the browser picks the right one for each context:

  • 16×16 — browser tab (the classic favicon)
  • 32×32 — taskbar / retina tabs
  • 48×48 — Windows desktop shortcuts

A single .ico containing all three covers every desktop scenario. That’s the baseline.

The modern full setup (2026)

For complete coverage including mobile, you want three artifacts:

  1. favicon.ico — multi-size (16/32/48), for browsers and legacy contexts
  2. icon-180.png — 180×180 PNG, for Apple touch icons (iOS home screen)
  3. icon-192.png + icon-512.png — for the web app manifest (Android install prompts, PWA)

Plus this HTML in your <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon-192.png" type="image/png">
<link rel="apple-touch-icon" href="/icon-180.png">
<link rel="manifest" href="/site.webmanifest">

And a minimal site.webmanifest:

{
  "name": "Your Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

That covers tabs, bookmarks, iOS, Android, and installable PWAs.

Step by step: PNG → favicon

  1. Start with a good source. Use a square PNG, at least 512×512. Simple, high-contrast designs survive shrinking; fine detail and text do not. If your logo has text, use just the mark/symbol for the favicon.
  2. Convert to ICO. Drop the PNG into our PNG to ICO converter, which generates a multi-size .ico (16/32/48) entirely in your browser.
  3. Generate the PNG sizes. Export 180×180, 192×192, and 512×512 versions of the same source. (A batch image resizer handles all three in one pass.)
  4. Place the files at your site root (/favicon.ico, /icon-180.png, etc.).
  5. Add the HTML snippet above to your <head>.
  6. Test. Open the site in a fresh tab and check the tab icon. For iOS, add to home screen and check the icon. Note: browsers cache favicons aggressively — if your new icon doesn’t appear, hard-refresh (Ctrl+Shift+R) or test in an incognito window.

Design tips: what survives at 16 pixels

  • Simplify ruthlessly. Your full logo at 16×16 is a smudge. Use the distinctive shape or first letter.
  • High contrast wins. A bold glyph on a solid background reads at every size; thin lines vanish.
  • Avoid text below 32px. It’s illegible. If you must include a letter, make it fill the frame.
  • Test at actual size. Zoom out until the design is 16 px on screen and squint. If you can’t identify it, simplify.
  • Mind the background. ICO supports transparency, so you can go backgroundless — but on dark browser themes a transparent dark icon disappears. A solid or subtly rounded background is safer.

Common mistakes

  • Only shipping 16×16. Looks blurry on retina displays and taskbars. Always include 32×32 minimum.
  • Forgetting the Apple touch icon. Without apple-touch-icon, iOS uses a shrunken screenshot of your page as the home-screen icon. Ugly.
  • Caching confusion. “I updated my favicon but nothing changed” is almost always the browser cache. Rename the file or add a query string (/favicon.ico?v=2) to force refresh.
  • SVG-only favicons. SVG favicons are elegant and supported in modern browsers, but Safari’s support has gaps — keep the .ico as the sizes="any" fallback.
  • Huge source files. Don’t ship a 2 MB PNG as your apple-touch-icon. Compress the PNGs — they should be a few KB each.

Favicon not showing up? Troubleshooting checklist

The #1 favicon complaint is “I did everything and still see the old icon (or none).” Work through this list:

  1. Hard refresh. Browsers cache favicons aggressively — sometimes for weeks. Ctrl+Shift+R (Cmd+Shift+R on Mac) or test in an incognito/private window.
  2. Cache-bust the filename. Change the reference to /favicon.ico?v=2. Browsers treat it as a new file and fetch it fresh. Bump the version every time you change the icon.
  3. Check the path. The <link> href must resolve. If your site lives in a subdirectory or the icon 404s, nothing renders. Open the icon URL directly in the browser to confirm it loads.
  4. Validate the ICO. A PNG renamed to .ico is not an ICO file — some strict browsers reject it. Generate a real multi-size ICO with our PNG to ICO converter rather than renaming.
  5. Wait out the CDN. If you’re behind Cloudflare or another CDN, purge the cache for the icon URLs after deploying.
  6. Check dark mode. A dark icon on a dark browser theme looks “missing.” Preview your favicon against both light and dark tab backgrounds.

For iOS specifically: the Apple touch icon must be 180×180 PNG and reachable at the exact href you declared. iOS ignores the ICO entirely, so if your home-screen icon looks wrong while the tab icon is fine, the touch icon is the culprit.

One-minute checklist

  • Square source PNG, ≥512px, simple design
  • Multi-size favicon.ico (16/32/48) at site root
  • 180px Apple touch icon
  • 192px + 512px manifest icons
  • <link> tags in <head>
  • Tested in a fresh/incognito tab

That’s it. Small detail, finished properly.

Related tools: PNG to ICO · Resize image · Compress image