App Icon Generator

Generated a manifest with 3 icon entry(ies) and 0 finding(s).

How it works

• Normalised the background and theme colours to lower-case hex.
• Built any/maskable icon entries for 192, 512 and a 512 maskable icon.
• Drew the maskable SVG with the monogram inside the central safe zone.
• Serialised the Web App Manifest as JSON.

• The maskable icon keeps its artwork inside the safe zone so a platform mask does not crop it.
• The manifest is valid JSON and can be saved as manifest.webmanifest.

Methodology

1. Normalise the colours and validate the app and icon names.
2. Build the manifest icon entries for the documented sizes and purposes.
3. Draw the maskable SVG at 512×512 with the monogram scaled to stay inside the safe zone.

Usage

1. Enter the app name and a short name for the home screen.
2. Enter one or two characters (or an emoji) for the icon.
3. Enter the background and theme colours as 3- or 6-digit hex.
4. Generate and copy the manifest, the maskable SVG or the link tags.

Examples

These are examples, not current values: they use fixed inputs, while the interactive tool computes live results in your browser.

A dark app icon

{
  "appName": "Gampangin",
  "shortName": "Gampangin",
  "monogram": "G",
  "backgroundColor": "#090d16",
  "themeColor": "#2563eb"
}

A bright app icon

{
  "appName": "JSON Workbench",
  "shortName": "Workbench",
  "monogram": "{}",
  "backgroundColor": "#f8fafc",
  "themeColor": "#2563eb"
}

Limitations

Installable web apps

A Web App Manifest describes an installable site: its name, colours and icons. Linking it with `<link rel="manifest" href="/manifest.webmanifest">` makes the app installable where the browser supports it.

The manifest and icons are plain files you save next to your site; the generator runs entirely in your browser.