About Favicon Generator
Favicon Generator takes a single uploaded image (PNG or SVG) and produces every favicon size a modern site needs: 16×16 and 32×32 for the browser tab, 180×180 for `apple-touch-icon`, 192×192 and 512×512 for Android Chrome / PWA manifests, plus a multi-resolution `.ico` for legacy browsers and a copy-pasteable HTML snippet linking them all. Output is bundled as a zip download.
Reach for it whenever you are setting up a new site or refreshing a brand: pasting one logo and getting a complete favicon set is the friction-free path. Source image conversion happens in your browser — the file never leaves your device, which matters when the logo is unreleased. Placeholder Image Builder solves the unrelated problem of generating remote placeholder URLs on the fly; this tool is for producing the real, canonical favicon assets your site will serve.
Examples
(upload a 512x512 PNG logo)favicon-package.zip
├── favicon.ico (16/32/48 multi-res)
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png (180x180)
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── site.webmanifest
└── snippet.html (link tags ready to paste into <head>)Complete favicon set plus a manifest and a paste-ready HTML snippet. All conversion runs in your browser.
Frequently asked questions
What size should my source image be?
At least 512×512 — the largest size in the output set. Square is required (the tool refuses non-square sources because cropping is rarely what you want). SVG is ideal because it downscales without aliasing; PNG works too if it is large enough.
Where do I put the files?
Drop the unzipped contents at the root of your site (next to `index.html`) and paste the snippet from `snippet.html` into your `<head>`. Most frameworks (Next.js, Astro, SvelteKit, Rails) have a public-folder convention that handles this automatically once the files are in place.
Do I really need every size?
Modern Chrome and Firefox auto-pick from a `<link rel="icon">` SVG, so you can sometimes get away with one SVG plus the legacy `.ico`. The full set is the bullet-proof option that works on Safari, Android Chrome, iOS home-screen pinning, and old Windows browsers.
Why is the .ico multi-resolution?
Because the `.ico` format embeds multiple raster sizes in one file, and old Internet Explorer / older Windows tooling picks the right size by reading them from the same file. This tool packs 16, 32, and 48 by default; some legacy contexts also prefer 24 or 64.