Favicon Generator — Every Favicon Size from 16×16 to 512×512
A favicon is not one size — it is a set. The five that carry the load: 16×16 and 32×32 for the browser tab, 180×180 for the iPhone home screen, and 192×192 + 512×512 for Android and installable web apps. Put 16, 32 and 48 inside a single favicon.ico and everything else is covered.
Search engines add their own numbers: Google draws the result icon at 48×48 and wants a multiple of 48 at a stable URL; Yandex recommends 120×120 or an SVG. Every image must be square — a 1:1 ratio.
Source resolution to design from: 512×512 · Smallest Google will accept: 8×8 · full size table ↓
Every favicon size, and what asks for it
“Essential” means something visibly breaks without it. “Optional” sizes are cheap to include and occasionally requested, which is why they are in the download — but no mainstream surface fails if you skip them.
| Size | File | Where it shows up | Need it? |
|---|---|---|---|
| 16×16 | favicon.ico, favicon-16x16.png | Browser tab, bookmark bar, history list | Essential |
| 32×32 | favicon.ico, favicon-32x32.png | High-DPI browser tab, Windows taskbar and shortcuts | Essential |
| 48×48 | favicon.ico, favicon-48x48.png | Google Search result icon, Windows desktop shortcut | Recommended |
| 64×64 | favicon-64x64.png | Windows site pins, older desktop shortcuts | Optional |
| 96×96 | favicon-96x96.png | Google TV, older Android home screens | Optional |
| 120×120 | favicon-120x120.png | Yandex Search result icon, legacy iPhone touch icon | Recommended |
| 128×128 | favicon-128x128.png | Chrome Web Store, browser extensions | Optional |
| 180×180 | apple-touch-icon.png | iPhone and iPad home screen (iOS 8 and later) | Essential |
| 192×192 | android-chrome-192x192.png | Android home screen, read from the web app manifest | Essential for PWA |
| 256×256 | favicon-256x256.png | Windows tiles, high-DPI desktop surfaces | Optional |
| 512×512 | android-chrome-512x512.png | PWA install prompt and Android splash screen | Essential for PWA |
| Vector | favicon.svg | Modern browsers and Yandex — one file, every size | Nice to have |
The generator below produces every row except the last one: eleven PNGs plus a multi-resolution favicon.ico holding 16, 32 and 48. An SVG favicon has to come from a vector logo, so it is not something a raster generator can invent — author it by hand and add the one extra <link> shown further down.
Drop an image or click to upload
PNG, JPG, SVG, or WebP — a square logo works best
<link rel="icon" href="/favicon.ico" sizes="any"> <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="icon" type="image/png" sizes="120x120" href="/favicon-120x120.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
The size table above is the short answer; this generator is the rest of it. Type a couple of letters or drop in a logo and get every size in one download — favicon.ico plus PNGs from 16×16 to 512×512, an Apple touch icon, a web app manifest, and the exact HTML to paste into your head. Everything is drawn in your browser, so nothing is uploaded anywhere.
Favicon size rules for Google and Yandex
These two are the only surfaces where the wrong size costs you something visible — a blank square next to your result. Both read the icon from the home page, so the <link> has to be present there, and both want the URL to stay put once they have crawled it.
| Engine | Minimum | Recommended | Formats |
|---|---|---|---|
| Google Search | 8×8 | A multiple of 48 — 48×48 or 96×96 | ICO, PNG, JPEG, GIF, BMP, PPM, TIFF |
| Yandex Search | 16×16 | 120×120, or an SVG | SVG, ICO, PNG, JPEG, GIF, BMP |
- · One icon per hostname. SVG is not on Google's accepted list, so never ship SVG only.
- · SVG is Yandex's own recommendation. Animation is ignored.
Which sizes do you actually need?
Blog or landing page
favicon.ico (16/32/48)
One file, one line of HTML, and the tab plus both search engines are covered. This is the floor, not a compromise.
Normal website
+ 16, 32, 120, 180 PNG
Adds crisp high-DPI tabs, the iPhone home-screen icon and Yandex's preferred 120×120. Five lines of markup.
Installable web app
+ 192, 512 + manifest
Android reads these two from the manifest for the home screen and the splash. Without 512×512 the install prompt will not appear at all.
The HTML for each size
favicon.ico — 16×16, 32×32, 48×48
sizes="any" tells the browser this one file holds several resolutions and lets it pick. Browsers request /favicon.ico from the site root anyway, so the file has to live there even if you also declare it.
<link rel="icon" href="/favicon.ico" sizes="any">
PNG — 16×16 and 32×32
Sharper than the .ico on high-DPI screens, and the sizes attribute is what the browser matches against its device pixel ratio.
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
Apple touch icon — 180×180
No transparency here: iOS flattens the icon onto black, so a transparent background turns a light logo invisible. Give it a solid fill.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Android and PWA — 192×192 and 512×512
These are declared in site.webmanifest, not in link tags. The generator writes this file for you.
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png",
"purpose": "any maskable" }
]
} SVG — any size
Optional, and it goes on top of the raster set rather than replacing it. Chrome and Firefox prefer it when present; Safari and Google Search fall back to the .ico.
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Four ways a favicon goes wrong
- One big PNG for everything. A 512×512 squeezed into 16 pixels turns into mush. Each size needs its own render, which is why the download has eleven files rather than one.
- A non-square source. Google requires a 1:1 ratio and ignores anything else. If your logo is a wide wordmark, crop out the symbol or set it on a square background — the image cropper does the crop, and the aspect ratio calculator tells you whether you are already at 1:1.
- Too much detail. At 16 pixels you have room for one shape or two letters. Full wordmarks, gradients and thin outlines all disappear. Test by looking at the 16×16 file at its real size, not zoomed in.
- Assuming it did not deploy. Browsers cache favicons far more aggressively than pages, and Google can take weeks to refresh the search-result icon. Open /favicon.ico directly before concluding anything is broken.
How it works
- 1 Choose text or an image Switch to the Text tab and type up to two letters, or switch to Image and drop in a logo (PNG, JPG, SVG, or WebP). A square source works best.
- 2 Pick a colour and shape Set a background colour for text mode and choose square, rounded, or circle corners. The live preview updates as you go.
- 3 Download and install Click Download favicon package to get a zip of every size plus favicon.ico. Unzip it into your site root and paste the HTML snippet into your <head>.
Your data stays private
All processing happens entirely in your browser. No files, text, or data are ever sent to our servers. You can disconnect from the internet and this tool will still work.
Frequently asked questions
- What size should a favicon be?
- There is no single size — a favicon is a set. The ones that matter: 16×16 and 32×32 for the browser tab, 48×48 for the Google Search result icon, 120×120 for Yandex, 180×180 for the iPhone home screen, and 192×192 plus 512×512 for Android and installable web apps. Pack 16, 32 and 48 into one favicon.ico and ship the rest as PNGs.
- Can a favicon be any size?
- It has to be square — a 1:1 aspect ratio — and browsers will scale whatever you give them, so a single 512×512 PNG technically works. It just looks muddy at 16 pixels, because downscaling by 32× destroys thin strokes. Rendering each size separately, which is what this generator does, is why a purpose-built 16×16 stays legible.
- What size should favicon.ico be?
- The .ico format is a container, so the file holds several images at once. The standard contents are 16×16, 32×32 and 48×48 — that covers the browser tab, Windows shortcuts, and Google's search-result icon from one URL. The favicon.ico here contains exactly those three.
- Is 16×16 or 32×32 better?
- Ship both. 16×16 is what a standard-DPI tab draws; 32×32 is what a Retina or 150%-scaled display picks so the icon is not blurry. They cost a few hundred bytes together and both live inside favicon.ico, so there is nothing to choose between.
- What favicon size does Google use in search results?
- Google renders the search-result favicon at 48×48. Its documented minimum is 8×8, but it asks for a size that is a multiple of 48 — 48×48 or 96×96 — at a URL that does not change. Google reads one favicon per hostname, and SVG is not among the formats it accepts, so an SVG-only setup gets no icon in search.
- What favicon size does Yandex want?
- Yandex supports 16×16, 32×32 and 120×120 and explicitly recommends 120×120 or an SVG, because those render sharply across its services. Animation is ignored. The package here includes a 120×120 PNG for exactly this reason.
- What size is the Apple touch icon?
- 180×180 PNG, referenced with rel="apple-touch-icon". That is the size iOS 8 and later use for the home-screen shortcut. Older 76, 120 and 152 pixel variants are no longer worth shipping — iOS downscales the 180 for them. Avoid transparency: iOS composites the icon onto a black background.
- Do I need an SVG favicon?
- It is a bonus, not a replacement. An SVG favicon scales to any size from one file and can adapt to dark mode with a media query, and it is Yandex's recommended format — but Safari support is partial and Google does not accept SVG for the search-result icon. Ship the raster set first, then add the SVG on top.
- Do I still need a favicon.ico if I have PNGs?
- Yes, it's the safest default. Older browsers and many feed readers, bookmarking tools, and crawlers look for /favicon.ico first. The package includes one so every client is covered.
- Is my image uploaded to a server?
- No. The image is read and rendered with the HTML canvas inside your browser. It never leaves your device — you can even generate favicons offline once the page has loaded.
- Where do I put the files and the code?
- Unzip everything into the root folder of your website (the same place as your homepage), then paste the six-line snippet into the <head> of your HTML. Clear the browser cache if the old icon lingers.
- Why do I only see the first two letters?
- A favicon is tiny — often 16 pixels wide — so only one or two characters stay legible. The generator takes the initials of what you type: 'belun.app' becomes BA, 'Acme' becomes AC.