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

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:

Size Reference

Favicons

HTML Integration

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#0a0a12">

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