Skip to content

petarcrncecIMP/IconGen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

IconGen

Windows Forms tool that turns a single SVG logo into a complete set of PWA icons, a web manifest, and a <head> snippet — ready to drop into a web project.

What it produces

For each run, IconGen writes a folder named after the app and fills it with:

  • icon-192.png, icon-512.png, icon-1024.png — standard PWA icons
  • icon-512-maskable.png, icon-1024-maskable.png — maskable variants with a 10% safe-zone inset
  • apple-touch-icon.png (180×180)
  • recolored.svg, favicon.svg — composed vector icon (tile + recolored logo)
  • favicon-test.svg, *-test.png — same outputs with a yellow strip overlay to flag "test build" assets
  • manifest.webmanifest — PWA manifest pointing at the generated icons
  • _index-snippet.html<link> / <meta> tags to paste into your <head>

PNGs are rendered at 8× supersample and downscaled to avoid white halos at curves.

Requirements

Build

dotnet build -c Release

Or publish a self-contained single-file exe (settings already configured in IconGen.csproj):

dotnet publish -c Release

The exe lands under bin/Release/net8.0-windows/win-x64/publish/.

Run

dotnet run -c Release

Or launch the published IconGen.exe.

Workflow

  1. SVG file — pick the source logo. The logo's fill is expected to be solid black (#000 / black / rgb(0,0,0)); IconGen recolors those fills to the accent color.
  2. App name — used for the output folder name and manifest.webmanifest's name.
  3. Short nameshort_name in the manifest. Defaults to App name if blank.
  4. Accent color — the brand color. Becomes the logo fill (or, if inverted, the tile color), and theme_color in the manifest.
  5. Background — the grey shade used for whichever element isn't accent-colored: the tile when not inverted, or the logo when inverted. Picked from a range of grey shades; defaults to light grey.
  6. Invert (accent ↔ grey) — swaps which element is accent-colored: unchecked = accent logo on a grey tile; checked = grey logo on an accent tile.
  7. Rounded background tile — wraps the logo in a rounded square (~22% corner radius). Turn this off if you want a transparent-background icon.
  8. Click Generate. The log pane streams progress; when done you'll be offered to open the output folder.

Output is written to <exe directory>/<App name>/.

Integrating the output

Copy the generated files into your web project's public root, then paste _index-snippet.html into your <head>:

<link rel="manifest" href="/manifest.webmanifest" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="theme-color" content="#yourAccent" />

Notes

  • The source SVG sitting next to the exe named SWA_logo_generic.svg (if present) is auto-loaded into the SVG path field on startup.
  • Recoloring is a regex pass over the SVG text — it only touches fills that are exactly black or white tokens. Logos with other fill colors will need to be normalized first.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages