| name | brand-icons |
| description | Brand icon and visual identity management for BroomVA projects. Helps the agent produce favicons, app icons, Open Graph images, and social media avatars from brand assets, keeping a consistent visual identity across web, mobile, and social platforms. Use when: (1) generating favicon sets (ICO, PNG, SVG) for a web project, (2) creating app icons for iOS/Android, (3) generating Open Graph and Twitter Card images, (4) producing social media profile/banner images, (5) ensuring brand consistency across platforms.
|
| version | 1.0.0 |
| category | design |
| latent_only | true |
| tags | ["brand","icons","favicons","og-images","app-icons","visual-identity","social-media"] |
| dependencies | ["arcan-glass","seo-llmeo"] |
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:
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
<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 generationcontent-creation — generates OG images for new blog postsseo-llmeo — ensures OG/Twitter meta tags reference correct image assetsdesign-engineering — aligns icon assets with DESIGN.md visual identity
