Drop an image, get every favicon size — 16, 32, 48, 180, 192, 512 px — plus copy-paste HTML meta tags. Browser-only, no signup, no upload.
Favicon Generator Features
- All Six Sizes at Once — 16, 32, 48, 180, 192, and 512 px PNGs — every standard target generated in one shot.
- 100% Private — Image is decoded and resized in your browser via Canvas — nothing uploaded, safe for unreleased branding.
- Live Browser-Tab Preview — See exactly how the favicon looks in a desktop tab and on iOS / Android home screens.
- Copy-Paste Meta Tags — One-click copy of the six <link> tags you drop into <head> — covers every modern browser and OS.
How to Use Favicon Generator
From source image to copy-paste meta tags in four steps.
- Upload Source — Drop a square PNG, JPG, SVG, or WebP — at least 512 × 512 for the cleanest small-size scaling.
- Generate — All six standard sizes render in parallel through Canvas — usually under a second.
- Preview — Inspect each size in a browser-tab mockup plus iOS / Android home-screen previews.
- Download & Wire Up — Save individual PNGs or the full ZIP, then paste the generated <link> tags into your HTML <head>.
Frequently Asked Questions
What image format should I upload?
PNG and SVG give the cleanest results. JPG works but lossy compression artefacts can show at 16 px and 32 px. Use a square (1:1) source at least 512 × 512 — the tool downsamples to smaller sizes; it can't upscale a 64 × 64 image cleanly.
Which sizes are generated and why those?
16 × 16 (default browser tab), 32 × 32 (retina browser tab), 48 × 48 (Windows taskbar / shortcut), 180 × 180 (Apple Touch Icon for iOS home screen), 192 × 192 (Android Chrome standard), 512 × 512 (Android Chrome PWA / large icon). Together they cover every modern browser and mobile OS.
Do I need a `favicon.ico` file too?
Modern browsers (Chrome 4+, Firefox 41+, Edge, Safari 9+) all read PNG favicons via `<link rel="icon" type="image/png">` — `.ico` is only needed for very old IE. If you must support legacy IE, generate the 16 × 16 PNG and rename it to `favicon.ico` in the site root.
How do I install the favicons on my site?
Upload all six PNGs to your site's web root (so `/favicon-16x16.png` resolves), then paste the six `<link>` tags from the 'HTML meta tags' panel into the `<head>` of every page. Most static-site generators have a global head template — Next.js for example uses the `metadata` export or the `app/layout.tsx` head.
Does my source image get uploaded anywhere?
No. The tool decodes the image and runs Canvas downsampling entirely in your browser. The original file and the six generated PNGs never leave your device — safe for unreleased logos, client work under NDA, or pre-launch branding.
Why does my logo look fuzzy at 16 px?
Detail loss is a fundamental physics limit at that size, but two things help: (1) start from a vector source (SVG) so the downsample is from infinite-resolution math, not pixel approximation; (2) simplify the design — drop fine strokes, increase stroke weight, drop gradients. A logo that looks great at 64 × 64 often loses critical features below 32 × 32.
Can I generate a `site.webmanifest` too?
Not yet — the current tool emits PNGs and `<link>` meta tags. For a manifest, drop the 192 × 192 and 512 × 512 generated PNGs into your existing `site.webmanifest`'s `icons` array. Next.js users get the manifest auto-generated from `app/manifest.ts` — point it at the two large PNGs you downloaded.
Is the output safe to use commercially?
Yes — there's no watermark on the output, no licence restriction, no attribution requirement. The favicons you generate belong to you (just like any image you ran through your own image editor).
Related: favicon generator, favicon generator online, favicon generator free, favicon generator online free, free favicon generator, online favicon generator, favicon maker, favicon maker online, favicon maker free, favicon creator