How to Make a Favicon from a PNG (The Right Sizes, the Real HTML)

· Javed Iqbal · 5 min read

You ship the site, open it in a tab, and there it is: a blank or generic page icon next to your beautiful new project. The favicon. The thing everyone forgets until the very end.

Making one is genuinely easy, but most guides drown you in 20 icon files you do not need. Here is the version I actually use: which sizes matter, how to turn a PNG into a proper favicon.ico, the exact HTML to paste, and why your new favicon stubbornly refuses to show up.

The fast way

  1. Start with a square PNG, ideally 512x512, so it stays sharp when shrunk.
  2. Drop it into the favicon generator to get a favicon.ico containing 16x16, 32x32, and 48x48.
  3. Put favicon.ico in your site root and add the link tags below to your <head>.
  4. Hard-refresh. (More on why that matters in a second.)

The sizes that actually matter

Ignore the generators that spit out 30 files. For 99% of sites you need a small, sane set:

  • favicon.ico with 16x16, 32x32, 48x48 packed inside. This single file covers the browser tab, bookmarks, and history across every browser, including old ones.
  • apple-touch-icon.png at 180x180, for when someone adds your site to an iPhone home screen.
  • 192x192 and 512x512 PNGs only if you have a web app manifest (a PWA). If you do not, skip these.
  • An SVG favicon is a nice-to-have for crisp scaling on modern browsers, but the .ico is still the one that does the heavy lifting.

That is it. A favicon.ico plus an apple-touch-icon covers basically everyone. The rest is for completeness, not necessity.

Why .ico and not just a PNG

A .ico file can hold several resolutions in one file, so the browser picks the right one for where it is showing your icon. A lone PNG cannot do that. Modern browsers do accept a PNG favicon, but the multi-resolution .ico is still the most reliable default, which is why the generator builds one for you from your single PNG.

The HTML to paste

Drop these into your page <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Drop the SVG line if you do not have one. Note the paths are absolute (they start with/), which means the files live at your site root. A wrong path is the number one reason a favicon does not load, so double-check that yoursite.com/favicon.icoactually opens the image.

Why your new favicon will not show up

This one wastes everyone an afternoon at least once. Browsers cache favicons harder than almost anything else, so after you upload a new one you often still see the old icon (or no icon). It is usually working fine. To actually see it: hard-refresh (Cmd/Ctrl+Shift+R), open the site in a private window, or visit the/favicon.ico URL directly to confirm the file is really there. Do that before you start debugging a problem that is not real.

FAQ

What size should a favicon be?

The favicon.ico should contain 16x16, 32x32, and 48x48. Start from a 512x512 square PNG so every size stays crisp. Add a 180x180 apple-touch-icon for home-screen use.

How do I convert a PNG to a favicon?

Drop the PNG into the favicon generator, which packs the standard sizes into one favicon.ico for you. It runs in your browser, so the image is not uploaded.

Why is my favicon not updating?

Favicon caching. Hard-refresh, use a private window, or open the favicon URL directly. The file is almost always fine.

Do I really need 20 icon files?

No. A favicon.ico plus an apple-touch-icon covers nearly everyone. Add 192/512 PNGs only if you ship a PWA manifest.

Make yours now with the free favicon generator (PNG in, favicon.ico out, nothing uploaded), or see the rest of the free browser tools worth bookmarking.