TV
Home All Tools Blog About

Favicon Generator

Convert any image into a favicon.ico file with all required sizes.

Preview

96×96

32×32

16×16

HTML Snippet

<link rel="icon" type="image/png" href="favicon.png">

How It Works

Upload a square image (logo or icon). The generator creates favicon files in all required sizes (16×16, 32×32, 48×48, 180×180) and generates the HTML link tags.

**Favicon Generator — Create Your Website Icon**

A favicon is the small icon displayed in browser tabs, bookmarks, and home screen shortcuts. Getting your favicon right requires multiple sizes for different contexts — our generator handles all of them automatically.

**What Sizes Are Required?**

| Size | Purpose |
|---|---|
| 16×16 | Browser tab (most browsers) |
| 32×32 | Browser tab (high DPI), Windows taskbar |
| 48×48 | Windows desktop shortcut |
| 64×64 | High-DPI favicon |
| 180×180 | Apple Touch Icon (iPhone, iPad home screen) |
| 192×192 | Android Chrome home screen |
| 512×512 | Progressive Web App (PWA) splash screen |

**HTML Link Tags Generated**

```html
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
```

**Best Practices for Favicon Design**

1. **Keep it simple** — Favicons are tiny. Complex logos lose detail. Use an icon or monogram instead.
2. **Use transparent background** — PNGs with transparent backgrounds adapt to different browser themes.
3. **High contrast** — Favicons must be recognisable at 16×16 on both light and dark browser UIs.
4. **SVG favicon** — Modern browsers support SVG favicons, which scale perfectly to any size.

**Web App Manifest**

For Progressive Web Apps (PWAs), our generator also creates a site.webmanifest file with icon references for all sizes, enabling users to add your site to their home screen with a proper icon.

Frequently Asked Questions

Use a square PNG with transparent background. For modern browsers, SVG is ideal as it scales to any size. Our generator accepts PNG, JPG, SVG, and GIF.
Use at least 512×512 pixels for the best quality when downscaling to all required sizes.
Yes, if you want your site to have a proper icon when added to iPhone/iPad home screens. Without it, a screenshot of the page is used instead.
An ICO file is a special image format that contains multiple image sizes in a single file. Browsers use favicon.ico by default when no explicit favicon is specified.
A JSON file (site.webmanifest) that defines metadata for Progressive Web Apps (PWAs), including icon sizes, app name, and display mode. Required for home screen installation prompts.