Favicon & App Icon Generator

What Favicon & App Icon Generator helps you do

A site needs more than one icon file: a legacy favicon.ico, PNG sizes for browser tabs and home screens, a manifest for Android, and the link tags that tie them together. This tool renders the whole set from one square logo and packages it in a single download. It is the difference between a polished tab and the default globe icon.

The logo is drawn to canvases in your browser and every icon, the manifest, and the archive are created locally. The image is never uploaded.

How it works

The logo is drawn onto canvases at each target size. The ICO file bundles the 16, 32 and 48 px images; the PNGs are exported separately, and the manifest and HTML snippet are assembled from the app name and the fixed file paths. Everything is zipped in the browser, so the source image is never uploaded.

How to use Favicon & App Icon Generator

1. Drop a square logo, or browse to select a PNG, JPG, WebP, or SVG file.
2. Optionally set the app name and a solid background, then select Generate icons.
3. Download the .zip, upload the files to your site root, and paste the snippet into your page head.
4. Check the browser tab, the home-screen icon and a search result preview.

When to use it

• Launching a new site that still has the default browser icon.
• Replacing a blurry 32 px favicon with a full, retina-ready set.
• Adding an Android home-screen icon and manifest to a web app.
• Fixing a favicon that disappears in search results.
• Rebranding a site and updating every icon size at once.
• Adding an apple-touch-icon for an iOS home screen.

When not to use it

• Do not use a very wide or tall logo and expect a clean square icon.
• Do not expect the generator to design a simplified mark for 16 px; a detailed logo will turn to mush at that size.
• Do not skip uploading the files to the paths used in the snippet.

Example

A startup has a square SVG mark and a site name. The generator produces the ICO, seven PNGs, the manifest and the snippet. The ZIP is uploaded to the site root, the snippet is added to the layout head, and the tab icon appears after a hard refresh on desktop and Android.

What you can do with Favicon & App Icon Generator

• Render a multi-size favicon.ico at 16, 32 and 48 px.
• Render PNG icons at 16, 32, 48, 96, 180, 192 and 512 px.
• Generate a site.webmanifest for Android.
• Generate the matching HTML link snippet.
• Choose a solid background for light logos.
• Download everything in one ZIP.

Example: launch a new site icon

Start with a square SVG if you have one; it scales cleanly to 512 px. A PNG at 512×512 also works, but a small or non-square source will look soft or letterboxed.

Set the app name and choose a transparent or solid background. A transparent icon is usually right, but a light logo on a light page may need a solid tile.

Generate the ZIP, upload the files to the site root, and paste the snippet into the head of every page. Then hard-refresh the tab and check the Android home-screen icon.

What to know before you start

• The source should be square; very wide logos are letterboxed inside the square canvas.
• SVG sources need explicit width and height attributes for a predictable result.
• The manifest uses fixed 192 px and 512 px paths, so keep those two filenames when you upload.
• Google may still decline a favicon that is transparent or too low-contrast in search results.
• The generator does not simplify or redraw the logo for small sizes.

Common mistakes

• Using a detailed logo that is unreadable at 16 px.
• Uploading the files to a subfolder while the snippet points at the root.
• Leaving the manifest out and losing the Android home-screen icon.
• Choosing a transparent icon with a light mark on a light browser theme.
• Forgetting to hard-refresh or clear the favicon cache after replacing it.

Troubleshooting

If the icon does not change, clear the browser cache or open the site in a private window; favicons are cached aggressively.

If the tab icon is blank, check that favicon.ico and the PNG paths in the snippet return 200.

If the mark is cut off, the source was not square; use a square canvas with padding.

If an SVG renders at the wrong ratio, add explicit width and height attributes to the file.

If Google shows the old icon, wait for the crawler to recrawl and confirm the icon is at least 48 px and reachable.

Related standards and documentation

• The ICO container is a Microsoft icon format that can hold multiple sizes.
• The Web App Manifest is defined by the W3C and supplies Android icon metadata.