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.
Who Uses Favicon Generator
Favicon Generator is the one-stop step every web project skips for too long - devs use it to round out a Next.js / Vite / WordPress launch checklist with the full set of favicons every modern device expects, designers use it to verify their logo holds up at 16 px before signing off, agencies use it to batch-generate icons for client sites without uploading the brand assets to a third-party server, and indie hackers use it to make their MVP feel finished. Drop a logo, copy six `<link>` tags, ship.
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 (mid-size icon), 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 all read PNG favicons via `<link rel="icon" type="image/png">` - `.ico` is only needed for very old IE. This tool does not make .ico files. If a platform asks for favicon.ico by name, convert the 32 × 32 PNG with an ICO converter.
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 maker, image to favicon converter, favicon ico generator, apple touch icon generator, favicon all sizes, favicon kaise banaye