Favicon Generator

Two details cause most favicon problems. First, iOS composites transparent icons onto a black background, so an Apple touch icon with transparency usually looks broken on a home screen — give it a solid background colour, which is why the option defaults on here. Second, detail does not survive the 16-pixel size: a logo with fine text or thin lines becomes an unreadable smudge in a browser tab, so the icon should be a single bold mark, a letter, or a heavily simplified version of your logo. Design for 16 pixels first and let the larger sizes take care of themselves, rather than the other way round.

The largest centred square of the source is drawn into each target size, inside any padding you set, over the chosen background. The manifest lists the 192 and 512 pixel icons that Android and installable web apps require.

Output is PNG only — no legacy .ico file is produced, which is fine for every current browser but may matter for very old versions of Internet Explorer. The source is cropped to a centre square, so an off-centre or wide logo should be prepared first. There is no maskable-icon safe-zone preview, so check Android adaptive icons if that matters for your app.

A square logo produces favicon-16x16, favicon-32x32, favicon-48x48, apple-touch-icon at 180, and Android icons at 192 and 512 — six files plus the manifest and snippet, in one ZIP.

1. Choose an image, or switch to letter mode and type one or two characters.
2. Pick a background colour and any padding.
3. Enter your site name for the manifest.
4. Unzip into your site root and paste the HTML snippet into your head.

• Using a transparent icon for iOS, which composites it onto black.
• Submitting a detailed logo that becomes illegible at 16 pixels.
• Uploading a rectangular image, which gets cropped to its centre square.
• Adding the files but forgetting the HTML snippet, so browsers never find them.

This tool generates the complete favicon set a modern site needs — six PNG sizes covering browser tabs, iOS home screens and Android — plus a site.webmanifest and the HTML snippet to paste into your head. Everything arrives in a single ZIP, built in your browser.

Developers and site owners setting up favicons properly rather than dropping one file in the root.

• Every size that matters, not just a single favicon.ico.
• Includes the web manifest and a ready-to-paste HTML snippet.
• Letter mode needs no source image at all.
• Padding and background options so iOS icons look right.

• Setting up favicons for a new site.
• Making an icon set from a logo.
• Creating a quick letter-based icon for a side project.
• Adding the PWA manifest icons an installable site needs.