Favicon Generator: ICO, PNG & Apple Touch Icons

Which favicon files you actually need

Favicon guides love to list twenty files. You need about six. favicon.ico at the site root, because browsers and crawlers still request /favicon.ico by default even without a link tag. A 32x32 PNG for modern desktop tabs, plus a 16x16 for older ones. A 180x180 apple-touch-icon for iPhone and iPad home screens. A 192x192 and a 512x512 PNG listed in a web app manifest, for Android home screens and installable web apps. That is the set this generator builds, plus a 48x48 PNG, which is the smallest size Google's guidelines ask for.

Google Search shows your favicon next to your result on mobile. Its guidelines want a square icon at least 48x48 that is crawlable at a stable URL. A clear, distinctive icon there is free click-through rate.

How the files are made

Everything is drawn on a canvas in your browser. Each size is rendered directly at its target resolution instead of shrinking the 512px version, so the 16px icon is drawn at 16px and the letters stay as crisp as the browser can make them. Text is measured by its real glyph bounds and centered optically, so a lowercase g or an emoji does not sit off-center.

The .ico file is assembled byte by byte in JavaScript. An ICO is a small header, a directory of entries, then one image per size. This generator stores 16, 32 and 48 as 32-bit bitmaps with an alpha channel and a 1-bit transparency mask, the classic format that every browser and every version of Windows reads. Modern ICO files can also embed PNGs, which is smaller, but some older tools choke on it. At three small sizes the bitmap version is only a few kilobytes.

The zip is built by hand too, uncompressed, since PNGs are already compressed. Nothing is uploaded; your logo never leaves the tab.

Design rules for 16 pixels

At 16x16 you have 256 pixels. Your full logo with a wordmark turns into mush. Use one letter, a monogram or a simple symbol. Look at the 16px preview, not the 512px one. That is what people see in a crowded tab bar.

High contrast wins. A white letter on a saturated background survives both light and dark browser themes. A transparent icon with thin dark lines disappears in dark mode tabs. If you go transparent, test both themes.

Fill the space. The Size slider controls how much of the square the glyph takes up. Around 65 to 75 percent looks balanced for letters; emoji usually want a bit more. Too small and it looks lost next to other tabs.

Apple touch icons ignore transparency

iOS draws a home-screen icon as a rounded square and fills transparent pixels with black. So this generator always renders apple-touch-icon.png as a full square with your background color, even if you picked circle or transparent for the others. iOS applies its own corner rounding, so do not round it yourself or you get a double curve.

Installing it: a worked example

Download the zip and unpack everything into the root of your public folder: public/ in Astro, Vite or Next.js, the web root on a plain server. Paste the HTML snippet into the head of every page, usually in your base layout. Upload site.webmanifest to the same root. The snippet sets theme-color to your background color, which tints the browser UI on Android.

Then check it. Load /favicon.ico directly in a browser tab and it should render. Open DevTools, Application, Manifest, and the icons should show without errors. Browsers cache favicons aggressively, so if you still see the old one, try a private window or add a query string such as /favicon.ico?v=2 to the link tags.

Pitfalls

Wrong path. Link tags with relative paths like favicon.png break on nested pages such as /blog/post. Use root-relative paths starting with a slash, as the snippet does.

SVG favicons are great in Chrome and Firefox and can even switch colors in dark mode with a media query, but Safari support has been patchy. Keep the PNG and ICO set as the baseline and add an SVG on top if you want it.

Google needs time. After changing your favicon, search results can take days or weeks to update. Keep the URL stable so Google does not have to rediscover it.