Brand icons

Skill broomva/skills/skills/design/brand-icons

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.From its SKILL.md

Install

npx -y skills add broomva/skills --skill brand-icons

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

5.4 KB, ~1.3k tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it: 3 files

3.7 KB alongside SKILL.md

Gives 0 of the 12 instructions most marketing audience skills give in ~1.3k tokens

Counted across 690 of the 894 authors here whose files we hold, read 2026-08-07

Apply Poppins font to headingsin 41 of 690, across 6 files
Apply Lora font to body textin 41 of 690, across 6 files
Use Arial fallback for headingsin 39 of 690, across 4 files
Use Georgia fallback for body textin 39 of 690, across 4 files
Maintain text hierarchy and formattingin 39 of 690, across 4 files
Use accent colors for non-text shapesin 38 of 690, across 3 files
Use RGB values for precise color matchingin 38 of 690, across 3 files
Use brand colors for primary text and backgroundsin 36 of 690, across 1 file
Read product marketing context file before asking questions, starting, or auditingin 35 of 690, across 23 files
Use active voice instead of passive voicein 26 of 690, across 10 files
Implement or generate appropriate JSON-LD structured datain 24 of 690, across 17 files
Prioritize clarity over clevernessin 22 of 690, across 8 files

Said here and by no other author read

use available image tooling
fall back to closest available tool if one is missing
require source images to be at least 512x512 pixels
generate complete favicon sets
generate ios and android app icon sets
audit project trees for missing brand assets

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.