Favicon Generator

One source, four very different jobs

A favicon package is not just one tiny image. The same identity has to work
as a 16-pixel browser mark, a bookmark, an iPhone home-screen icon and an
installable web app icon that an operating system may crop into a circle,
squircle or another shape.

This generator starts with one PNG, JPG, WebP or SVG logo, but keeps two sets
of adjustments. Ordinary icons serve browser tabs, bookmarks
and Apple touch icons. Maskable icons get their own crop,
position, padding and background so important artwork can stay inside the
guaranteed safe area.

The work stays in your browser. The original logo is not uploaded, and the
ZIP is assembled locally.

What the ZIP contains

File Purpose
favicon.ico Legacy and broad browser support, with 16, 32 and 48-pixel PNG images inside.
favicon-16x16.png, favicon-32x32.png Explicit modern browser favicons.
apple-touch-icon.png 180×180 home-screen icon for Apple devices.
android-chrome-192x192.png, android-chrome-512x512.png Ordinary installable web-app icons.
maskable-icon-192x192.png, maskable-icon-512x512.png Icons declared with the manifest purpose maskable.
site.webmanifest App name, short name, start URL, colors and icon declarations.
favicon-snippet.html The link and meta elements to paste into the page <head>.
README.txt Installation notes and the package inventory.

Fit, fill and crop

Fit shows the whole logo within the available square.
Padding creates breathing room around it. This is the safer starting point for
marks that already have a clear silhouette.

Fill / crop covers the full available square, even if part
of a wide or tall source falls outside the canvas. Use horizontal and vertical
positioning to choose the crop, then use zoom for finer control. The canvas
itself is the crop boundary; no destructive edit is made to the source file.

How the 16px and 32px icons stay crisp

The smallest favicons do not use the same one-step resize as the larger app
icons. The tool starts at the largest useful power-of-two multiple of the
target, then halves the image repeatedly until it reaches 16 or 32 pixels.
Placement is aligned to the final pixel grid before that reduction, avoiding
the half-pixel origin that commonly softens a tiny mark.

Transparent logos receive a small automatic optical size adjustment so
their visible mark does not look undersized next to a full-square icon. A mild
unsharp mask is applied after reduction to restore edge separation without
changing transparency. Ordinary icons start with zero padding; add it only when
the artwork genuinely needs more space. The editor shows both final rasters at
their actual pixel dimensions.

The maskable safe zone

The Web App Manifest specification defines the guaranteed safe zone as a
circle centered in the icon, with a radius equal to 40% of the icon size.
Anything inside that circle must remain visible when a user agent applies an
icon mask. Anything outside it may be clipped.

The red dashed circle in the maskable preview shows that exact zone. The
validator also measures visible pixels outside it. That warning deliberately
says the artwork may be clipped: software can identify pixels, but it
cannot know which pixels are important to your brand. Use the preview and your
own judgment together.

Why corners are previews only

Platforms own the final icon shape. An icon that already has rounded corners
can acquire a second mask, leaving uneven margins or an unwanted background
ring. The square, rounded and circular choices in this tool therefore change
only the preview wrapper. Every exported PNG remains a full square source.

Understanding the warnings

  • Below 512×512: the browser must enlarge the source for
    the largest app icon, which can expose blur or compression artifacts.
    Vector SVG artwork is still reported using its declared canvas size.
  • Outside the safe zone: visible maskable artwork crosses
    the guaranteed circle and may be cropped by a launcher.
  • Transparency: transparent pixels remain in the final
    maskable image. A solid background is usually more predictable.
  • Fine detail: the 64-pixel rendering changes
    substantially when reduced to 16 pixels. Inspect the actual-size tab
    preview and consider a simpler mark.
  • Weak contrast: the average visible foreground is too
    close to its chosen background or browser surface. This is a heuristic,
    not a brand-accessibility certification.
  • Manifest fields: an app name and valid theme color are
    needed for a useful installable-app manifest.

Installing the files

  1. Unzip the package into the public root of the website.
  2. Paste the contents of favicon-snippet.html inside the
    site’s <head>.
  3. If the files live somewhere other than the root, change the paths in both
    the markup and site.webmanifest.
  4. Clear browser and CDN caches. Favicons are cached unusually
    aggressively, so a correct replacement can take time to appear.
  5. Test the installed icon on actual target devices. Previews catch the
    common problems; the operating system is the final authority.

SVG upload safety

SVG is code-shaped XML, not merely a bag of pixels. Before rendering an SVG,
the tool removes scripts, embedded HTML, event handlers and external resource
references. That lets a vector logo remain crisp without allowing an uploaded
file to execute active content or make hidden network requests.

Frequently asked questions

Which files does the generator make?

The ZIP contains a multi-size favicon.ico, 16×16 and 32×32 PNG favicons, a 180×180 Apple touch icon, ordinary and maskable web-app icons at 192×192 and 512×512, a Web App Manifest, installation markup and a short README.

What is a maskable icon?

A maskable icon gives an operating system enough background to crop the artwork into its preferred shape without adding an unwanted letterbox. It has its own crop and background controls here because a tight browser favicon and a safe app icon usually need different framing.

What does the dashed safe-zone circle mean?

The Web App Manifest specification guarantees that everything inside a centered circle with a radius of 40% of the icon size remains visible. Artwork outside it may survive on one device and be clipped on another. The guide is a preview only and is not included in the downloaded image.

Are rounded corners added to the downloaded icons?

No. Square, rounded and circular shapes are previews of what a platform may do. The exported image stays square, because baking one platform's corners into the source can produce double-rounded corners or a visible border on another.

Why does a 16×16 favicon need a separate preview?

A detailed logo can look excellent at 512 pixels and become an indistinct smudge at 16. The tool shows actual-size 16px and 32px checks, then generates those files with progressive power-of-two reduction, pixel-aligned placement, automatic optical sizing and mild sharpening. The validator still warns when substantial detail is likely to disappear.

Should maskable icons have a transparent background?

Usually not. A solid background gives launchers a complete surface to crop and avoids a dark or light system background showing through unexpectedly. The generator permits transparency but reports how much remains in the final maskable icon.

Does my logo get uploaded?

No. Image decoding, previews, validation, PNG and ICO creation, and ZIP packaging all happen inside your browser. The logo is not sent to Isobj or to a third-party service.