Favicon generator
Upload an SVG or PNG — or type text or an emoji — and download every file your site needs: favicon.ico, PNG sizes, Apple touch icon, maskable PWA icons and the web manifest, with copy-paste head snippets for your framework. Files are processed in memory and never stored.
Your package is downloading
Paste this into your framework
<next>Favicons done — now check how your links look when shared. →Every favicon file, explained
| file | size | where it shows up |
|---|---|---|
favicon.ico | 16, 32, 48 px | Legacy browsers, address bar, bookmarks. Still requested by default. |
favicon.svg | any | Modern browsers. Scales cleanly; can carry a dark-mode variant. |
favicon-16.png / favicon-32.png | 16 × 16 / 32 × 32 | Browser tabs on standard and high-density displays. |
apple-touch-icon.png | 180 × 180 | iOS home screen and Safari pinned pages. |
icon-192.png / icon-512.png | 192 × 192 / 512 × 512 | Android home screen and PWA install prompts. |
maskable-192.png / maskable-512.png | 192 × 192 / 512 × 512 | Android adaptive icons — artwork inside the 80% safe zone. |
manifest.webmanifest | — | Declares the PWA icons, name and theme color. |
FAQ
What favicon sizes do I need?
Four files cover every modern context: an SVG for browsers that scale, a 32 px PNG for tabs, a 180 px apple-touch-icon for iOS, and 192/512 px PNGs for Android and PWA installs. favicon.ico remains worth shipping because browsers still request /favicon.ico by default when nothing else is declared.
Do I still need favicon.ico?
Strictly no — every modern browser accepts PNG and SVG icons. Practically yes: crawlers, feed readers, and browsers hitting a page without icon markup fall back to /favicon.ico, so serving one avoids 404s and broken icons in older tooling.
What is a maskable icon?
Android adaptive icons crop your artwork into shapes (circle, squircle, rounded square). A maskable icon keeps everything important inside the central 80% safe zone on a full-bleed background, so nothing gets cut off. The generator builds these automatically from your source image.
Where do the files go?
Put the files in your site root (or public/ directory) and paste the matching head snippet. The download includes exact snippets for Next.js, Astro, Nuxt, plain HTML and WordPress.