Favicon generator

Which files a site needs

• favicon.ico at the site root, holding 16, 32 and 48 pixel versions. Browsers, feed readers and search engines still request it by that path.
• favicon.svg when the mark is simple. It stays sharp at every size and can respond to dark mode with a media query inside the file. The tool writes one for letter marks.
• 32 and 16 pixel PNGs for browsers that prefer PNG over ICO, declared with sizes.
• apple-touch-icon.png at 180 pixels for the iOS home screen. iOS rounds the corners itself and shows transparent areas as black, so this one is rendered square and should be opaque.
• 192 and 512 pixel PNGs listed in site.webmanifest, used by Android, install prompts and splash screens.

How the ICO is built

An ICO file is a small container: a 6 byte header with the image count, a 16 byte directory entry per image holding its width, height, bit depth, byte length and offset, then the image data. Since Windows Vista the entries may be PNG files rather than raw bitmaps, and every browser reads that form. The tool draws each size on a canvas, lets the browser encode it as PNG, writes the header bytes itself and packs the three PNGs. It then hands the result back to your browser as an image, so the green check means the file was decoded by a real ICO reader. Nothing is uploaded; the canvas, the encoding and the download all happen on this page.

Letter marks that survive 16 pixels

At tab size there is room for about two bold letters. Use a heavy weight, strong contrast between fill and letters, and a corner radius around 20 percent so the shape reads as a tile rather than a circle. Thin serifs and three letter abbreviations blur into a smudge. The same goes for uploaded logos: wordmarks and fine detail need a dedicated small version, usually just the symbol.

Where the files go

Put the files in the public root and paste the <link> tags into <head>. With the Next.js App Router you can skip the tags: app/favicon.ico, app/icon.png, app/apple-icon.png and app/manifest.webmanifest are picked up by file name and the metadata is generated for you.