macOS App Icon

macOS App Icon

Pick a source photo, crop it to a square, optionally pick a finish style, and export a real 1024x1024 macOS app icon PNG with the standard rounded-square ("squircle") mask - corners genuinely transparent. The PDF export shows the same rounded-square shape too (background color painted over the corners) - not real transparency (impossible for a PDF page), but visually correct on paper/in a viewer.

What's included

• A source-photo field with crop enabled, forced to a 1:1 aspect ratio and at least 1024x1024
• An Icon Style dropdown - None, Smooth Bevel, Flat Glass, or Drop - a light translucent finish painted over the photo
• An exact 1024x1024 PNG export resolution, independent of the global DPI setting
• A rounded-square mask applied to both output formats - genuinely transparent corners in the PNG, a painted approximation in the PDF

Examples for Authors

• Image field crop - the source photo field has crop/crop_aspect_ratio/crop_min_width_px/crop_min_height_px set in form.json, so picking a photo pops up a crop modal forcing a square, at-least-1024px selection. Picking a smaller image is rejected outright with an explicit "this image is too small" message rather than silently cropping below that floor.
• Conditional style overlay blocks - overlay.json has one image block per Icon Style option (smoothbevel.png/flatglass.png/drop.png, each a mostly-transparent finish texture), each gated by a plain condition (e.g. "icon_style == 'Smooth Bevel'") matching the dropdown's own value - no process.js scripting needed, the existing condition mechanism already used elsewhere (e.g. hiding a placeholder MPG value) does all the work. "None" simply matches none of the three conditions.
• Exact PNG export resolution - process.js sets inputs.output_width/inputs.output_height to 1024, overriding the global DPI setting so the exported PNG is always exactly 1024x1024 regardless of this project's own (arbitrary) physical page size.
• setPageMask - process.js calls setPageMask(1, "assets:AppIconTemplate.png"). That template's own real alpha channel (a baked-in rounded-square mask, corners transparent) is used two ways: multiplied directly into the PNG export's own alpha (real transparency), and painted (inverted, as an opaque background-color overlay) onto the PDF page's own content, so both output formats show the same masked shape - applied AFTER the style overlay, so a style's own edges get masked cleanly too.

Save as PNG for a file with genuinely transparent corners (what a real app icon needs); the PDF export shows the same shape but painted, not transparent.

Customizing

Replace AppIconTemplate.png with a different rounded-rect (or any other shape) alpha-mask template to change the corner treatment. Add a new Icon Style by dropping in another mostly-transparent overlay PNG, adding it as a dropdown option in form.json, and adding a matching conditional image block in overlay.json.