Favicon Generator
Generate a complete favicon set: real .ico, PNGs, manifest, and HTML — from an image, text, or emoji
About this ToolHow it works, benefits & use casesTap to collapse
A favicon generator turns one image into every icon file a website actually needs — the browser-tab icon, the Apple touch icon, the PWA icons — plus the HTML that wires them up. This one does it from an uploaded image, a short text monogram, or an emoji, entirely in your browser. The generator renders a real multi-resolution .ico (16/32/48), PNG icons for browsers, Apple touch icons, Android and maskable PWA icons, plus a site.webmanifest, the HTML to drop into your <head>, and a browserconfig.xml for Microsoft tiles. You control the background (transparent or a solid color), outer padding for non-square logos, and whether to generate maskable Android icons with a 10% safe zone. Manifest fields like app name, short name, and start URL are configurable, and a theme color is detected from your source. Before downloading, preview the icon in realistic contexts — a browser tab, an iOS home screen, an Android launcher, and a GitHub avatar circle. Image sources can even include a separate dark-mode variant. Download everything as one ZIP, all generated in your browser.
How to Use
- 1Choose a source type — Image, Text (1–4 letters), or Emoji — and provide your input (an image upload, monogram, or emoji).
- 2Set the background to transparent or a solid color, adjust padding for non-square logos, and keep maskable Android icons enabled if you want them.
- 3Fill in the manifest fields: app name, short name, and start URL for your PWA.
- 4Click “Generate Favicon Bundle” and review the in-context previews (browser tab, iOS, Android, GitHub).
- 5Copy the generated HTML, site.webmanifest, and browserconfig.xml, or download every asset as a single ZIP.
Key Benefits
- Generates a real multi-resolution .ico (16/32/48) plus PNGs, Apple touch, Android and maskable icons
- Three source modes: upload an image, type a text monogram, or pick an emoji
- Outputs ready-to-paste <head> HTML, a site.webmanifest, and browserconfig.xml for Microsoft tiles
- Maskable Android icons with a 10% safe zone protect your logo from adaptive-shape clipping
- Realistic previews of a browser tab, iOS home screen, Android launcher and GitHub avatar
- Configurable background, padding, manifest name/short-name/start-URL and an auto-detected theme color
- Everything is built and packaged in your browser — your source image is never uploaded
Common Use Cases
- Generating a full favicon and PWA icon set for a new website or app launch
- Creating a quick text or emoji favicon for a side project without opening a design tool
- Producing maskable Android icons so a PWA installs cleanly on Android home screens
- Getting the exact <head> HTML and manifest needed for cross-browser favicon support
- Replacing a low-resolution favicon with crisp icons at every standard size
Source
Click to upload or drag and drop
Accepted: image/* • Max 10 MB
Square 1024×1024 PNG or SVG works best. Max 10 MB.
Add a dark-mode variant (optional)
Click to upload or drag and drop
Accepted: image/* • Max 10 MB
Used when the user's OS prefers dark mode.
Options
Apple touch icons are always made opaque (iOS removes alpha).
Outer breathing room. Useful for non-square logos.
Where the PWA opens. Use a sub-path like /app for non-root deploys.
Tips for sharp favicons
- Use a square 1024×1024 source so 16×16 still has room for detail.
- Avoid fine text or 1-pixel strokes — they vanish at 16×16.
- If your logo isn't square, add 5–15% padding for breathing room.
- Test on a real browser tab and Android home screen, not just zoomed-in previews.
- Maskable icons protect your logo from being clipped by Android adaptive shapes.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- App Icon GeneratorTurn one image into complete icon sets for iOS, Android, Web/PWA & macOS — Contents.json, adaptive icons, maskable, manifest & favicon.ico — in one ZIP
- Changelog GeneratorGenerate changelog from Git commit history
- Component Name GeneratorTurn a description into ranked, kind-aware component names with a file scaffold and a name validator (casing, collisions, clarity)
- Heroku Procfile GeneratorBuild a Heroku Procfile and matching app.json — process types, env vars, addons, dyno formation — plus a Procfile parser and audit
- Markdown TOC GeneratorGenerate table of contents for Markdown
- Package.json Scripts GeneratorGenerate common npm scripts for different project types and workflows
Five files cover effectively every browser: a multi-resolution favicon.ico (16/32/48) at the site root for legacy agents and anything that requests /favicon.ico blindly; a 32×32 PNG for standard tabs; a 180×180 apple-touch-icon for iOS home screens; and 192×192 plus 512×512 PNGs referenced from the web manifest for Android and PWA installs (the 512 also feeds the install splash screen). The long lists of legacy Apple sizes — 57, 76, 114, 144 and friends — are obsolete; devices scale the 180 down cleanly.
Ship ICO and PNG at minimum: the .ico at the root is still requested by default by many crawlers and older browsers, and a 32×32 PNG covers modern tabs. SVG favicons work in Chrome, Edge, and Firefox — and can even restyle themselves for dark mode with a media query inside the file — but Safari support remains partial, so treat SVG as an enhancement layered on top of the PNG/ICO set, never the only icon.