Turn one square image into a complete favicon pack — real favicon.ico, PNG sizes, web manifest, and paste-ready code for five frameworks.
Content last reviewed
Drop a square image
PNG, JPG, WEBP (512x512 recommended)
512×512 or larger keeps every generated size crisp.
Your app name and theme colour feed the web manifest and tile configuration.
Grab the ZIP, drop the files in your site root, and paste the snippet for your framework.
The standard run: a square logo becomes the complete deployable set.
Input
logo.png (1024×1024) · App name "Fernweh Coffee" · theme colour #2d5a3dOutput
A ZIP containing favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, mstile-150x150.png, site.webmanifest, and browserconfig.xml — plus the head snippet for your frameworkA favicon is your site's identity at its smallest — the browser tab, the bookmark list, the phone home screen, and eventually the icon beside your name in Google results. The design was never the hard part; the hard part is that one logo must become a dozen files with exact sizes, exact names, a real .ico, a web manifest, and the right tags in your head. This generator does all of that from a single square upload.
The pack covers what the modern web actually requests: a genuine multi-resolution favicon.ico (16, 32, and 48 pixels encoded into one file — built with a real ICO encoder, not a renamed PNG), PNG favicons at 16 and 32, the 180-pixel Apple touch icon for iOS home screens, 192- and 512-pixel Android/PWA icons, a Windows tile image, plus the site.webmanifest and browserconfig.xml that reference them — pre-filled with the app name and theme colour you enter. Previews show the icon in context, including the small sizes where legibility is decided.
Installation is the other half, so the tool generates the code too: paste-ready snippets for plain HTML, Next.js (both App and Pages router), React with react-helmet, and Nuxt/Vue, each with the correct link tags and manifest wiring. One design note before you upload: detail dies at 16 pixels. The favicons you recognize instantly are simple by necessity — if your full logo is intricate, crop to its strongest single element (the Quick Image Editor does this) and generate from that.
Drop in a square image — PNG, JPG, or WebP, ideally 512×512 or larger. Crop non-square logos first (the Quick Image Editor handles it).
Enter your site/app name and theme colour — they populate the web manifest and Windows tile configuration in the pack.
Review the previews, paying particular attention to the smallest sizes: if the 16-pixel version is not recognizable, simplify the source and re-upload.
Choose your framework — HTML, Next.js App Router, Next.js Pages, React (react-helmet), or Nuxt/Vue — and copy the generated snippet.
Download the ZIP, place its files in your site's root (public) directory, paste the snippet into your head or config, and deploy. Hard-refresh to see the new icon past the browser's cache.
A genuine multi-resolution ICO containing 16, 32, and 48-pixel versions, binary-encoded in the browser — not a renamed PNG.
PNG favicons (16, 32), Apple touch icon (180), Android/PWA icons (192, 512), and a Windows tile (150) — every file the modern web requests.
site.webmanifest and browserconfig.xml are generated with your app name and theme colour already filled in.
Paste-ready installation code for HTML, Next.js App and Pages routers, react-helmet, and Nuxt/Vue.
See the icon at tab size, iOS home-screen shape, and Android circle before you commit.
Every file, correctly named for site-root deployment, in one archive.
Generate the full icon pack once and ship a complete head configuration from day one.
Regenerate from a clean, high-resolution source and cover the sizes the old setup missed.
Produce the 192 and 512 manifest icons progressive web apps need for installation.
Swap every icon surface — tabs, home screens, tiles, search — in one regeneration.
Your image is rendered onto canvases at each required size — 16, 32, 48, 96, 150, 180, 192, and 512 pixels — and encoded to PNG per size. The .ico file is then assembled by a purpose-built encoder: browsers cannot export ICO natively, so the tool writes the ICO binary structure by hand — header, directory entries, and the embedded 16/32/48 PNGs — producing a genuine multi-resolution icon file.
The site.webmanifest is generated with your app name, theme colour, and references to the two Android icons; browserconfig.xml wires the Windows tile. The framework snippets reference the same fixed filenames the ZIP uses, so the pack works by simply dropping the files into your site root and pasting the code.
Each surface requests its own resolution: browser tabs use 16 and 32, Google results require at least 48, iOS reads the 180 apple-touch-icon, and Android/PWA installs pull 192 and 512 from the manifest. Providing the full set means every surface renders a crisp, purpose-sized icon instead of a scaled blur.
One square source image; 512×512 or larger recommended so every generated size stays sharp.
favicon.ico, six PNG sizes, site.webmanifest, and browserconfig.xml — named for direct site-root deployment.
Written into the web manifest (and the Next.js metadata snippet).
Sets theme-color and the Windows tile colour across the manifest, config, and snippets.
Switch the installation snippet between HTML, Next.js App/Pages, react-helmet, and Nuxt/Vue.
Favicon caching is notoriously aggressive — hard-refresh (Ctrl+F5), try a private window, or append a version query like ?v=2 to the icon URLs in your tags. Visitors' caches expire on their own schedule.
The source has too much detail for tab size. Crop to the logo's strongest single element — an initial, the icon part of the mark — and regenerate.
Icons render from a square canvas. Crop the source to a square first (Quick Image Editor), positioning the mark how you want it, then upload.
Google fetches favicons on its own crawl schedule — days to weeks — and requires at least 48×48 at a stable URL not blocked by robots.txt. The pack meets the requirements; the wait is Google's.
The generator produces the standard pack from one source image — there is no per-size art direction (some teams hand-tune the 16-pixel version separately), no padding/background editor, and no maskable-icon variant for Android's adaptive shapes beyond the standard icons. The source should be square; non-square inputs will not be art-directed for you. Snippets cover five common setups — other frameworks need the HTML tags adapted to their head mechanism.
Your logo is rendered, encoded — including the ICO assembly — and zipped entirely in your browser. Nothing uploads, which also means unreleased brand marks stay private until you deploy them.
Start from a simple, bold mark — recognizability at 16 pixels beats completeness every time.
Upload at 512×512 or larger so the big Android and iOS sizes stay sharp.
Check the small-size previews before downloading; that is where the design succeeds or fails.
Test against dark browser themes — transparent-background marks can vanish in dark tab bars.
After deploying, hard-refresh and verify /favicon.ico serves directly.
Design for the smallest surface first. The 16-pixel tab icon is the version seen most often, and it forgives nothing: one strong shape, high contrast, no text beyond a single letter. If the mark reads at 16, every larger size is free; the reverse is never true.
Mind the background. Tabs, home screens, and search results place your icon on white, grey, and near-black surfaces — a mark that depends on the page's background will disappear on one of them. A subtle filled disc or rounded square behind the mark is the standard, robust fix.
And finish the deployment properly: files in the site root, snippet in the head, a direct-URL check on /favicon.ico and the manifest, and a cache-busting query if you are replacing an old icon. Half-deployed favicon packs are why "my favicon doesn't show" is a perennial question.
The source renders to canvases at 16/32/48/96/150/180/192/512 and encodes to PNG per size. favicon.ico is assembled client-side by writing the ICO container format directly — 6-byte header, 16-byte directory entries, and embedded PNG payloads for 16/32/48 (PNG-in-ICO, supported by all modern consumers). site.webmanifest and browserconfig.xml are generated from the name and theme colour, and the ZIP is packaged with JSZip. Framework snippets are templated against the pack's fixed filenames. All processing is local.
| File | Size(s) | Consumed by |
|---|---|---|
| favicon.ico | 16 + 32 + 48 | Legacy browsers, direct /favicon.ico requests |
| favicon-16x16 / 32x32.png | 16, 32 | Browser tabs and bookmarks |
| apple-touch-icon.png | 180 | iOS home screens |
| android-chrome-192/512.png | 192, 512 | Android and PWA installs (via manifest) |
| mstile-150x150.png | 150 | Windows tiles (via browserconfig) |
| site.webmanifest | — | Names the app and lists the Android icons |
| browserconfig.xml | — | Windows tile colour and image |
Developers launching sites who want the icon chore done in one pass; designers handing off a complete, correctly named pack instead of a bare PNG; and site owners whose current favicon is blurry, missing on some device, or absent from Google results. The framework snippets make it equally practical for plain HTML and modern React/Vue stacks.
The pack covers the working set: 16 and 32 for browser UI, 48 (inside the .ico) for Google's minimum, 180 for iOS, 192 and 512 for Android/PWA manifests, and a 150 Windows tile. Browsers pick the best match from your tags — providing the set is what keeps every surface sharp.
Yes — the tool assembles the ICO binary format itself, embedding the 16, 32, and 48-pixel versions in one multi-resolution file. That matters because a PNG renamed to .ico fails in the contexts that specifically want ICO.
Browsers cache favicons aggressively, sometimes for weeks. Hard-refresh, test in a private window, or add a ?v=2 query to the icon URLs in your tags to force the change; visitors' caches update on their own schedule.
Only if it survives 16 pixels — wordmarks and detailed emblems rarely do. Crop to the strongest single element (the initial, the symbol) and judge the 16-pixel preview: if you cannot tell what it is, neither can a crowded tab bar.
In your site's root — the public directory in most frameworks — so they serve at /favicon.ico, /site.webmanifest, and so on. The generated snippets reference exactly those paths, so no renaming is needed.
Google fetches favicons on its own crawl schedule (days to weeks for new sites) and requires at least 48×48 at a stable URL that robots.txt does not block. The pack satisfies the requirements; requesting reindexing of your homepage in Search Console can hurry the rest.