Skip to content

Favicon generator — .ico, PNG set and manifest

Free · no sign-up · runs in your browser

Turn a PNG or SVG, or just a couple of letters, into the full favicon set: 16, 32, 48, 180, 192 and 512 PNGs, a real multi-size favicon.ico, a web app manifest and the <head> tags. Everything runs in your browser — nothing is uploaded.

PNG or SVG, 512px or larger. Never leaves your browser.

Used for the initials and the manifest name.

The set

  • 16px · browser

  • 32px · browser

  • 48px · browser

  • 180px · iOS

  • 192px · manifest

  • 512px · manifest

favicon.ico packs the 16, 32 and 48 pixel images as PNGs — a fraction of the size of the uncompressed bitmaps most generators emit.

Everything here runs in your browser. No image is uploaded, and the zip is assembled in the page.

Copy the head block

<head> tags

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content="#b9471b" />

manifest.webmanifest

{
  "name": "Bookmarks for Devs",
  "short_name": "Bookmarks for Devs",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#b9471b",
  "background_color": "#b9471b",
  "display": "standalone",
  "start_url": "/"
}

A favicon is not one file any more, and most of the sets you find generated online are either half of what you need or eighteen files you stopped needing a decade ago. This produces the set that is actually used in 2026 — three browser sizes packed into a real .ico, one 180px icon for iOS, and the two the web app manifest requires — plus the manifest and link tags to reference them. Your image never leaves the page: it is read with FileReader and drawn to a canvas here, not sent to a server.

How it works

  1. 01Drop in a PNG or SVG, or type a name and let it draw the initials — two letters, because three in a 16-pixel tab is a smudge.
  2. 02Each size is drawn separately on its own canvas rather than scaled down from one bitmap, so the small ones stay crisp instead of turning to mush.
  3. 03Your artwork is fitted inside the square, never cropped to fill it. A logo cropped to fill a square is a different logo.
  4. 04The .ico is a real multi-size container holding the 16, 32 and 48 pixel images. They are stored as PNGs inside it — every browser and every Windows version since Vista reads that, and it is a fraction of the size of the uncompressed bitmaps most generators still emit.
  5. 05Corners are square by default. Every platform that wants a rounded icon masks it for you, so rounding it yourself just means it gets rounded twice.
  6. 06Download any single file, or the whole set as a zip built in the page — the archive is assembled byte by byte in JavaScript, with no library and no server.

Use cases

  • Setting up favicons for a new site without hand-exporting six sizes.
  • Replacing a lone 16px favicon.ico from years ago with a set that works on retina tabs and iOS home screens.
  • Generating a placeholder mark from initials before the real logo exists.
  • Producing the icons a web app manifest needs so a site can be installed to a phone home screen.
  • Getting the <head> block right without looking up which rel values still matter.
  • Making an icon from a logo you would rather not upload to a random website.

Frequently asked questions

What favicon sizes do I actually need in 2026?

Far fewer than the old lists suggest. 16 and 32 for browser tabs and bookmarks, 48 because Windows uses it for shortcuts, one 180px apple-touch-icon (iOS has downscaled a single icon for years), and 192 and 512 for the web app manifest. That is six files plus a .ico. The eighteen-size apple-touch pile you may have seen generated is dead weight.

Do I still need a favicon.ico?

Yes, as a fallback. Modern browsers prefer the PNG link tags, but plenty of things still request /favicon.ico blindly — feed readers, link unfurlers, older crawlers, and a browser that has not yet parsed your head. It costs a few kilobytes and it is the file that answers when nothing else is found.

Should a favicon have rounded corners?

Generally no. iOS, Android and macOS all apply their own mask to a home-screen icon, so a pre-rounded icon gets rounded twice and ends up with a thin sliver of background showing at the corners. Ship a square icon and let each platform shape it. The radius control here defaults to zero for that reason.

Is my image uploaded anywhere?

No. The file is read locally with FileReader, drawn to a canvas, and turned into PNGs in your browser. The zip is built in JavaScript in the page. There is no upload, no server round trip, and nothing to delete afterwards — which is the point if the image is a logo that is not public yet.

PNG or SVG as the source?

SVG if you have it, since it rasterises cleanly at every size. If you only have a PNG, give it at least 512 pixels square — the sizes are each drawn from your source, so anything smaller will be soft at 512. Either way, check the 16px preview: fine detail that reads beautifully at 512 usually disappears at tab size, and simplifying the mark for the small end is normal.

What goes in the web app manifest?

The name, a short name for under the icon, the 192 and 512 icons, a theme colour, a background colour, display: standalone and a start URL. Standalone is what makes an installed icon open without browser chrome — without it, adding to a home screen just makes a bookmark. The generated manifest above includes all of it.

Related resources

Related reading

More tools