# Favicon generator

URL: https://shahid09.is-a.dev/tools/favicon-generator/
Author: Muhammad Shahid (https://shahid09.is-a.dev/)
Free tool · runs in your browser

Create a full favicon set from an image, letter or emoji, ready to add to any website.

**Quick answer:** Choose an image, or type a letter or emoji with your colours, then press Generate to download a ZIP. It holds favicon.ico (16, 32 and 48 pixels), PNG icons up to 512 pixels, a 180-pixel Apple touch icon, a web manifest and the HTML to paste. Put the files in your site's root folder and the tags in your page's head.

## How to use it

1. **Choose the source.** Pick an image, or type a letter or emoji and set the colours.
2. **Check the previews.** See the icon at small sizes, where detail often disappears.
3. **Generate and install.** Download the ZIP, upload the files to your site root and paste the HTML into your head.

## Example

A letter icon produces this ZIP:

Input:

```
Text: A
Colour: white on blue
```

Output:

```
favicon.ico (16, 32, 48)
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png
apple-touch-icon.png (180)
icon-192.png, icon-512.png
site.webmanifest, snippet.html
```

## Common errors and how to fix them

- **My old favicon still shows**: Browsers cache favicons. Test in a private window or clear the cache.
- **The icon looks squashed**: Start with a square image, or choose how to fit a non-square one.
- **Details disappear at small sizes**: Simplify the image: use one letter or shape with strong contrast.

## Frequently asked questions

### What size should a favicon be?

Include 16, 32 and 48 pixels in favicon.ico, 180 for Apple devices, and 192 and 512 for Android and installed web apps. This tool makes them all.

### How do I add a favicon to my website?

Upload the files to your site's root folder and paste the HTML from this tool into the head of your pages.

### Why does my favicon not show?

Browsers cache favicons for a long time, so try a private window. Also check that the paths are correct and the files are public.

### How do I get my favicon into Google results?

Google needs a square icon of at least 8 × 8 pixels, and recommends one larger than 48 × 48, at a stable address that it is allowed to crawl. It can take days or weeks to appear.

### Should I use ICO, PNG or SVG?

Use ICO for widest compatibility, along with PNG for specific sizes. An SVG favicon can be a useful extra for sharp scaling on modern browsers.

### What makes a good favicon?

One simple shape or letter with strong contrast. A full logo with small text turns into a blur at 16 pixels.

### What is the web manifest for?

It tells phones and browsers the name and icons to use when your site is installed to a home screen.

### Is my image uploaded?

No. All the icons are drawn in your browser.

### Which image works best for a favicon?

A simple square logo with a transparent background. The [background remover](https://shahid09.is-a.dev/tools/background-remover/) can clear the surround first.

### Do I need all of these files?

Modern browsers need few, but the full set covers Apple and Android home screens as well. Each file is small, so keeping them all costs little.

## Related

- [Image resizer](https://shahid09.is-a.dev/tools/image-resizer/)
- [Image colour picker](https://shahid09.is-a.dev/tools/image-color-picker/)
- [HTML formatter](https://shahid09.is-a.dev/tools/html-formatter/)

## Sources

- [Google Search Central: Favicon in search results](https://developers.google.com/search/docs/appearance/favicon-in-search)
- [MDN: Web app manifest](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest)