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 toolLogo or icon — square works best. Drop, paste, or browse.
Works in modern desktop and mobile browsers. Focus this area (tap or Tab) before pasting.
Includes 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.
Explore More Tools
Tap a tag to open a tool. The current page is highlighted.
