Page & Bell

Favicon Generator

Drop a logo or image and get a real multi-size favicon.ico — with the 16, 32, and 48-pixel versions bundled into one file the way browsers expect — plus a 32px PNG, an Apple touch icon, and the exact HTML to paste into your <head>. The .ico is assembled byte-by-byte in your browser, so nothing is uploaded; you can make a favicon for an unreleased product without it touching a server. Start from a square image around 512×512 for the sharpest result at every size.

Drop an image here or click to choose

A square 512×512 PNG works best. Generated in your browser — no upload.

How to use the favicon generator

  1. Drop or choose an image — ideally a square PNG around 512×512.
  2. Pick which sizes go into the .ico (16/32/48 are the safe default) and choose a transparent or solid background.
  3. Use 'Contain' to keep the whole image or 'Cover' to crop a non-square image to a square.
  4. Download favicon.ico (plus the PNG and Apple icon) and paste the provided HTML into your <head>.

Why a favicon is a bundle, not a single image

A favicon shows up at wildly different sizes — 16px in a browser tab, 32px in a bookmark bar, larger again on a Windows taskbar — and a single image scaled to all of them looks muddy at the small end, where every pixel counts. The .ico format solves this by being a container: it packs several independently-rendered sizes into one file, and the browser picks the best fit for each context. That's why this tool generates each size separately and bundles them, rather than shipping one PNG and hoping the browser downsizes it well. At 16px especially, a purpose-rendered icon reads cleanly where a shrunk photo turns to mush.

The modern favicon set

A complete, no-nonsense favicon setup in 2026 is just three files and three lines of HTML:

  • favicon.ico (16/32/48) — the universal fallback every browser, old and new, knows to look for at the site root.
  • favicon-32.png — a crisp PNG that modern browsers prefer when offered explicitly.
  • apple-touch-icon.png (180×180) — used when someone adds your site to an iPhone or iPad home screen; iOS gives it an opaque background, so this tool fills transparency with a solid color for that one.

Drop the three files in your site root and paste the generated link tags. You don't need the dozens of sizes some generators produce — that was cargo-culted from an era of more fragmented devices.

Designing for 16 pixels

A favicon is the smallest piece of branding you'll ever ship, and detail is the enemy. A full logo with a tagline and fine lines disappears at 16px. Use a single bold mark — a monogram letter, a simple symbol, a solid shape — with high contrast against both light and dark tab backgrounds. Start from a clean, square source: if you only have a vector logo, rasterize it large first with the SVG to PNG converter, then bring the PNG here. If your source isn't square, use the image cropper to frame the mark before generating, or let "Cover" crop it to a square for you.

Frequently asked questions

Is my image uploaded to make the favicon?

No. Each size is rendered on a canvas and the .ico file is assembled byte-by-byte in your browser. Nothing is sent to a server, so you can generate a favicon for a confidential or unreleased project without the image ever leaving your device.

What size image should I start from?

A square PNG around 512×512 is ideal — large enough to render every icon size sharply, with room for the Apple touch icon at 180px. Smaller sources still work, but anything under 64px will look soft at the larger sizes, and the tool warns you when that's the case.

Why does the .ico contain multiple sizes?

Because a favicon appears at different sizes in different places, and one image scaled to all of them looks blurry at 16px. The .ico format bundles separately-rendered 16, 32, and 48px versions into one file so the browser always picks a crisp match. This tool renders each size individually before bundling.

Do I still need favicon.ico, or just a PNG?

Keep the .ico. Modern browsers happily use a PNG when you point to one, but favicon.ico at the site root remains the universal fallback that every browser checks automatically — including older ones. The generated HTML offers both, so every browser gets its preferred format.

Should the background be transparent?

For the .ico and PNG, transparent is usually best so the icon blends into any tab color. The Apple touch icon is the exception: iOS renders it on an opaque tile and ignores transparency, so the tool fills it with a solid background to avoid an unexpected black square on home screens.

Related tools

Learn more