Favicon Generator

How the favicon generator works

Start from a logo, one to three letters or an emoji. The tool draws your design on a 512 × 512 px canvas in your browser, then shrinks it in halves (512 → 256 → 128 → 64 → 32 → 16) so small icons stay sharp instead of turning to mush. Nothing is uploaded — the files are built on your device.

The favicon.ico is a real multi-size icon file: a 6-byte header, a 16-byte directory entry for each size, then a PNG image per size. With three sizes (16, 32 and 48 px) the header and directory take 6 + 3 × 16 = 54 bytes, so the 16 px image starts at byte 54. Browsers pick the size that suits the screen, which is why one .ico file covers both ordinary and high-resolution tabs.

For the maskable icon, Android keeps only a circle 80% as wide as the icon — 410 px on a 512 px icon. With the default 22% safe-zone padding, your design sits in a 287 px square in the middle, whose corners are 203 px from the centre: just inside the 205 px safe radius, so nothing gets clipped whatever shape the phone uses.

Which favicon sizes do you need?

favicon.ico (16, 32, 48 px)

Browser tabs, bookmarks and anything that asks for /favicon.ico

favicon-96x96.png

Google Search results and desktop shortcuts

apple-touch-icon.png (180 px)

iPhone and iPad “Add to Home Screen”

android-chrome-192 / 512 px

Android home screen, install prompt and splash screen

maskable-icon-512x512.png

Android launchers that cut icons into circles or squircles

Everything else (144, 152, 167 px and so on) is optional today: iOS scales the 180 px icon, and Android uses the manifest icons.

Why isn’t my new favicon showing?

Browsers cache favicons hard, sometimes for days. Open the icon URL directly (for example example.com/favicon.ico), hard-refresh the page, or try a private window. Check that the files really are where the <link> tags point. Google Search shows your icon only after it recrawls your home page; it needs a square icon on a stable URL that Googlebot is allowed to fetch, and it recommends something larger than 48 × 48 px — the 96 px PNG fits that.

Tips for an icon that reads at 16 pixels

Use your logo’s symbol, not the full wordmark — words become a grey smudge at tab size. One or two bold letters on a solid colour work well. Check the “16 px, zoomed” preview: if you can’t tell what it is there, simplify. Give dark tabs a thought too; a dark logo on a transparent background can disappear in a dark browser theme, so add a background or a lighter version.

Frequently asked questions

Do I still need a favicon.ico file?

Yes, keep one at the root of your site. Modern browsers use the PNG links, but some browsers, RSS readers and tools still request /favicon.ico directly, and it costs only a few kilobytes.

What size should a favicon be?

Make the source at least 512 × 512 px (or use an SVG) and let the generator create the rest: 16, 32 and 48 px inside favicon.ico, 96 px for search results, 180 px for Apple devices and 192 and 512 px for Android.

Why does my Apple touch icon have a white background?

iPhones and iPads don’t support transparent home-screen icons — they fill transparent areas with black. The generator gives that file a solid background (white if you chose transparent) and leaves the rounding to iOS.

Can I convert a PNG to ICO with this tool?

Yes. Upload the PNG, choose “Fit whole image” with no padding and a transparent background, and download favicon.ico. It contains 16, 32 and 48 px versions of your image.

What is a maskable icon?

A version of your icon with a full background and extra padding, listed in the web manifest with purpose “maskable”. Android can then crop it into a circle, squircle or rounded square without cutting off your logo.