# Favicon Generator

URL: https://tools.otaku-dojo.com/en/favicon-generator
Updated: 2026-10-04

The Favicon Generator turns one image (ideally a square PNG or SVG) into every icon a website needs: a favicon.ico containing 16, 32 and 48 px images, 16 and 32 px PNGs, a 180 px Apple Touch Icon, 192 and 512 px Android / PWA icons and a site.webmanifest, along with HTML tags to paste into your <head>. Everything is generated in your browser — the image is never uploaded.

## How to use the Favicon Generator

1. Enter your site name (used in site.webmanifest) and choose a background color and padding if needed.
2. Drop your logo into the dashed box — a square PNG or SVG of 512×512 or larger works best.
3. Press "Download all" and put the files in your site's root folder.
4. Copy the HTML tags below and paste them into your page's <head>.

## Specs & key facts

- **Output**: favicon.ico (16/32/48), 16 / 32 PNG, Apple Touch Icon 180, Android 192 / 512, site.webmanifest
- **Input**: PNG, SVG, JPG, WebP (square, 512×512+ recommended)
- **Non-square images**: Centered and scaled with transparent margins
- **Options**: Background color, 10% padding, site name
- **Extras**: Ready-to-paste <head> HTML tags
- **Privacy**: Generated in your browser; never uploaded

## Examples: Generated files and HTML

```text
logo.png (512×512, transparent)
```

→

```html
favicon.ico, favicon-16x16.png, favicon-32x32.png,
apple-touch-icon.png, android-chrome-192x192.png,
android-chrome-512x512.png, site.webmanifest

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
```

## FAQ

### I changed my favicon but the browser shows the old one. Why?

Browsers cache favicons aggressively. Add a version to the URL (for example /favicon.ico?v=2) or clear the cache and reopen the page.

### Will Google show my favicon in search results?

Yes, if your home page has a <link rel="icon">, the icon is at least 48×48 and Googlebot can crawl it. New icons can take a few days to appear.

### Why is the Apple Touch Icon filled with a color?

iOS renders transparent areas as black, so the 180×180 Apple Touch Icon is always filled with the background color you choose.

### Can I use an SVG favicon?

Modern browsers support SVG favicons, but Safari and some older browsers do not, so also provide the favicon.ico and PNGs generated here.