Immutable. This exact content is served forever at /api/v1/blob/e973d31ac2266ad1.
---
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:
- [ ] 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
```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