<link rel="icon">

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.

Upload an image
Shown in dark browser themes via prefers-color-scheme. SVG sources only.
Type 1–4 characters
Pick an emoji
Enabled when a shape is chosen.

Rendered from the Twemoji set (CC-BY 4.0 — attribution note included in the download).

Package options
<check>Already have favicons live? Check what your site actually serves. →

Every favicon file, explained

filesizewhere it shows up
favicon.ico16, 32, 48 pxLegacy browsers, address bar, bookmarks. Still requested by default.
favicon.svganyModern browsers. Scales cleanly; can carry a dark-mode variant.
favicon-16.png / favicon-32.png16 × 16 / 32 × 32Browser tabs on standard and high-density displays.
apple-touch-icon.png180 × 180iOS home screen and Safari pinned pages.
icon-192.png / icon-512.png192 × 192 / 512 × 512Android home screen and PWA install prompts.
maskable-192.png / maskable-512.png192 × 192 / 512 × 512Android adaptive icons — artwork inside the 80% safe zone.
manifest.webmanifestDeclares 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.