Favicon Generator
One click downloads a complete pack—multi-size ICO, scalable SVG, Apple & Android PNGs, Web App Manifest, Windows tile config, and head snippets—everything stays in your browser.
Open toolIncludes ICO, SVG, PNGs (16–512), site.webmanifest, browserconfig.xml, and paste-ready link tags.
Download one PNG size only
About this tool
Real-world setups combine favicon.ico for legacy tabs, SVG for sharp dark/light UI, apple-touch-icon for iOS home screens, 192/512 assets for installable PWAs and maskable Android icons, plus theme-color for the browser chrome. This tool generates a coherent set from one source image with center square crop.
Inside the ZIP
- favicon.ico (16 + 32 + 48 PNG)
- favicon.svg + 9 PNG sizes
- site.webmanifest & browserconfig.xml
- HEAD-SNIPPETS.html / .txt
Input & options
- Drag & drop, paste, or browse
- Theme color (tab UI)
- PWA background
- App display name
How it works
- Add a high-res logo (drop, paste, or browse).
- Set theme / app name if you want.
- Download ZIP, unzip into your site root or /public.
- Paste snippets from HEAD-SNIPPETS.txt into your HTML head.
FAQ
Why center-crop to a square?
Most icon slots are square; iOS and Android mask rounds or squircles on top of a square bitmap. Feeding a square master avoids accidental letterboxing when stores rescale. If your wordmark is ultrawide, design padding inside the artboard before exporting here.
What do I do in Next.js App Router?
Place every extracted file under `public/` so `/favicon.ico` resolves at the domain root. Remove conflicting `app/icon.tsx` experiments unless you intentionally generate icons in code. Keep paths in HEAD-SNIPPETS aligned with whether you host on a subpath (rare for it3 users).
How is SVG favicon built?
We embed a PNG (256 px) as base64 inside a minimal SVG wrapper. That gives sharp tab icons where `favicon.svg` is supported without you hand-coding vectors. Some CDN security filters strip data URLs—if so, fall back to PNG/ICO links only.
Maskable vs any icons in the manifest?
Android adaptive icons expect extra padding so full-bleed logos are not clipped. Listing both `any` and `maskable` entries with the 192/512 assets signals honest intent; for pixel-perfect branding, produce dedicated maskable art with safe zone guides in Figma.
Will old IE or ancient crawlers load ICO?
The ICO in the zip carries PNG-encoded frames, which legacy IE did not support inside ICO; those users are effectively gone. If you must satisfy an archaic checklist, generate a BMP-heavy ICO with a desktop tool—but test it; blurry 16px favicons hurt brand more than omitting.
Can I automate this for CI instead?
Yes—CLI tools like `sharp`, ImageMagick, or RealFaviconGenerator’s API can reproduce packs in pipelines. This page targets humans who want one ZIP today without installing Node modules locally; pick the workflow that fits your release process.
Frequently Asked Questionsabout Favicon Generator
Related Tools
Explore More Tools
Tap a tag to open a tool. The current page is highlighted.
