brand-icons

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

<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