35 added, 18 removed. Audit A to A.
---
name: brand-icons
description: >
- Brand icon and visual identity management for BroomVA projects. Generates favicons,
- app icons, Open Graph images, and social media avatars from brand assets. Maintains
- 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.
+ 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 | Generate multi-size favicon sets (16, 32, 48, 180, 192, 512) from source SVG/PNG |
- | App icons | iOS (1024x1024 + sizes) and Android (adaptive icon, mipmap) generation |
+ | 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 |
- ## Commands
+ ## Workflows
- ### `generate <source-image>`
+ ### Generating a full icon set
- Generate a complete icon set (favicons, app icons, OG template) from a source image.
+ **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/`).
- Output structure:
+ 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
```
- ### `og-image <title> [--subtitle <text>]`
+ ### Generating an Open Graph image
- Create an Open Graph image with the given title, using the BroomVA brand template.
+ **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
- ### `audit <project-path>`
+ ### Auditing a project for brand assets
- Check a project for missing or inconsistent 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)
- ### `social <platform> <source-image>`
+ ### Generating social media images
- Generate platform-specific profile and banner 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
```html
<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
```json
{
"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