Favicon & app icon generator.
One logo. A complete icon set.

Create browser icons, an Apple touch icon and maskable web app icons from your logo. Preview the results, then download a ZIP with the HTML and installation steps. Your image stays in your browser.

Used in the generated manifest — shown under your icon on Android home screens

Fills the padding around your maskable web app icon. Use a six-digit HEX color.

Keeping the whole logo adds space around rectangular artwork. The maskable icon always keeps the whole logo inside its safe zone.

Generate & download

Load an image first

Generate the icon set

1. Add the source. PNG, JPEG, SVG, and WebP are supported. Rectangular logos fit without cropping by default. SVG files must be self-contained; external images and fonts are not loaded.

2. Check the previews. Set the app name and choose a background for the maskable Android icon. Confirm the logo remains legible at browser-tab size.

3. Download the ZIP. It contains PNG sizes, favicon.ico, a maskable icon, site.webmanifest, and an HTML snippet.

Why the ZIP contains several files

Every platform asks for a different file

Browser tabs, saved home-screen shortcuts, and installable web apps do not all read the same file. Small favicons need to remain recognizable at 16 or 32 pixels, while home-screen icons need larger PNGs and more padding.

The generated manifest and HTML snippet connect those files to the site. Review the paths before pasting the snippet if your assets live outside the domain root.

The exact sizes each platform actually requests

  • favicon-16x16.png / favicon-32x32.png — browser tabs, bookmarks, history
  • favicon-96x96.png — a larger square icon linked for search results and other surfaces
  • favicon.ico — legacy fallback some tools request directly from your domain root, bundling 16/32/48px
  • apple-touch-icon.png (180x180) — iOS home screen icon, must be fully opaque
  • android-chrome-192x192.png / 512x512.png — Android home screen and PWA install prompts
  • android-chrome-512x512-maskable.png — same size, but with safe-zone padding so adaptive-icon masking doesn't clip it
  • site.webmanifest — the JSON file that tells Android which icon to use and what to call your app
  • head-snippet.html / README.txt — the HTML links and installation steps

Install and check the result

Extract the ZIP into your site's public folder so the icons are available at the domain root. In Astro, that folder is public/. Paste head-snippet.html into your shared layout's <head>. If you already have a manifest, merge the generated icon entries into it to preserve your app settings.

After publishing, open /favicon-96x96.png and /site.webmanifest on your domain to check that they load. Browser caches can keep an older favicon; test in a fresh browser session. Google recommends a square favicon larger than 48 pixels, a stable URL, and crawlable image and homepage URLs. Inclusion in search results is not guaranteed. Google's favicon guidance.

What "maskable" actually means, concretely

An Android launcher may display the icon as a circle, rounded square, or another shape. The maskable version fits the entire logo inside the central circle with a radius of 40% of the icon width, following the maskable icon safe zone.

Frequently asked questions

There isn't one size anymore. Browser tabs use 16x16 and 32x32, iOS home screens want 180x180, Android wants 192x192 and 512x512, and a legacy favicon.ico typically bundles 16, 32, and 48px together. This tool generates all of them from one source image.
It remains a useful compatibility fallback. Modern browsers can use a linked PNG, but software may still request /favicon.ico from the site root. Including both avoids an unnecessary missing-file request.
Android can mask your app icon into a circle, squircle, or rounded square depending on the device's launcher theme. If your logo fills the entire canvas edge-to-edge, the corners get cropped off by that mask. A maskable icon keeps your logo scaled down within a safe center zone with background color filling the rest, so nothing important gets clipped.
Yes. Your image is processed with the Canvas API entirely in your browser and never uploaded anywhere. You can disconnect from the internet after this page loads and the generator still works.
apple-touch-icon is used when someone adds your site to an iOS home screen. This generator creates a solid 180×180 PNG so transparent areas do not get an unexpected background. A regular browser-tab favicon can remain transparent.

Prepare your source logo

Need a matching background? Sample a color from your logo. To remove unwanted space or change the crop first, use the image editor.