Brand Icons

Brand Icons

Visual identity asset generation and management for BroomVA projects.

> This is a latent skill — it ships no CLI or scripts. Everything below is a > workflow the agent performs itself, using whatever image tooling is available > in the working environment (e.g. ImageMagick magick/convert, sharp, > rsvg-convert, pngquant, or the agent's own image-generation tools). There is > no brand-icons binary to run — do not invoke these as shell commands. The > headings name the intent; the agent maps each to concrete file-producing steps > with the tools at hand, and falls back to the closest available tool when a > specific one is missing.

Capabilities

| Area | What it does | |------|-------------| | Favicons | Produce multi-size favicon sets (16, 32, 48, 180, 192, 512) from a source SVG/PNG | | App icons | iOS (1024x1024 + sizes) and Android (adaptive icon, mipmap) sets | | OG images | Template-based Open Graph images (1200x630) with title, description, branding | | Social avatars | Profile pictures and banners sized for X, LinkedIn, GitHub, etc. | | Brand consistency | Color palette extraction, contrast checking, asset catalog management |

Workflows

Generating a full icon set

When asked to generate an icon set from a source image, read the source SVG/PNG (it must be at least 512x512 so nothing is upscaled) and produce a complete set of favicons, app icons, and a PWA/OG template, writing them under the output directory (default icons/).

Target output structure:

icons/
├── favicon.ico          # 16x16, 32x32, 48x48 combined
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png # 180x180
├── icon-192.png         # PWA manifest
├── icon-512.png         # PWA manifest
├── android/
│   ├── mipmap-mdpi/     # 48x48
│   ├── mipmap-hdpi/     # 72x72
│   ├── mipmap-xhdpi/    # 96x96
│   ├── mipmap-xxhdpi/   # 144x144
│   └── mipmap-xxxhdpi/  # 192x192
└── ios/
    └── AppIcon.appiconset/
        └── Contents.json + sized PNGs

Generating an Open Graph image

When asked to create an Open Graph image, produce one from the given title using the BroomVA brand template (optionally with a subtitle).

Specifications:

• Dimensions: 1200x630 pixels
• Format: PNG (with JPEG fallback for smaller size)
• Brand elements: Logo, gradient background, typography from DESIGN.md
• Dynamic text: Title (max 60 chars), optional subtitle

Auditing a project for brand assets

When asked to audit a project, check the project tree for missing or inconsistent brand assets and report against this checklist:

• [ ] favicon.ico present
• [ ] apple-touch-icon.png present (180x180)
• [ ] PWA icons in manifest (192, 512)
• [ ] OG image referenced in meta tags
• [ ] Twitter card image present
• [ ] Icons use consistent brand colors
• [ ] No pixelated/upscaled icons (source must be >= target size)

Generating social media images

When asked for platform-specific images, produce profile and banner images at the right dimensions for the target platform:

| Platform | Profile | Banner/Cover | |----------|---------|-------------| | X (Twitter) | 400x400 | 1500x500 | | LinkedIn | 400x400 | 1584x396 | | GitHub | 460x460 | — | | YouTube | 800x800 | 2560x1440 | | Discord | 128x128 | 960x540 |

Size Reference

Favicons

| File | Size | Purpose | |------|------|---------| | favicon.ico | 16+32+48 | Browser tab | | favicon-16x16.png | 16x16 | Small browser tab | | favicon-32x32.png | 32x32 | Standard browser tab | | apple-touch-icon.png | 180x180 | iOS home screen | | icon-192.png | 192x192 | Android Chrome / PWA | | icon-512.png | 512x512 | PWA splash screen | | maskable-icon.png | 512x512 | Android adaptive (safe area: 80%) |

HTML Integration

manifest.webmanifest

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/maskable-icon.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Integration

Works with:

• arcan-glass — pulls brand tokens (colors, typography) for OG image generation
• content-creation — generates OG images for new blog posts
• seo-llmeo — ensures OG/Twitter meta tags reference correct image assets
• design-engineering — aligns icon assets with DESIGN.md visual identity

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: broomva
• Source: broomva/skills
• License: MIT
• Homepage: https://skills.sh/broomva/skills

Install and usage instructions live in the source repository linked above.