Drag-n-Drop
to upload your archive
Favicon Generator
Make a full favicon set from one image
Drop in a PNG, JPEG, WEBP or SVG and get every icon a modern site actually needs: a real multi-size favicon.ico, PNGs from 16 to 512 pixels, an apple-touch-icon for iOS home screens, a site.webmanifest for installable web apps, and the exact <link> tags to paste into your <head>. Your image never leaves your browser.
Source image:
100% client-side — nothing is uploaded to any server
Icon options
Transparency is preserved by default. Pick a flat background colour if you want the .ico to stay legible on dark browser chrome — Windows and older bookmark bars do not always composite alpha the way you expect.
Breathing room around the artwork. Around 10% suits wordmarks and dense logos; leave it at 0 for a glyph that already has its own margin.
iOS already masks home-screen icons for you, so leave this off unless you are also serving the 180×180 file somewhere that does not apply its own mask.
16, 32, 48, 64, 96, 180, 192 and 512 pixels, plus a multi-size favicon.ico containing the 16, 32 and 48 versions.
Web app manifest
These fields fill in the site.webmanifest. Chrome and Edge read it to decide whether your site can be installed, and Android uses the theme colour for the status bar.
theme_color and the <meta name="theme-color"> tag.
Every size, generated
Each preview is the real output canvas at its true pixel size, on a checkerboard so you can see exactly where transparency lands.
How the 32×32 looks in a browser tab
Upload the files to the root of your site so these absolute paths resolve. If you serve them from a subfolder, change the href values to match.
The 192 and 512 icons are declared as "purpose": "any maskable", so Android can crop them into whatever shape the launcher uses without falling back to a white plate.
-
Every size browsers ask for
16 and 32 for tabs, 48 for Windows shortcuts, 96 for Android search results, 180 for the iOS home screen, 192 and 512 for the PWA manifest. One image in, the whole set out.
-
Your logo never leaves the tab
Resizing, the ICO packing and the zip all happen in your browser with canvas and typed arrays. There is no upload endpoint, so an unreleased brand mark stays on your machine.
-
A real .ico, not a renamed PNG
The
favicon.icois a genuine ICO container with three directory entries — 16, 32 and 48 — so each context picks the size it needs instead of resampling one image badly.
How to generate a favicon
-
1
Drop a square PNG, JPEG, WEBP or SVG onto the box above, or click to choose one.
-
2
Adjust the background, padding and app name until the previews look right at 16 pixels.
-
3
Download the zip, drop the files at your site root, and paste the
<link>snippet into your<head>.
Everything a favicon set needs in 2026
-
apple-touch-icon, sized correctly
iOS looks for a 180×180 PNG and does not read alpha the way a browser tab does. We flatten it against your chosen colour and can pre-round the corners if you need the file to look finished outside Safari.
-
Maskable PWA icons
The 192 and 512 manifest entries are marked
"purpose": "any maskable". Add roughly 10% padding and Android launchers can crop your icon into a circle, squircle or teardrop without clipping the artwork. -
Copy-paste HTML, plus a README
The zip carries every PNG, the ICO, the manifest and a README with the exact
<link>tags and what each file is for — so whoever ships the change does not have to guess.
Which favicon sizes actually matter
A favicon is not one file any more. Browsers, operating systems and app launchers each reach for a different asset, and the wrong size gets downscaled on the fly — which is exactly how a crisp logo turns into a grey smudge in a tab.
16×16 is the classic tab and address-bar icon on standard-density displays. It is also the size that punishes detail: thin strokes and small type disappear. If your mark has more than one or two shapes, simplify it before you generate.
32×32 is what most people actually see, because retina and high-DPI screens render the 16-pixel slot at double density. It is also the size Windows uses for taskbar shortcuts. Treat 32 as your primary target.
48×48 shows up in Windows desktop shortcuts and site tiles, and it rides along inside favicon.ico. 96×96 covers Android shortcuts and some search result treatments.
180×180 is the apple-touch-icon: the file iOS grabs when someone adds your site to their home screen. Skip it and Safari screenshots your page instead, which never looks intentional.
192×192 and 512×512 belong to the web app manifest. Chrome needs both before it will offer an install prompt, and the 512 also drives the splash screen on Android.
Why favicon.ico is still worth shipping
Every current browser reads PNG favicons, so it is tempting to drop the .ico entirely. Do not. Browsers still request /favicon.ico from your site root automatically when no <link rel="icon"> resolves — and plenty of things that render your site are not browsers at all.
Feed readers, chat clients, link-preview crawlers, bookmark managers, some corporate proxies and older intranet browsers all fall back to that fixed path. Without the file they log a 404 against your site on every cold visit, and show a blank page icon.
The other reason is that ICO is a container, not a single bitmap. One file holds several resolutions, each with its own directory entry, and the consumer picks the closest match. That is why we pack 16, 32 and 48 into it: a bookmark bar takes the 16, a Windows shortcut takes the 48, and neither has to resample.
This tool builds that container byte by byte in your browser — a six-byte header, one sixteen-byte directory entry per image, then the PNG payloads. PNG-compressed ICO entries are part of the format and are read correctly by every browser in current use, as well as by macOS Preview and Windows Explorer.
Generated your favicons? Publish the site they belong to with free static hosting
Frequently asked questions
What is a favicon?
A favicon is the small icon a browser shows in the tab, the bookmarks bar and the history list for your site. It is the smallest piece of branding you own, and it is one of the first things people notice when your page sits among twenty other open tabs. Search engines also display favicons next to results on mobile.
What favicon sizes do I actually need?
A practical modern set is 16x16 and 32x32 for browser tabs, 48x48 for Windows shortcuts, 180x180 for the Apple touch icon used when someone adds your site to an iOS home screen, and 192x192 plus 512x512 for the web app manifest used by Android and installable PWAs. This generator produces all of them, plus 64 and 96 for good measure.
Do I still need a favicon.ico file?
Yes, it is still worth shipping one. Older browsers, some feed readers and various crawlers request /favicon.ico from your site root regardless of what your HTML declares, and serving it avoids a stream of 404s in your logs. The ICO container we build packs the 16, 32 and 48 pixel PNGs into a single file, which every browser and macOS Preview reads correctly.
What is a maskable icon?
Android may crop your app icon into a circle, a squircle or a rounded square depending on the launcher. A maskable icon keeps all its important content inside a central safe zone, roughly the middle 80 percent, so nothing critical is cut off whichever shape is applied. The manifest this tool generates marks the 192 and 512 icons as "purpose": "any maskable".
What source image works best?
Start from a square image of at least 512x512 pixels, ideally an SVG or a high resolution PNG with a transparent background. Simple, high contrast shapes survive being scaled down to 16 pixels; detailed logos and thin text turn to mush. If your logo is wide, crop or redraw a square mark rather than shrinking the whole lockup.
Is my image uploaded anywhere?
No. Every resize, the ICO packing and the zip are done in your browser with the Canvas API. Your image never leaves your device, which means you can safely generate icons from unreleased branding.
How do I install the generated files?
Upload the files to the root of your site, then paste the generated HTML snippet into your <head>. If an old icon lingers, browsers cache favicons aggressively: force a reload, or rename the file and update the snippet. Our Meta Tag Generator produces the rest of the head block that belongs next to it.
Can I host the site with these icons on Static.app?
Yes. Drop the zip contents into your project folder, upload it to Static.app, and your site is live on a custom domain with free SSL. Because the icons are plain static files, there is no build step and nothing to configure.