Favicon Generator: ICO + All Sizes (No Upload)

One image in, a complete set out

Browsers, phones, and search engines all want your site’s icon at different sizes, in different formats, declared in different ways. This tool takes one image and produces the whole set in your browser, with nothing uploaded: a favicon.ico with 16, 32, and 48 pixel versions embedded inside it, an apple-touch-icon.png at 180 pixels, standalone PNGs at 16, 32, 192, and 512, and a ready-to-paste HTML snippet. Everything arrives in one ZIP.

Each size has a job. The 16 and 32 pixel versions are what browser tabs, bookmarks, and history lists show. The 180 pixel apple-touch-icon is what iOS uses when someone adds your site to their home screen. The 192 and 512 pixel PNGs are what Android and the PWA manifest expect; 512 is also what gets scaled down for splash screens. And the .ico file covers everything old.

Why the .ico file refuses to die

ICO is a format from Windows 3.0, and it’s still required. Legacy browsers only understand ICO. Pinned shortcuts and taskbar icons on Windows read from it. Most stubbornly of all, some crawlers, feed readers, and bookmarking tools never parse your HTML for icon links; they just request /favicon.ico at your domain root by convention and take whatever they get. Serving a real file there means you appear correctly in all those places, and a multi-resolution ICO (this one embeds 16, 32, and 48) lets each consumer pick the size it wants.

Choosing a source image that survives 16 pixels

The single biggest factor in how your favicon looks is what you feed in. The guidance is short:

Property	Recommendation
Shape	Square, or close; the tool works from a square crop
Size	At least 512 pixels on a side
Detail	Simple. One letter, one glyph, one bold shape
Contrast	High. Subtle gradients vanish at tab size

An intricate logo with fine lines and small text turns to mush at 16 pixels; there simply aren’t enough pixels to draw it. The companies you recognize instantly in a row of tabs all use a single bold mark. If your full logo is detailed, crop to its strongest single element. Need to check or fix dimensions first? The image resizer handles that.

One note on transparency: ICO and PNG both preserve transparent backgrounds, so a transparent source stays transparent in tabs. iOS does not. It fills transparency in the touch icon with black, which is rarely what you want, so if your mark relies on a transparent background, consider a version with a solid background color before generating, at least for how it’ll look on an iPhone home screen.

Installing the set

Unzip everything into your site’s root (the public folder in most web frameworks), so the files are reachable at paths like yoursite.com/favicon.ico and yoursite.com/apple-touch-icon.png. Then paste the included HTML snippet into the head of your pages; it declares the ICO, the PNG sizes, and the touch icon so every browser finds the version it prefers. Deploy, then hard-refresh: browsers cache favicons aggressively, so an old icon hanging around for a few minutes is normal, not a bug.

A quick sanity check before you call it done: open your site in a tab and squint. If you can still tell whose tab it is at a glance, the icon works. If you find yourself reading the title text to be sure, simplify the mark and generate again. The whole round trip takes under a minute, so iterate until the 16 pixel version actually earns its spot in the tab bar.

Frequently asked questions

What size should a favicon be?

There's no single size anymore, which is why this tool generates a set: 16 and 32 pixels for browser tabs, 180 for the iOS home screen, and 192 and 512 for Android and PWA manifests, plus a favicon.ico with 16, 32, and 48 pixel versions embedded. Start from a source image of at least 512 pixels square and every size comes out clean.

Do I still need a .ico file in 2026?

Yes, unfortunately. Older browsers only understand ICO, pinned shortcuts on Windows pull from it, and some crawlers and tools request /favicon.ico directly by convention without reading your HTML at all. It costs nothing to include, so include it.

Why does my favicon look blurry?

Almost always because the source image is too small or too detailed. Scaling a 64 pixel logo up produces mush, and an intricate logo scaled down to 16 pixels becomes unreadable noise. Use a source of at least 512 pixels square, and simplify: at tab size, a single bold letter or shape beats a full logo every time.

Where do I put the favicon files on my site?

Unzip the set into your site's root directory (or your web project's public folder), so favicon.ico is reachable at yoursite.com/favicon.ico, then paste the included HTML snippet into the head of your pages. The ZIP includes the snippet as a text file so you don't have to write it by hand.