Favicon & App Icon Pack Builder
Turn one square image into a complete icon pack: every size browsers and app launchers ask for, a web manifest, a padded maskable icon for Android, and the exact HTML to paste into your head. Preview at 16 pixels before you ship it, because that is the size at which detail disappears.
- Price:
- Free, no sign-up
- Data:
- Processed locally
- Reviewed:
Interactive favicon builder
Drop a square image
PNG or SVG, at least 512×512. Ideally 1024×1024 with a simple, bold shape.
No source image yet
Drop a square logo above and every icon, the manifest and the HTML are generated instantly.
What favicon sizes do I actually need?
An SVG favicon, a 32×32 PNG fallback, a 180×180 apple-touch-icon, and 192×192 plus 512×512 icons for the web manifest cover essentially every current browser and platform. Add a padded 512×512 maskable icon so Android launchers can crop it to a circle or squircle without clipping anything important.
How to use the favicon builder
- Upload a source image: Use a square PNG or SVG, at least 512x512, ideally 1024x1024.
- Set background and padding: Choose a background colour and padding for maskable Android icons.
- Preview at real sizes: Check the 16px rendering — that is where detail dies.
- Download the zip: Get every icon, site.webmanifest and a ready-made HTML snippet.
How the favicon builder works
What goes in a modern icon pack
Browsers resolve icons from <link> tags and the web manifest. Declaring an SVG favicon lets a single vector serve every size crisply, with a PNG fallback for browsers that do not support it. iOS ignores the manifest for home-screen icons and uses apple-touch-icon at 180×180.
The files
favicon.svg— vector, scales to any size, supports a dark-mode variant via media queries inside the SVG.favicon-32.png,favicon-16.png— raster fallbacks.apple-touch-icon.pngat 180×180 — no transparency; iOS composites on black otherwise.icon-192.png,icon-512.png— manifest icons for installable web apps.icon-maskable-512.png— padded for Android adaptive crop shapes.
Rendering quality
Icons are drawn with high-quality canvas smoothing and downscaled in stages rather than in one jump, which preserves far more edge definition at the smallest sizes. Sharp downscaling in a single step is the usual reason generated favicons look soft.
Favicon Builder — frequently asked questions
Far fewer than the old 20-file packs. An SVG favicon, a 180x180 apple-touch-icon, 192x192 and 512x512 for the manifest, and a 32x32 PNG fallback cover essentially every current browser and platform. The pack includes extras for legacy cases, but you can ship the short list.
Android may crop your icon into a circle, squircle or rounded square depending on the launcher. A maskable icon keeps all meaningful content inside a central safe zone — 80% of the width — so no crop shape ever cuts into it. That is what the padding control produces.
Only for very old Internet Explorer and some desktop feed readers. Modern browsers all prefer the SVG or PNG icons declared in your head. The pack includes a multi-resolution .ico if you want complete coverage.
Because 256 pixels cannot hold a logo designed for a business card. At favicon size you want one bold shape, high contrast, and no text beyond perhaps a single letter. Design the 16px version first and scale up, not the reverse.
Official resources & government references
Verified references, primary standards specifications, and official publications governing the rules and calculations implemented in this tool:
HTML Living Standard: Link Types & Favicons
The definitive specification for declaring rel="icon" attributes and image MIME types.
Configuring Web Applications & Apple Touch Icons
Apple official guidelines for iOS home screen web clips, touch icon sizes, and maskable assets.
Important Disclaimer
Generated favicon packs adhere to modern W3C and WHATWG specifications. Verify that generated icon assets and manifest paths match your target web hosting and directory structure.