Favicon Generator
Generate favicons in all standard sizes from any image. Download 16×16, 32×32, 48×48, and 180×180 PNG files instantly. Runs entirely in your browser.
Input
Drop an image here
or click to browse: JPG, PNG, WebP, SVG
Square images work best
Settings
How to create a favicon
Upload a logo, pick the sizes, download the PNG files and add a few lines to your page head.
- 01
Upload a square logo or icon, at least 512 px
PNG with a transparent background gives the cleanest result; JPG, WebP and SVG also work. A non-square image is centre-cropped to a square, so keep the important part in the middle.
- 02
Pick the sizes you need
Nine sizes are available, from 16 × 16 to 512 × 512. 16, 32, 48, 180 and 192 are selected to start, which covers browsers, Apple devices and Android. Use All or None to change them quickly.
- 03
Generate and download
Each size is drawn as a PNG and named like favicon-32x32.png. Download one at a time or all of them; your browser may ask once to allow several downloads.
- 04
Upload them and add the link tags
Put the files in your site's root or public folder and reference them in the page head, as shown below.
Which sizes you actually need
Browsers pick the closest size they're given and scale it, so you don't need every size. For a normal website, five files are enough. Here's what each one is for:
| Size | Used for | Do you need it? |
|---|---|---|
| 16 × 16 | Browser tabs and bookmarks | Most important; shown smallest |
| 32 × 32 | Tabs on high-resolution screens, Windows taskbar | Recommended |
| 48 × 48 | Windows site tiles, Google search results | Recommended |
| 180 × 180 | apple-touch-icon for iPhone and iPad home screens | Recommended |
| 192 × 192 | Android home screen and PWA manifest | Recommended |
| 512 × 512 | PWA splash screen and install prompts | Only for installable web apps |
| 64, 96, 128 | Older or niche uses (high-DPI tabs, Google TV, Chrome Web Store) | Optional |
Google shows the favicon next to your site in mobile search results and asks for a square icon at a multiple of 48 px, which the 48 × 48 file covers. It must be reachable at the URL your link tag points to, and not blocked by robots.txt.
The HTML to add
With the files in your site's root folder, these lines in the <head> cover most browsers and devices: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">, the same for 16x16 and 48x48, and <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">. For an installable web app, list the 192 and 512 files in your manifest.json icons array instead.
Next.js, Astro and similar frameworks also pick up special file names automatically, such as app/icon.png and app/apple-icon.png in the Next.js App Router. Check your framework's docs before adding tags by hand, or you may end up with two sets.
When you need new icons
Replacing a blank or default icon
A site with the hosting company's default icon looks unfinished in a row of tabs. Ten seconds with a logo fixes that.
Adding a home-screen icon
Without a 180 × 180 apple-touch-icon, iPhones use a blurry screenshot of the page when someone adds it to their home screen.
Preparing icons for a PWA
Generate 192 and 512 for the manifest, and keep them in the same folder as the rest of your icons.
Design tips and limits
- Simplify for 16 px. A full logo with words turns into a smudge at 16 × 16; a single letter or symbol reads far better. Check the 16 px preview before downloading.
- There's no .ico file. Every modern browser accepts PNG favicons, so you only need favicon.ico if you have to support very old Internet Explorer versions. Convert the 32 × 32 PNG with a separate tool if so.
- No manifest.json is generated. Write the icons section yourself, pointing at the 192 and 512 files.
- Transparent areas stay transparent. On a dark browser theme, a black logo on transparency can disappear, so consider a solid background square.