Do I need an SVG input?

SVG is preferred for crisp scaling, but a square 1024x1024 PNG also works. If the input isn’t square, you can crop or pad (default: pad).

What outputs are generated?

Web/PWA set: favicon.ico, apple-touch-icon.png, icon-192.png, icon-512.png, icon-maskable-512.png. UE sets (optional): Windows .ico, macOS .iconset/.icns, Linux .png.

Where can I read more guidance?

Refer to references/web-ui-ux.md for web icon guidance and references/icon-sizes.md for size tables; use the tool to generate HTML head snippets and manifest examples as needed.

icon-generator

Scanned

npx machina-cli add skill ssdeanx/AI-Skills/icon-generator --openclaw

Files (1)

SKILL.md

2.3 KB

Icon Generator

You generate icon asset bundles for web UI/UX first (favicons + PWA icons), and you can also generate Unreal Engine packaging icon assets when needed.

Fast workflow

Pick target(s): Web UI/UX (favicon + PWA icons) and/or Unreal Engine packaging (optional).
Pick the source icon: prefer a 1024x1024 PNG (square) or a clean SVG. If it's not square, choose whether to crop or pad (default: pad).
Generate the assets using scripts/generate_icons.py.

Web/PWA sizes and safe-area rules: references/web-ui-ux.md

Unreal Engine formats and expectations: references/unreal-engine.md

Full size tables: references/icon-sizes.md

Verify output quality: ensure the .ico contains multiple sizes, and the 16/24/32 px variants are crisp.

Quality rules (what "good" looks like)

Design for small sizes: avoid thin strokes, tiny text, and busy details.
Prefer transparent backgrounds for desktop icons unless you intentionally "plate" the icon.
Preview at 16px and 24px. If it becomes muddy, create a simpler variant.

Automation (recommended)

Run and customize the script:

Script: scripts/generate_icons.py
It supports:
- Web/PWA set: favicon.ico, apple-touch-icon.png, icon-192.png, icon-512.png, icon-maskable-512.png
- UE sets (optional): Windows .ico, macOS .iconset, Linux .png

If you need HTML <head> snippets, manifest.webmanifest examples, and maskable safe-area guidance, read:

references/web-ui-ux.md

Notes

If your input is SVG and Python SVG rasterization is unavailable on your machine, export a 1024x1024 PNG first (e.g., Inkscape), then rerun the script using the PNG.
Keep this SKILL.md lean; detailed size tables live in the reference files.

Source

git clone https://github.com/ssdeanx/AI-Skills/blob/main/skills/icon-generator/SKILL.mdView on GitHub

Overview

Generates web UI/UX icon assets (favicon, Apple touch, PWA icons) and optional Unreal Engine packaging icons from a single source SVG/PNG. Automates multi-size outputs, safe-area guidance, manifest/head snippet support, and can streamline icon production.

How This Skill Works

Choose target sets (Web UI/UX and optional Unreal Engine packaging). Provide a square source asset (SVG preferred, or a 1024x1024 PNG; crop or pad if not square). Run the script scripts/generate_icons.py to produce favicon.ico, apple-touch-icon.png, icon-192.png, icon-512.png, and icon-maskable-512.png, plus Windows .ico, macOS .iconset/.icns, and Linux PNGs if UE is selected. Reference guides and size tables help ensure correct outputs and safe-area compliance.

When to Use It

You need correct multi-size web icons (ICO with multiple sizes) and PWA assets from a single source.
You want optional Unreal Engine packaging icons (Windows .ico, macOS .iconset/.icns, Linux PNG).
You must follow safe-area guidance and include HTML head snippets or manifest examples.
You aim for an automated, repeatable icon pipeline via a script (generate_icons.py).
Your source asset is square SVG or 1024x1024 PNG and you may need to crop/pad non-square inputs.

Quick Start

Step 1: Pick targets (Web UI/UX and/or Unreal Engine packaging) and prepare a square source asset (SVG preferred, or 1024x1024 PNG).
Step 2: Run the script: python scripts/generate_icons.py to generate favicon.ico, apple-touch-icon.png, icon-192.png, icon-512.png, and maskable icons; optional UE outputs if selected.
Step 3: Verify outputs (ICO contains multiple sizes; 16/24/32 variants are crisp) and update HTML head/manifest snippets as needed.

Best Practices

Design for small sizes: avoid thin strokes, tiny text, and busy detail.
Prefer transparent backgrounds for desktop icons unless plating is intentional.
Preview at 16px and 24px; if muddy, create a simpler variant.
Ensure the ICO includes multiple sizes (e.g., 16, 24, 32) for broad compatibility.
Use a square source (SVG preferred); if using PNG, start with 1024x1024 and decide crop/pad accordingly.

Example Use Cases

Refresh favicon and PWA icons for an e-commerce site using a 1024x1024 PNG input.
Ship a SaaS dashboard’s app icons and maskable variants following web-ui-ux standards.
Create Unreal Engine packaging icons from a vector logo for a cross-platform game.
Generate Apple touch icons and maskable icons with safe-area guidance for mobile apps.
Integrate generate_icons.py into a CI workflow to auto-regenerate icons on asset updates.

Frequently Asked Questions

Add this skill to your agents