Favicon Generator

One square-ish image in, every standard favicon size out — with the HTML to use them.

Click or drop a square image (512×512 or larger works best)

How to generate a full favicon set

  1. Drop one image onto the box, ideally square and at least 512 by 512 pixels. A non-square image is center-cropped to a square automatically.
  2. Inspect the six live previews: 16, 32, 48, 180, 192, and 512 pixels, each rendered at its true size so you see exactly what a browser tab will show.
  3. Click Download all sizes. Six PNGs arrive, named favicon-16.png through favicon-512.png.
  4. Copy the ready-made HTML from the box below, paste it into your site's head, and upload the six files to your site root.

A worked example

Say your logo is a wide 1200 by 630 banner with a mark on the left. Drop it in and the tool crops the central 630 by 630 square, which in this case slices off your mark; that is your cue to crop the logo to just the mark first and re-drop. With a proper square source, the previews render and the honest moment arrives at the 16 pixel preview: if you cannot tell what it is at 16 pixels, neither can your visitors, and no generator can fix that. Simplify the source (one letter, one bold shape, strong contrast), re-drop, and when the 16px version reads clearly, download all sizes, upload, and paste the five link tags. Browsers pick the size they need automatically.

What each size is for, and how they are made

Each output is drawn on its own canvas with high-quality smoothing from the center-cropped square, so every size is scaled directly from your source rather than from a previously shrunken version, which keeps the small sizes as clean as possible. The sizes are not arbitrary: 16 and 32 cover browser tabs and bookmarks, 48 serves legacy Windows contexts, 180 is Apple's touch icon for iOS home screens, and 192 and 512 are what Android and PWA manifests expect. The generated HTML declares each PNG with its size so the browser can choose correctly. Everything runs locally; your logo never leaves the machine, which matters more than people think for unreleased branding.

Honest limitations

The output is PNG only. There is no .ico file, which modern browsers and search engines no longer require, but if you must support very old browsers you will need a separate ICO converter. There is also no generated site.webmanifest, so PWA builders should reference the 192 and 512 files in their existing manifest by hand. The center crop is automatic and not adjustable, so compose your crop before uploading if the mark is off-center. Downloads arrive as six separate files a quarter second apart rather than one ZIP. And the tool applies no padding, background, or rounded corners; iOS will round the 180px icon itself, but if your mark touches the edges it will look cramped, so leave roughly 10 percent breathing room in the source.

Frequently asked questions

Which favicon sizes do I actually need?

32×32 covers browser tabs, 180×180 is Apple touch icon for iOS home screens, and 192/512 are for Android and PWA manifests. This tool generates all of them plus 16 and 48 for legacy support.

Do I still need a .ico file?

Modern browsers accept PNG favicons, and search engines read them fine. A classic favicon.ico is optional for very old browsers; most new sites skip it.

What makes a good favicon?

Bold, simple shapes that survive 16×16: one letter, one symbol, high contrast. Detailed logos turn to mush at tab size — test the 16px preview before shipping.