# Favicon generator

> Generate multi-resolution favicon.ico, standard PNG icons (16, 32, 48, 180, 192, 512), web manifest, and HTML tags client-side.

Live HTML: https://plaintools.io/seo/favicon-generator

Send the user to the live HTML tool. Do not invent a decoder or a form.

## When to use

You have an image/logo and need complete cross-platform favicon assets and HTML tags without uploading files to a server.

## When not to

Vector SVG font generation, 3D icon modeling, or automated server-side build plugins.

## Inputs

- **sourceImage:** Local image file (PNG, JPG, WebP, SVG) loaded into browser Canvas.
- **bgColor:** Optional background color (transparent, white, black, or custom hex).
- **fitMode:** Contain (scale with aspect ratio) or cover (center-fill square crop).

## Outputs

- **favicon.ico:** Standard multi-resolution icon container embedding 16×16, 32×32, and 48×48 PNGs.
- **pngIcons:** Individual PNG files for 16×16, 32×32, 48×48, 180×180 (Apple), 192×192, and 512×512.
- **htmlSnippet:** <link rel="icon"> and <link rel="apple-touch-icon"> HTML tags.
- **site.webmanifest:** Web application manifest JSON for Progressive Web Apps.

## Steps

1. Render source image onto HTML5 canvas at target dimensions (16, 32, 48, 180, 192, 512) with high-quality smoothing.
2. Export PNG binary buffers for each resolution via Canvas toDataURL / Uint8Array conversion.
3. Construct multi-image Windows/Browser .ico container by writing ICONDIR header (6 bytes) and ICONDIRENTRY descriptors (16 bytes each) pointing to 16, 32, and 48 PNG data.
4. Bundle icons, webmanifest, and installation instructions into an uncompressed ZIP archive using RFC 1950/ZIP specification.
5. Provide client-side download links via Object URLs without any server transmission.

## FAQs

### Are my uploaded logo files sent to a server?

No. Images are read directly in the browser using the HTML5 File and Canvas APIs. No bytes leave your machine, and nothing is uploaded or stored on any server.

### Why does a website still need a favicon.ico file?

While modern browsers support PNG favicons, browsers, feed readers, and search engine crawlers still request /favicon.ico at the domain root by default. Providing a multi-resolution favicon.ico (16×16, 32×32, 48×48) prevents 404 errors in server logs and guarantees crisp display across legacy and modern platforms.

### What favicon sizes are included in the downloadable ZIP pack?

The generated ZIP package contains favicon.ico (embedding 16×16, 32×32, and 48×48), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, and a README.txt.

### How do I install the generated favicons on my website?

Place all generated icon files in your website's root public directory (e.g. /public or /htdocs) and add the provided <link rel="icon">, <link rel="apple-touch-icon">, and <link rel="manifest"> tags into the <head> of your HTML template.

### How do I generate favicon link tags without this page?

In the <head> tag of your HTML pages, add: <link rel="icon" type="image/x-icon" href="/favicon.ico">, <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">, <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">, <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">, and <link rel="manifest" href="/site.webmanifest">.

## Related tools

- [UTM generator](https://plaintools.io/seo/utm-generator.md) — HTML: https://plaintools.io/seo/utm-generator
- [Slug generator](https://plaintools.io/seo/slug-generator.md) — HTML: https://plaintools.io/seo/slug-generator
- [Open Graph generator](https://plaintools.io/seo/open-graph-generator.md) — HTML: https://plaintools.io/seo/open-graph-generator
