Favicon Generator

What is a favicon generator?#

A favicon is the tiny icon that shows in a browser tab, in a bookmark list, in a phone’s “add to home screen” preview, and in a Windows tile. The awkward part is that “a favicon” is not one file — different platforms expect different sizes and different filenames. A desktop browser wants a classic favicon.ico, iOS wants a 180×180 apple-touch-icon.png, an installable PWA wants 192 and 512 in a site.webmanifest, and modern browsers also pick up standalone PNGs. Hand-generating all of those, plus the <head> tags that wire them up, is exactly the kind of fiddly task you should never do twice by hand.

This page produces the complete set from a single source: either an image you supply, or a letter on a solid background (handy for a quick “first letter” brand mark). Pick the sizes you need, and it bundles everything into one .zip — multi-image ICO, standalone PNGs, the webmanifest, and an HTML snippet listing the exact <link> and <meta> tags to paste. All rasterization happens in your browser.

How to use it#

1. Choose a Source:
   • Image — drag in (or pick) any roughly square image. It gets drawn into each selected size.
   • Letter — type one or two characters (default A), pick a Background color (default sky blue) and a Foreground color (default white). The letter is centered on the background at every size.
2. Tick the sizes you want from 16, 32, 48, 180, 192, 512. All six are on by default. The 48 only ever lives inside favicon.ico (no standalone PNG), so it is bundled automatically when 16 and 32 are.
3. Watch the preview canvas — it renders the largest selected size on a transparency checkerboard so you can see any transparent areas.
4. Click Download ZIP. The archive contains, for the default all-sizes selection:
   • favicon.ico — a multi-image ICO bundling 16, 32, and 48 as embedded PNGs (the Vista+ format every modern browser accepts).
   • favicon-16x16.png, favicon-32x32.png — standalone PNGs.
   • apple-touch-icon.png — the 180×180 iOS icon.
   • android-chrome-192x192.png, android-chrome-512x512.png — PWA manifest icons.
   • site.webmanifest — referencing the 192/512 icons, with theme and background colors.
   • html-snippet.html — the <link rel="icon">, <link rel="apple-touch-icon">, <link rel="manifest">, and <meta name="theme-color"> tags.
5. Unzip into your site root, paste the snippet into your <head>, and the icons resolve from /.

Key features#

• A complete, conventionally-named set in one zip. The filenames (favicon.ico, apple-touch-icon.png, android-chrome-512x512.png, site.webmanifest) match what browsers and build tools look for at the site root by default.
• Self-authored ICO encoder. A proper multi-image Vista+ ICO (ICONDIR + ICONDIRENTRY table + embedded PNG payloads), written from scratch — not a single-image 32×32 stub.
• Letter mode for instant brand marks. Two characters, two color pickers, done — useful for internal tools and demos that need a recognizable icon in thirty seconds.
• Only the files you actually need. Untick a size and neither its PNG nor its manifest entry is emitted; the HTML snippet is regenerated to match.
• Ready-to-paste head snippet. The exact <link> and <meta> lines, scoped to only the assets present, so you are not pasting references to files you did not generate.
• 100% local. The source image or letter is rasterized in-browser; the zip is assembled in-browser. No upload.

Worked example#

You want a favicon for a side project called “Glide”. Choose Source: Letter, type G, set background to #0ea5e9 and foreground to #ffffff, leave all six sizes ticked, and click Download ZIP. Unzipping gives:

favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
html-snippet.html

The html-snippet.html contains exactly:

<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

Drop those eight files into your site root, paste the six lines into your <head>, and every platform — browser tab, iOS home screen, Android PWA — resolves the right icon.

FAQ#

Why is there no standalone 48×48 PNG?#

48 is only ever consumed inside favicon.ico (some legacy tooling reads the 48 entry from the ICO). Emitting a standalone favicon-48x48.png would just be dead weight no browser fetches, so the tool bundles 48 into the ICO and skips the standalone file.

Do I really need all six sizes?#

For full coverage, yes. If you only care about the browser tab and not iOS or PWA, untick 180, 192, and 512 and you get just the ICO plus the 16/32 PNGs — a far smaller bundle. The snippet then contains only the icon links, no manifest or apple-touch lines.

The ICO is described as “embedded PNG” — is that valid?#

Yes. Since Windows Vista, an ICO can embed PNG payloads (rather than the old BMP format), and every modern browser reads this form. It avoids a separate BMP encoder and produces smaller files for the 48 size.

My letter looks off-center on one size.#

The letter is centered on the canvas at every size using a consistent font; very square letters (like M) and letters with ascenders or descenders can look slightly high or low because of font metrics. If pixel-perfect centering matters, render the mark in an image editor and use Source: Image instead.