About Favicon Generator
One image in, a complete favicon pack out. A modern favicon is not a single file. It is a stack of seven PNG sizes, a web manifest, and a set of HTML link tags that tell browsers and devices which file to load where. This generator takes one square source image and emits all of that as a single ZIP, preserving transparency, and bundles a ready-to-paste HTML head block so you never have to learn the rel-attribute taxonomy. Everything runs locally in your browser: no upload, no signup, and it keeps working offline.
Three places favicons break. First, a source image that is too small: upscaling a 64 pixel logo to 512 pixels yields blurry tabs, so start at 512 or larger. Second, a source with no breathing room: browser tabs and iOS home-screen grids crop different amounts, and a 10 to 15 percent safe margin keeps critical shapes from being clipped (the padding slider above adds exactly that). Third, a missing apple-touch-icon: without it, an iOS Add to Home Screen shortcut renders as a low-res scale-up of the tab favicon, which looks unprofessional.
For Progressive Web Apps on Android, the 192 and 512 pixel icons plus a valid web manifest are the minimum to earn the install-to-home-screen prompt. The manifest also controls the theme color (the browser chrome tint on mobile) and the splash-screen background. The generator emits a complete site.webmanifest as part of the ZIP, using the theme color you pick above and your background fill as the splash background.
Tools in the same cluster: Color Contrast Checker for WCAG verification of your favicon colors against browser chrome, and Meta Tag Generator for the full head-tag block the favicon lines belong in.
Frequently asked questions
Which favicon sizes do I actually need?
Seven PNG sizes cover modern browsers and devices. 16×16 and 32×32 for desktop browser tabs. 48×48 and 64×64 for Windows shortcuts and high-density tabs. 180×180 for the apple-touch-icon on iOS home screens. 192×192 and 512×512 for Android Chrome and the Progressive Web App install prompt. The legacy ICO format is still supported but has been deprecated in favor of PNG by Chrome, Firefox, and Safari for several years.
Should my favicon be SVG?
Only as a supplement. Chrome 80+ and Firefox 94+ support SVG favicons, but Safari on iOS and older browsers still require raster PNG. Ship both: a single SVG as the primary (vector, dark-mode adaptive) and the PNG sizes as fallback. This generator produces the PNG stack; export a separate SVG from your design tool and add it with rel="icon" type="image/svg+xml" in the head.
What should the source image look like?
Square, at least 512×512 pixels, high contrast, and readable at 16 pixels. A single symbol or one or two characters works; full wordmarks become unreadable at 16. The shape should have breathing room around it, roughly 10 to 15 percent, because browser tabs and app grids crop differently; the padding slider above adds that margin for you. PNG with transparency is ideal, and transparency is preserved across every output size unless you choose a background fill.
What goes in the web manifest?
The site.webmanifest tells Android Chrome how to render your site as a Progressive Web App. It lists the 192 and 512 icon paths, theme_color (browser chrome tint), background_color (splash screen), display mode (standalone hides browser UI), start_url, and the short_name that appears on the home screen. The generator emits a valid manifest you can drop at /site.webmanifest; link it in the HTML head with rel="manifest".
Does this tool save my data?
No. Your image never leaves this browser tab. All resizing happens client-side via the HTML5 canvas element; the downloaded ZIP is built in memory and never transmitted. Close the tab and everything is gone.