Favicon Generator — Favicon, Apple Touch & PWA Icon Pack

Turn one image into a complete favicon, Apple Touch, and PWA icon pack with crop controls, manifest, and install code.

A modern site needs more than one favicon.ico. Browsers, iOS home screens, and Android/PWA install prompts each look for a different pixel size and file, and this tool draws your source image onto a canvas six separate times at the exact dimensions each surface expects, then bundles the result into one zip with the manifest and HTML snippet already written for you.

How to make a favicon from your logo

Choose a PNG, JPEG, WebP, SVG or GIF; square artwork gives the cleanest result, and an animated GIF contributes only its first frame.
Under Crop and background, pick Keep entire image (contain) or Fill square and crop edges (cover), set the theme colour, and decide whether the icon background stays transparent.
Type the app name that the web manifest should show, up to 80 characters.
Check the 192 px preview, then click Download icon pack (ZIP).

Six sizes, three purposes

The output set is fixed and deliberate: 16x16 and 32x32 for the classic browser favicon slot, 48x48 as a larger fallback some contexts request, 180x180 for Apple's touch-icon convention on iOS home screens, and 192x192 plus 512x512 for Android Chrome and PWA installability — the two sizes Chrome's install criteria actually check for. Every size is generated from a single source image redrawn onto a canvas at that exact resolution, not scaled down from a pre-rendered intermediate, so each output is a fresh render rather than a copy-of-a-copy.

Contain versus cover, and what each does to a non-square source

Most source logos aren't square, so the tool has to decide what happens to the extra space. Contain mode scales your image down until it fits entirely inside the square canvas and centers it, leaving background visible on two sides — nothing gets cropped, but a wide logo ends up padded above and below. Cover mode scales the image up until it fills the square, centering and cropping whatever overflows the edges — nothing shows background, but the outer edges of a wide or tall source get cut off. Only the min/max scale choice differs between the two, and the live 192px preview updates immediately when you switch.

When transparency is left on, the canvas is cleared rather than filled before drawing, so PNG or WebP sources with an alpha channel keep it straight through. Turn transparency off and a solid background color fills the canvas first — useful for launchers that render icons against an unpredictable background of their own.

Files in the favicon ZIP pack

favicon-16x16.png and favicon-32x32.png: browser tab icons, both linked from the HTML snippet.
favicon-48x48.png: a larger tab-size icon that ships in the ZIP but is not referenced by the snippet, so link it yourself if you want it declared.
apple-touch-icon.png: 180 × 180 for iPhone and iPad home-screen bookmarks.
android-chrome-192x192.png and android-chrome-512x512.png: Android and PWA install icons, listed in the manifest with the purpose "any maskable".
site.webmanifest: your app name (used as both name and short_name), start_url set to /, standalone display, and your chosen colour as theme and background colour.
head-snippet.html: five tags, namely the two icon links, the Apple touch icon, the manifest link and a theme-color meta tag.
README.txt: a one-paragraph note on where the files go and a reminder that browsers cache favicons.
Not included: a favicon.ico file or an SVG icon; every image in the pack is a PNG.

How to add the favicon to your website

Unzip the pack and copy every PNG plus site.webmanifest into your site's root folder, because the snippet and manifest point at root paths such as /favicon-32x32.png.
Paste the contents of head-snippet.html inside the <head> of each page, or once in your shared layout template.
Deploy, then open the site in a private window or after a hard refresh to see the new icon.
On WordPress you can skip the files and upload android-chrome-512x512.png as the Site Icon; hosted shop builders such as Shopify take a single image in their theme's favicon setting.

Everything runs in the browser, immediately

Loading your source image and every redraw happens through the browser's own Image and Canvas APIs — there is no server round-trip to generate the pack, which is why the preview updates the instant you change fit, background, or transparency rather than after a network request. The final zip is assembled locally with JSZip and handed to you as a direct download.

What this tool won't get right for you

It draws whatever you give it at every size without adding padding for Android's maskable icon shape — if your logo's content touches the edges, launchers applying their own mask may clip it, so leave breathing room if you rely on the 192/512 PWA icons.
There is no vector output here — every icon is a rasterized PNG, so a genuinely vector logo looks best rendered from a high-resolution source, not a low-resolution screenshot.
The manifest covers only name, icons, and basic display fields — a production PWA manifest often needs more (start_url variations, orientation, categories) that this tool doesn't guess on your behalf.
Browser and OS favicon caching means a successful generation here doesn't guarantee an instant visible update on your live site; verify against a hard-refreshed or incognito load after deploying.

Questions people ask about Favicon & App Icon Generator

Do I still need a favicon.ico file?: The pack does not include one. Current browsers follow the PNG link tags in the snippet, so a .ico file mainly serves very old browsers and tools that request /favicon.ico by default without reading your HTML. If you want that fallback, convert favicon-32x32.png or favicon-48x48.png to ICO with another tool and place it at the site root.
What size should a favicon be?: There is no single size. Browser tabs use 16 and 32 px, iOS home screens use 180 px, and Android installs and PWAs use 192 and 512 px, which is why the pack holds six PNGs. For Google Search, Google asks for a square of at least 8 × 8 px and recommends going larger than 48 × 48 px.
What's the difference between contain and cover fit?: Contain shrinks your image to fit entirely within the square without cropping, leaving visible background on the shorter sides. Cover scales the image up to fill the square completely, cropping whatever overflows the edges. Use contain to keep the whole logo visible; use cover when you want the square fully filled with no border.
Can I use a transparent PNG or does it need a background color?: Both are supported. Leave transparency on and a source PNG or WebP's alpha channel passes straight through to every generated size. Turn it off and the tool fills the canvas with your chosen background color first, which is useful for launchers that don't render transparent icons well.
Do I need to edit the manifest or HTML snippet the zip generates?: The included site.webmanifest and head-snippet.html are ready to use as-is for basic PWA installability and browser favicon linking — copy the PNGs and manifest to your web root and paste the snippet into your page's head. A production PWA manifest may need additional fields this basic version doesn't include, like start_url variations or orientation.
Why doesn't my new favicon show up after I deploy it?: Browsers cache favicons aggressively, often across full page reloads. Try a hard refresh or an incognito/private window against the deployed URL before concluding the new icon isn't working — this is a caching behavior on the browser's side, not a sign the generated files are wrong.
Can I use an SVG or JPG as the source image?: Yes. The picker accepts PNG, JPEG, WebP, SVG and GIF, and each is redrawn onto a canvas at every output size. A JPEG has no transparency of its own, although contain mode can still leave the padding around it transparent. If an SVG will not load, add width and height attributes to its root element so the browser knows its size.
Why doesn't my favicon show in Google search results?: Google reads the icon from your home page's link tags, and the snippet supplies rel="icon" and rel="apple-touch-icon" links, both of which it recognises. The page and the image must be crawlable and the icon square, ideally larger than 48 × 48 px. After that, Google's recrawl can take anywhere from several days to several weeks.

Related tools on BrakeTools

Image Resizer — Resize images by longest edge, exact dimensions or percentage, with letterbox or stretch fitting.
Image Cropper — Crop a batch of images to an exact rectangle or a locked aspect ratio, then export as PNG, JPEG, WebP or AVIF.
Image Converter — Batch-convert images between PNG, JPEG, WebP, and AVIF with a custom naming template.
SVG Vectorizer — Convert a raster logo into a clean, layered SVG, no subscription required.
Background Remover — Full-resolution background removal with on-device CPU inference, exported as a transparent PNG.

Content reviewed 2026-09-27.