100% local generation

One image in.
Every favicon size out.

Drop your logo and get favicon.ico, apple-touch-icon, Android adaptive icons, and a ready-to-use web manifest — plus the exact HTML to paste into your <head>. Nothing is uploaded.

App name

Used in the generated manifest — shown under your icon on Android home screens

Maskable background

Fills the safe-zone padding on Android adaptive icons

Generate & download

Load an image first

HTML to paste in <head>

Why this exists

Why one favicon size stopped being enough

Every platform asks for a different file

A browser tab wants a tiny 16x16 or 32x32 icon. iOS asks for a 180x180 PNG called apple-touch-icon.png the moment someone taps "Add to Home Screen." Android's manifest spec wants 192x192 and 512x512 versions, plus a separate "maskable" variant so its adaptive-icon system doesn't crop your logo unpredictably. A legacy favicon.ico — still requested directly by some crawlers, RSS readers, and older browsers — actually bundles several sizes (16, 32, 48) into one file using a format that predates PNG-based icons entirely.

None of these were designed together. Each one shipped years apart, from different companies, solving a different problem. The result is that "make a favicon" quietly turned into "export seven differently-sized files, name them exactly right, and wire up five link tags" — a small, boring task that's easy to get wrong in a way nobody notices until someone's Android home screen shows a weirdly cropped logo.

The exact sizes each platform actually requests

favicon-16x16.png / favicon-32x32.png — browser tabs, bookmarks, history
favicon.ico — legacy fallback some tools request directly from your domain root, bundling 16/32/48px
apple-touch-icon.png (180x180) — iOS home screen icon, must be fully opaque
android-chrome-192x192.png / 512x512.png — Android home screen and PWA install prompts
android-chrome-512x512-maskable.png — same size, but with safe-zone padding so adaptive-icon masking doesn't clip it
site.webmanifest — the JSON file that tells Android which icon to use and what to call your app

What "maskable" actually means, concretely

Android doesn't display your icon as a plain square. Depending on the phone's launcher theme, it gets masked into a circle, a rounded square, a squircle, or a teardrop — the OS decides, not you. If your logo fills the entire icon edge-to-edge, whatever falls outside that mask shape gets cut off. A maskable icon solves this by scaling your logo down to roughly two-thirds of the canvas, centered, with your chosen background color filling the rest — so no matter which shape the launcher applies, the parts of your logo that matter always survive inside it.

🖼️

Need to resize the source image first?

Use the main Image Editor to crop your logo to a perfect square before generating icons — a square source always produces the cleanest result.

Open Image Editor

Frequently asked questions

What size should a favicon be?

There isn't one size anymore. Browser tabs use 16x16 and 32x32, iOS home screens want 180x180, Android wants 192x192 and 512x512, and a legacy favicon.ico typically bundles 16, 32, and 48px together. This tool generates all of them from one source image.

Do I still need a favicon.ico file in 2026?

Mostly for compatibility. Modern browsers happily use a PNG favicon linked with a <link rel="icon"> tag, but some crawlers, RSS readers, and older tools still fall back to requesting /favicon.ico directly from your domain root. It's a small file, worth including anyway.

What is a maskable icon and why does part of my logo disappear on Android?

Android can mask your app icon into a circle, squircle, or rounded square depending on the device's launcher theme. If your logo fills the entire canvas edge-to-edge, the corners get cropped off by that mask. A maskable icon keeps your logo scaled down within a safe center zone with background color filling the rest, so nothing important gets clipped.

Is it safe to generate favicons from my logo here?

Yes. Your image is processed with the Canvas API entirely in your browser and never uploaded anywhere. You can disconnect from the internet after this page loads and the generator still works.

What's the difference between apple-touch-icon and a regular favicon?

apple-touch-icon is what iOS uses when someone adds your site to their home screen — it needs to be a solid, non-transparent 180x180 PNG since iOS fills transparency with white or black instead of showing it. A regular favicon is just for the browser tab and can stay transparent.