iconset-maker
Create icon sets for multiple operating systems (macOS, Windows, Linux, iOS, Android, Web). Covers required sizes, formats, and conversion workflows using sips, iconutil, ImageMagick, and rsvg-convert.
What this skill does
# Icon Set Maker Expert guidance for creating complete icon sets across all major platforms. ## Available Tools ### macOS Native Tools | Tool | Command | Purpose | |------|---------|---------| | **sips** | `/usr/bin/sips` | Resize, resample, convert between formats | | **iconutil** | `/usr/bin/iconutil` | Convert .iconset ↔ .icns | ### Homebrew Tools | Tool | Install | Purpose | |------|---------|---------| | **ImageMagick** | `brew install imagemagick` | Multi-size ICO, advanced compositing | | **librsvg** | `brew install librsvg` | SVG → PNG conversion | | **optipng** | `brew install optipng` | PNG optimization | | **pngquant** | `brew install pngquant` | PNG size reduction | ## Platform Requirements ### macOS (.icns) Required sizes for App.iconset directory: ``` icon_16x16.png (16×16) [email protected] (32×32) icon_32x32.png (32×32) [email protected] (64×64) icon_128x128.png (128×128) [email protected] (256×256) icon_256x256.png (256×256) [email protected] (512×512) icon_512x512.png (512×512) [email protected] (1024×1024) ``` ### Windows (.ico) Standard sizes to include: ``` 16×16 - Small icon (taskbar, file lists) 24×24 - Explorer medium 32×32 - Desktop, Explorer 48×48 - Large icon view 64×64 - Extra large 128×128 - Jumbo (Vista+) 256×256 - High DPI displays (Vista+) ``` ### Linux (freedesktop.org) Directory structure under `/usr/share/icons/hicolor/`: ``` 16x16/apps/appname.png 22x22/apps/appname.png 24x24/apps/appname.png 32x32/apps/appname.png 48x48/apps/appname.png 64x64/apps/appname.png 128x128/apps/appname.png 256x256/apps/appname.png 512x512/apps/appname.png scalable/apps/appname.svg (optional, preferred) ``` ### iOS App Icons Required for App Store submission: ``` # iPhone [email protected] (120×120) [email protected] (180×180) # iPad Icon-76.png (76×76) [email protected] (152×152) [email protected] (167×167) # App Store Icon-1024.png (1024×1024) - No transparency! # Spotlight [email protected] (80×80) [email protected] (120×120) # Settings [email protected] (58×58) [email protected] (87×87) # Notification [email protected] (40×40) [email protected] (60×60) ``` ### Android App Icons Density buckets in `res/mipmap-*/`: ``` mipmap-mdpi/ic_launcher.png (48×48) mipmap-hdpi/ic_launcher.png (72×72) mipmap-xhdpi/ic_launcher.png (96×96) mipmap-xxhdpi/ic_launcher.png (144×144) mipmap-xxxhdpi/ic_launcher.png (192×192) # Adaptive icons (Android 8+) mipmap-anydpi-v26/ic_launcher.xml mipmap-*/ic_launcher_foreground.png (108dp with 72dp safe zone) mipmap-*/ic_launcher_background.png ``` ### Web Favicons ``` favicon.ico (16×16, 32×32 multi-size) favicon-16x16.png (16×16) favicon-32x32.png (32×32) apple-touch-icon.png (180×180) icon-192.png (192×192) - PWA icon-512.png (512×512) - PWA safari-pinned-tab.svg (monochrome SVG) mstile-150x150.png (150×150) - Windows tiles ``` --- ## Conversion Workflows ### From SVG Source (Recommended) SVG is the ideal source - infinite scalability: ```bash #!/bin/bash # Generate all sizes from SVG source SOURCE_SVG="icon.svg" OUTPUT_DIR="./icons" mkdir -p "$OUTPUT_DIR" # Define all needed sizes SIZES=(16 20 24 29 32 40 48 58 60 64 72 76 80 87 96 120 128 144 152 167 180 192 256 512 1024) for SIZE in "${SIZES[@]}"; do rsvg-convert -w "$SIZE" -h "$SIZE" "$SOURCE_SVG" -o "$OUTPUT_DIR/icon-${SIZE}.png" echo "Generated: icon-${SIZE}.png" done ``` ### Using sips (macOS) ```bash # Resize a PNG sips -z 512 512 source.png --out icon_512x512.png # Resize maintaining aspect ratio (fit within box) sips --resampleHeightWidth 256 256 source.png --out icon_256.png # Convert format sips -s format png source.jpg --out output.png sips -s format icns source.png --out output.icns # Batch resize for SIZE in 16 32 64 128 256 512 1024; do sips -z $SIZE $SIZE source.png --out "icon_${SIZE}.png" done # Query image properties sips -g pixelWidth -g pixelHeight -g format image.png ``` ### Create macOS .icns ```bash #!/bin/bash # Create .icns from a 1024×1024 source PNG SOURCE_PNG="icon-1024.png" ICONSET_DIR="AppIcon.iconset" OUTPUT_ICNS="AppIcon.icns" # Create iconset directory mkdir -p "$ICONSET_DIR" # Generate all required sizes sips -z 16 16 "$SOURCE_PNG" --out "${ICONSET_DIR}/icon_16x16.png" sips -z 32 32 "$SOURCE_PNG" --out "${ICONSET_DIR}/[email protected]" sips -z 32 32 "$SOURCE_PNG" --out "${ICONSET_DIR}/icon_32x32.png" sips -z 64 64 "$SOURCE_PNG" --out "${ICONSET_DIR}/[email protected]" sips -z 128 128 "$SOURCE_PNG" --out "${ICONSET_DIR}/icon_128x128.png" sips -z 256 256 "$SOURCE_PNG" --out "${ICONSET_DIR}/[email protected]" sips -z 256 256 "$SOURCE_PNG" --out "${ICONSET_DIR}/icon_256x256.png" sips -z 512 512 "$SOURCE_PNG" --out "${ICONSET_DIR}/[email protected]" sips -z 512 512 "$SOURCE_PNG" --out "${ICONSET_DIR}/icon_512x512.png" sips -z 1024 1024 "$SOURCE_PNG" --out "${ICONSET_DIR}/[email protected]" # Convert to icns iconutil -c icns "$ICONSET_DIR" -o "$OUTPUT_ICNS" echo "Created: $OUTPUT_ICNS" # Cleanup (optional) # rm -rf "$ICONSET_DIR" ``` ### Create Windows .ico Using ImageMagick (recommended for multi-size ICO): ```bash #!/bin/bash # Create .ico with multiple sizes SOURCE_PNG="icon-1024.png" OUTPUT_ICO="app.ico" # Generate individual sizes magick "$SOURCE_PNG" -resize 16x16 icon-16.png magick "$SOURCE_PNG" -resize 24x24 icon-24.png magick "$SOURCE_PNG" -resize 32x32 icon-32.png magick "$SOURCE_PNG" -resize 48x48 icon-48.png magick "$SOURCE_PNG" -resize 64x64 icon-64.png magick "$SOURCE_PNG" -resize 128x128 icon-128.png magick "$SOURCE_PNG" -resize 256x256 icon-256.png # Combine into multi-size ICO magick icon-16.png icon-24.png icon-32.png icon-48.png \ icon-64.png icon-128.png icon-256.png "$OUTPUT_ICO" echo "Created: $OUTPUT_ICO" # Cleanup rm icon-{16,24,32,48,64,128,256}.png ``` Alternative using sips + ImageMagick: ```bash # sips for resize, ImageMagick for ICO assembly for SIZE in 16 24 32 48 64 128 256; do sips -z $SIZE $SIZE source.png --out "tmp_${SIZE}.png" done magick tmp_*.png app.ico rm tmp_*.png ``` ### Create Web Favicon Package ```bash #!/bin/bash # Complete web favicon package SOURCE_PNG="icon-1024.png" OUTPUT_DIR="./favicons" mkdir -p "$OUTPUT_DIR" # Standard favicons sips -z 16 16 "$SOURCE_PNG" --out "$OUTPUT_DIR/favicon-16x16.png" sips -z 32 32 "$SOURCE_PNG" --out "$OUTPUT_DIR/favicon-32x32.png" # Multi-size favicon.ico magick "$OUTPUT_DIR/favicon-16x16.png" "$OUTPUT_DIR/favicon-32x32.png" "$OUTPUT_DIR/favicon.ico" # Apple Touch Icon (no transparency, add background if needed) sips -z 180 180 "$SOURCE_PNG" --out "$OUTPUT_DIR/apple-touch-icon.png" # PWA icons sips -z 192 192 "$SOURCE_PNG" --out "$OUTPUT_DIR/icon-192.png" sips -z 512 512 "$SOURCE_PNG" --out "$OUTPUT_DIR/icon-512.png" # Microsoft tile sips -z 150 150 "$SOURCE_PNG" --out "$OUTPUT_DIR/mstile-150x150.png" echo "Generated web favicon package in $OUTPUT_DIR/" ``` ### Create iOS App Icon Set ```bash #!/bin/bash # iOS App Icon generation SOURCE_PNG="icon-1024.png" OUTPUT_DIR="./AppIcon.appiconset" mkdir -p "$OUTPUT_DIR" # Generate all iOS sizes declare -A IOS_SIZES=( ["[email protected]"]=40 ["[email protected]"]=60 ["[email protected]"]=58 ["[email protected]"]=87 ["[email protected]"]=80 ["[email protected]"]=120 ["[email protected]"]=120 ["[email protected]"]=180 ["Icon-76.png"]=76 ["[email protected]"]=152 ["[email protected]"]=167 ["Icon-1024.png"]=1024 ) for FILENAME in "${!IOS_SIZES[@]}"; do SIZE="${IOS_SIZES[$FILENAME]}" sips -z "$SIZE" "$SIZE" "$SOURCE_PNG" --out "$OUTPUT_DIR/$FILENAME" echo "Generated: $FILENAME (${SIZE}×${SIZE})" done # Generate Contents.json for Xcode cat > "$OUTPUT_DIR/Contents.json" << 'EOF' { "images" : [ {"filename":"[email protected]","idiom":"iphone","s
Related in Ads & Marketing
ads
IncludedMulti-platform paid advertising audit and optimization skill. Analyzes Google, Meta, YouTube, LinkedIn, TikTok, Microsoft, and Apple Ads. 250+ checks with scoring, parallel agents, industry templates, and AI creative generation.
banana
IncludedAI image generation Creative Director powered by Google Gemini Nano Banana models. Use this skill for ANY request involving image creation, editing, visual asset production, or creative direction. Triggers on: generate an image, create a photo, edit this picture, design a logo, make a banner, visual for my anything, and all /banana commands. Handles text-to-image, image editing, multi-turn creative sessions, batch workflows, and brand presets.
rpg-migration-analyzer
IncludedAnalyzes legacy RPG (Report Program Generator) programs from AS/400 and IBM i systems for migration to modern Java applications. Extracts business logic from RPG III/IV/ILE source code, identifies data structures (D-specs), file operations (F-specs), program dependencies (CALLB/CALLP), and converts RPG constructs to Java equivalents. Generates migration reports, complexity estimates, and Java implementation strategies with POJO classes, JPA entities, and service methods. Use when modernizing AS/400 or IBM i legacy systems, analyzing RPG source files (.rpg, .rpgle, .RPGLE), converting RPG to Java, mapping data specifications to Java classes, planning legacy system migration, or when user mentions RPG analysis, Report Program Generator, RPG III/IV/ILE, AS/400 modernization, IBM i migration, packed decimal conversion, or mainframe application rewrite.
brand-library-architect
IncludedBuild a complete brand library for a product — visual asset render pipeline, brand documentation set (BRAND, COPY, MANIFESTO, BIOS, FAQ, GLOSSARY, TONE, PRICING), open-source convention files (README, CONTRIBUTING, SECURITY, CODE_OF_CONDUCT), and a self-contained press kit. This skill should be used when the user asks to "build a brand library / brand kit / press kit / brand assets" for a product, "set up a brand library workflow," "create a positioning manifesto plus visual identity," or any combination of brand documentation + visual asset pipeline. Apply phase-by-phase or run end-to-end. Templates are product-agnostic and use {{TOKEN}} placeholders the skill prompts the user to fill.
writing-tech-post
IncludedAuthors engineering blog posts end-to-end: launch deep-dives, incident postmortems, architecture migrations, performance case studies, tutorials, AI/agent system writeups, security disclosures, and research-to-product translations. Picks the correct archetype, plans the abstraction ladder, enforces an evidence cadence (diagrams, benchmarks, profiles, traces, code, ablations), tunes voice against publisher house styles (Datadog, Vercel, GitHub, AWS, Meta, Cloudflare, Jane Street), and runs a pre-publish gate for narrative momentum and disclosure ethics. Use when drafting a new engineering post, restructuring a draft that feels flat, deciding which evidence form belongs where, validating that depth and product context are balanced, or preparing a postmortem, migration, or performance narrative for external publication. Do not use for API reference documentation, README authoring, marketing copy, release notes, generic SEO content, ghost-written executive thought leadership, or non-engineering long-form essays.
blog-google
IncludedGoogle API integration for blog performance: PageSpeed Insights, CrUX Core Web Vitals with 25-week history, Search Console performance, URL Inspection, Indexing API, GA4 organic traffic, NLP entity analysis for E-E-A-T, YouTube video search for embedding, and Google Ads Keyword Planner. Progressive feature availability based on credential tier (API key, OAuth/service account, GA4, Ads). Shares config with claude-seo at ~/.config/claude-seo/google-api.json. Use when user says "google data", "page speed", "core web vitals", "search console", "indexation", "GA4", "keyword research", "nlp entities", "blog performance", "youtube search", "google api setup".