FAVICON GENERATOR
Favicon generator, the whole kit at once.
A favicon is the tiny icon shown in browser tabs, bookmarks and search results. A modern site needs more than a single 16×16 .ico: apple-touch-icon, PWA 192/512 and maskable, and a vector favicon.svg. This page explains each size and the reference code, and generates the full set in one click.
Open the icon generator (Favicon tab)The generator’s Favicon tab outputs a multi-size .ico + full PWA kit + favicon.svg. Everything runs locally — no upload.
What is a favicon?
A favicon (favorite icon) is the small icon for a site, shown in the browser tab, address bar, bookmarks, history and search results. The classic format is .ico (one file can hold multiple sizes); modern browsers also accept PNG and SVG. A complete set usually includes a multi-size favicon.ico, apple-touch-icon.png (iOS home screen), 192/512 PNGs for PWA (plus maskable), and a scalable favicon.svg.
Website icon size chart
Common sizes and uses; a .ico can bundle several sizes in one file.
| File | Size | Use |
|---|---|---|
favicon.ico | 16 / 32 / 48 | Browser tab / bookmarks (multi-size .ico) |
apple-touch-icon.png | 180 | iOS add-to-home-screen |
favicon-192.png | 192 | PWA / Android home screen |
favicon-512.png | 512 | PWA splash / store |
maskable-icon.png | 512 | PWA adaptive (safe zone) |
favicon.svg | 任意 | Vector, scales crisply |
How to reference in HTML
Drop these lines into your <head> (adjust paths as needed):
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">rel="icon" is for modern browsers, rel="apple-touch-icon" for iOS, and PWA icons are declared in the manifest.
Troubleshooting by symptom
These are the issues that trip people up most often in real projects — match your symptom and fix it below.
| Symptom | Cause | Fix |
|---|---|---|
| Icon changed but a refresh shows the old one | The browser aggressively cached the old file | Add a version query (e.g. favicon.svg?v=2) or hard-reload with Ctrl+F5 |
| No icon when adding to the iOS home screen | No apple-touch-icon, or it is not exactly 180x180 | Add a 180x180 apple-touch-icon; do not rely on the .ico |
| The Android home screen icon looks cropped | A plain icon was used with no safe zone | Also ship a maskable version with the artwork inside the middle 80% |
| The icon is hard to see in dark mode | The icon background is too close to the tab background | Make light and dark variants and switch them with a media query |
| The icon looks blurry at the edges | Only 16x16 was provided and it gets scaled up | Pack 16/32/48 into the .ico, or add an SVG alongside it |
How to use
- Upload a square image (or generate one from text / emoji).
- Preview every size on the Favicon tab.
- Click “Download all ZIP” to get the .ico, PNGs, SVG and site.webmanifest.
- Add the files to your project <head> and manifest using the code above.
FAQ
Why does favicon.ico contain multiple sizes?
.ico is a container that can bundle 16/32/48 bitmaps in one file; the browser picks the right one per context (16 for tabs, 32/48 for desktop shortcuts), avoiding blurry upscaling.
Do I need an SVG version?
Not required, but favicon.svg scales crisply and looks better on hi-DPI and in dark mode. Modern browsers widely support it — a good progressive enhancement.
What is a maskable icon?
Android adaptive icons get cropped into circles / rounded shapes; the maskable version keeps a safe zone around the subject so it is not clipped. PWAs should ship both any and maskable.
Are my images uploaded to a server?
No. Generation and zipping happen entirely in your browser; the source image never leaves your device.