Pixelbench

Favicon & app icon generator

Drop in one image and get a full icon set back: a real multi-size favicon.ico, PNGs from 16px to 512px, and the head tags and web manifest to paste into your site.

Options

Drop a square-ish logo or photo. Non-square images are automatically centre-cropped to a square before resizing.

Recommended if your source has a transparent background — some launchers render alpha poorly at 16px.

Related tools

Drop an image here

or · ideally 512px or larger

Generated icons

Nothing generated yet

Drop a source image above. Icons appear here the moment it's loaded, and again whenever you change an option.

Add to your site

Save this as site.webmanifest in your site's root, alongside favicon.ico.

Why there are so many sizes

No single icon file works everywhere. Browsers still look for favicon.ico out of habit, iOS wants an apple-touch-icon at 180px for the home screen, and Android and desktop PWA installs read whatever sizes are listed in the web manifest — commonly 192 and 512px. Generating the full set once, rather than guessing which one you'll need, is the simplest way to stop worrying about it.

favicon.ico

Still requested by some browsers and bookmarking tools even though modern sites usually lead with a PNG. This tool builds a real multi-size ICO containing 16, 32 and 48px images, each stored as PNG data inside the ICO container — a format Windows and every current browser has supported since Vista, so there's no need for old-style uncompressed bitmap encoding.

apple-touch-icon

Used when someone adds your site to an iPhone or iPad home screen. iOS applies its own rounded-corner mask on top, so keep your logo away from the very edges of the source image if you can.

Manifest icons (192 / 512)

Referenced from site.webmanifest and used by Android and desktop browsers when a site is installed as an app. The 512px size is also what app stores and share cards tend to pull from when a larger icon is needed.


About the square crop

Every icon slot on every platform is square. If your source image isn't, the generator takes the largest centred square it can — for a 1600×1200 photo that's the middle 1200×1200 — rather than squashing the image out of proportion. If your logo has important detail near the left or right edge, crop it to square yourself first with the crop tool so you control exactly what survives.

Why is my non-square image cropped instead of stretched?

Stretching distorts the image, especially anything with straight edges or a circular logo. A centred square crop keeps the important central content intact and matches what every icon slot expects: a square.

What's actually inside the favicon.ico file?

A minimal but valid ICO container: an ICONDIR header, one ICONDIRENTRY per image, and PNG-compressed image data for the 16, 32 and 48px sizes. Every current browser and OS accepts PNG-compressed data inside an ICO, which has been true since Windows Vista.

Do I need every size this tool generates?

In practice favicon.ico, apple-touch-icon (180px) and the two manifest sizes (192 and 512) cover almost every browser and device. The others exist for older Android launchers and specific manifest contexts that ask for them directly.

Why is there no SVG favicon option?

This tool starts from a raster photo or logo. Producing a usable SVG would mean guessing at vector shapes from pixels, which isn't reliable, so only PNG and ICO outputs are generated.

Where do these files go on my site?

In the root of your site, alongside index.html, with the exact filenames shown in the downloads and referenced in the head tags below. The manifest file should be saved as site.webmanifest in that same root.