Favicon & PWA Icon Generator

Choose one PNG, JPEG, or WebP source image.

Enter the app name and short name that should appear in site.webmanifest.

Review the start URL, scope, display mode, theme color, background color, regular-icon padding, and background treatment.

Keep dedicated maskable icons enabled for an installable web app unless a separate maskable design will be supplied manually.

Preview the regular and maskable composition, then download the ZIP.

The pack separates browser favicons, Apple touch artwork, regular manifest icons, and maskable icons because each context can crop, scale, or present artwork differently.

It also includes favicon.ico, a configured site.webmanifest, copyable head markup, and a README recording the selected settings and deployment checks.

A source that looks good at 1,024 pixels may fail at 16 pixels.

A simple symbol with strong silhouette, limited internal detail, and clear contrast usually survives favicon reduction better than a wordmark or illustration.

The generator accepts non-square artwork and preserves its shape, but a wide logo can become too small to recognise inside a square favicon.

Use a separate compact brand mark when the full logo cannot remain legible at browser-tab size.

The renderer uses contain scaling rather than forcing the source into a square.

The source is centred on each square canvas and scaled until it fits inside the available area.

Regular padding reduces the available width and height equally on every side.

A 1,600×600 wordmark therefore remains a 1,600:600 shape instead of being distorted into a square.

Regular favicon and manifest icons can retain transparency or use the selected solid background color.

Transparency is useful when the source was designed to sit directly on browser or operating-system surfaces.

A solid background gives more predictable contrast but becomes part of every regular PNG.

Inspect transparent artwork against both light and dark surfaces before publishing.

Padding is expressed as a percentage of each side of the square output.

At 8% padding, the available drawing box occupies 84% of the canvas width and height.

The source is fitted inside that box without cropping.

Padding applies to favicon PNGs, regular manifest icons, and the Apple touch icon. Dedicated maskable icons use their own safe-zone fit.

The generated favicon.ico is not a PNG renamed with an ICO extension.

Its ICO directory contains separate 16×16, 32×32, and 48×48 PNG-compressed image entries.

The HTML snippet links the ICO as a compatibility fallback and also links each generated PNG favicon explicitly.

Keeping favicon.ico at the site root supports browsers, crawlers, and tools that request /favicon.ico automatically.

Browsers and operating systems can request different icon sizes for tabs, bookmarks, shortcuts, history, and high-density displays.

The sizes attribute describes the dimensions available at each linked resource.

A browser can still apply its own selection and scaling rules, so every generated size should remain visually consistent.

Regular manifest icons are generated at 192, 384, 512, and 1,024 pixels with purpose any.

Current Chromium guidance calls for at least 192×192 and 512×512 icons for common installation experiences.

The additional sizes let platforms choose a closer raster match and provide a high-resolution source for larger presentation contexts.

Transparent regular icons are allowed, but their appearance depends on the surface and platform treatment.

A manifest icon with purpose maskable allows a platform to crop the icon into circles, rounded rectangles, squircles, and other shapes.

The current manifest specification defines a guaranteed safe zone as a circle centred in the icon with a radius equal to 40% of the icon size.

The generator scales the complete source rectangle so its diagonal fits inside that circle. This conservative method keeps every source corner within the guaranteed region.

The remaining canvas is filled with the selected solid background color.

A mathematically safe icon can still look too small, too low, or visually unbalanced after platform masking.

Wide artwork becomes especially small when its entire rectangle must fit inside the safe circle.

Preview the maskable icon under several shapes and prepare dedicated artwork when the automatic fit does not match the intended brand presentation.

The pack creates apple-touch-icon.png at 180×180 and adds the corresponding link element.

It uses the selected solid background because transparent Apple home-screen artwork can be presented differently from an ordinary transparent browser favicon.

Apple touch-icon is a separate web-platform convention rather than a replacement for manifest icons.

Test the finished icon on the Apple devices and operating-system versions that matter to the project.

The manifest name is the full product name used where sufficient space is available.

Short name is a compact alternative for constrained launcher labels and app lists.

The generator limits the short name to 30 characters, but a substantially shorter label is usually easier to scan and less likely to be truncated.

These values describe the installed experience and do not alter the website title or metadata automatically.

Start URL is the address opened when the installed web app is launched.

Scope defines the part of the site treated as belonging to the installed app experience.

Both values must be same-origin root-relative URLs in this generator, and the start URL must fall inside the selected scope.

A root scope of / includes the complete origin. A scope such as /tools/ includes that path and its descendants but not unrelated root pages.

Display controls the preferred window treatment when the installed app launches.

The exact result still depends on browser and operating-system support.

Choose the mode according to the navigation and controls provided by the deployed app rather than selecting the most immersive option automatically.

Theme color provides a default color hint for browser or operating-system interface surrounding the app.

Background color provides an initial background hint while the app is loading and is also used by this generator for Apple and maskable icon canvases.

Platforms can apply these values differently, so they should match the actual app design but should not be treated as guaranteed rendering instructions.

The same source is rendered differently where platform requirements differ.

The table shows which background, scaling method, and review step applies to each output family.

Every output is raster PNG artwork.

When the source is smaller than an output, the browser must enlarge the available pixels.

Smoothing can reduce jagged edges, but it cannot recreate missing line detail or sharp typography.

A source at least 512×512 is preferable for the main app icons, while a larger clean master is useful when a 1,024×1,024 output is needed.

Automatic resizing preserves geometry but cannot make design decisions.

Thin strokes can disappear, letters can close up, shadows can become muddy, and multiple colors can collapse into an indistinct patch.

Inspect the actual 16×16 and 32×32 PNGs rather than judging only the large preview.

A manually redrawn small favicon can be better than a mathematically faithful reduction.

The generated manifest and HTML markup use root-relative paths.

Upload the files to the site root or update every path consistently when using an asset directory, base path, CDN, or framework-specific metadata system.

Confirm that every icon and site.webmanifest returns the expected file with a successful response and correct content type.

The generated favicon-links.html contains standard link and meta elements.

Frameworks such as Next.js can also generate these elements through route metadata or specially named icon files.

Use one clear source of truth so duplicate or conflicting icon declarations do not make debugging harder.

The HTML file is guidance and is not inserted into the project automatically.

Browsers, bookmarks, operating systems, installed apps, service workers, CDNs, and search crawlers can retain old icons.

Replacing a file at the same path does not guarantee immediate visual replacement.

Use versioned asset paths or deliberate cache invalidation when the icon must change predictably.

An installed app may need to be refreshed or reinstalled before every platform surface updates.

The generated site.webmanifest supplies app metadata and icon declarations.

Installation behaviour also depends on the deployed origin, browser support, application behaviour, security requirements, and current platform criteria.

Test installation on the actual production-like site rather than assuming the presence of a manifest is sufficient.

The image is decoded into a browser bitmap, rendered onto local canvases, encoded as new PNG files, assembled into favicon.ico, and packaged with JSZip.

The source image and entered manifest metadata are not uploaded by this implementation.

New canvas-rendered PNG files ordinarily do not copy source EXIF or other original-file metadata.

The ZIP is generated only when the download action is selected.

The pack does not include an SVG favicon, monochrome Safari pinned-tab asset, Windows tile configuration, native Android or iOS project catalogs, app-store screenshots, splash-screen sets, or store-submission packages.

It also does not inspect trademark rights, brand standards, contrast compliance, installation eligibility, or visual quality on every device.