Brand Icons

Name: Brand Icons
Author: broomva

broomva/skills

4 installs
3 repo stars
Updated August 5, 2026
broomva/skills

brand-icons is a Claude Code skill that generates favicons, app icons, Open Graph images, and social avatars from brand assets and audits projects for brand consistency.

About

brand-icons is a skill for generating and managing brand visual-identity assets across web, mobile, and social platforms. From a source image it produces favicon sets, iOS and Android app icons, Open Graph and Twitter card images, and platform-sized social profile and banner images. A developer uses it to create a project's icon set, generate OG images, or audit a project for missing brand assets. It pulls brand tokens from related design skills for consistency.

Generates favicon sets, app icons, OG images, and social avatars from a source image
Covers web (favicons, PWA), iOS/Android app icons, and per-platform social sizes
Audits a project for missing or inconsistent brand assets

Brand Icons by the numbers

4 all-time installs (skills.sh)
Ranked #1,526 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

At a glance

brand-icons capabilities & compatibility

Capabilities: favicon generation · app icon generation · og image generation · brand audit
Use cases: ui design · image generation · seo

From the docs

What brand-icons says it does

Brand icon and visual identity management for BroomVA projects. Generates favicons, app icons, Open Graph images, and social media avatars from brand assets.

SKILL.md

Maintains consistent visual identity across web, mobile, and social platforms.

SKILL.md

npx skills add https://github.com/broomva/skills --skill brand-icons

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/broomva/skills/brand-icons.svg)](https://skillselion.com/skills/broomva/skills/brand-icons)

Installs	4
repo stars	★ 3
Last updated	August 5, 2026
Repository	broomva/skills ↗

What it does

Generate favicons, app icons, OG images, and social avatars from a source image and audit a project for missing brand assets.

Who is it for?

Generating a full icon and OG-image set and auditing a project for missing or inconsistent brand assets.

Skip if: Designing original logos or brand identity from scratch (it works from existing brand assets).

When should I use this skill?

A user needs favicon sets, app icons, OG/Twitter card images, or social profile images for a project.

What you get

A complete, consistent set of favicons, app icons, OG images, and social assets from one source image.

Favicon set (ICO/PNG/SVG)
iOS and Android app icons
Open Graph and Twitter card images

By the numbers

6 favicon sizes (16/32/48/180/192/512)
OG images at 1200x630
5 social platforms sized in the social command

Files

SKILL.mdMarkdownGitHub ↗

Brand Icons

Visual identity asset generation and management for BroomVA projects.

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
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

`generate <source-image>`

Generate a complete icon set (favicons, app icons, OG template) from a source image.

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>]`

Create an Open Graph image with the given title, using the BroomVA brand template.

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>`

Check a project for missing or inconsistent brand assets:

[ ] 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>`

Generate platform-specific profile and banner images:

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

brand-icons

Brand icon and visual identity asset generation and management for BroomVA projects. Generates favicons, app icons, Open Graph images, and social media avatars from brand assets.

Quick Start

# Install
npx skills add broomva/brand-icons -y -g

# Generate full icon set from source image
# Agent reads source SVG/PNG and produces multi-size favicon set, app icons, OG template

# Create OG image for a blog post
# Agent generates 1200x630 branded image with title text

# Audit a project for missing brand assets
# Agent checks for favicon, apple-touch-icon, PWA icons, OG images

Modes

Mode	Command	Output
`generate`	`generate <source-image>`	Full icon set (favicons, app icons, OG template)
`og-image`	`og-image <title>`	1200x630 Open Graph image
`audit`	`audit <project-path>`	Missing/inconsistent asset checklist
`social`	`social <platform> <source>`	Platform-specific profile and banner images

Integration

arcan-glass — brand tokens for OG image generation
content-creation — auto-generate OG images for blog posts
seo-llmeo — OG/Twitter meta tag asset references
design-engineering — DESIGN.md visual identity alignment

License

MIT

{
  "name": "brand-icons",
  "version": "1.0.0",
  "description": "Brand icon and visual identity management — generates favicons, app icons, OG images, and social media avatars from brand assets with consistent visual identity.",
  "entrypoint": "SKILL.md",
  "inputs_schema": {
    "type": "object",
    "additionalProperties": false,
    "properties": {
      "mode": {
        "type": "string",
        "enum": ["generate", "og-image", "audit", "social"],
        "description": "Skill mode: generate (full icon set), og-image (Open Graph image), audit (missing assets check), social (platform-specific images)"
      },
      "source": {
        "type": "string",
        "description": "Path to source image (SVG or PNG, minimum 512x512 for best results)"
      },
      "title": {
        "type": "string",
        "description": "Title text for OG image generation (max 60 characters)"
      },
      "subtitle": {
        "type": "string",
        "description": "Optional subtitle for OG image"
      },
      "project_path": {
        "type": "string",
        "description": "Project directory to audit for brand assets"
      },
      "platform": {
        "type": "string",
        "enum": ["x", "linkedin", "github", "youtube", "discord"],
        "description": "Social media platform for profile/banner generation"
      },
      "output_dir": {
        "type": "string",
        "default": "icons/",
        "description": "Output directory for generated assets"
      },
      "format": {
        "type": "string",
        "enum": ["png", "svg", "webp"],
        "default": "png",
        "description": "Output image format"
      }
    },
    "required": ["mode"]
  }
}

Related skills

Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k

Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k

Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k

Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476

Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k

Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

FAQ

What does the audit command check?

Presence of favicon.ico, apple-touch-icon, PWA icons (192/512), an OG image and Twitter card, consistent brand colors, and non-upscaled source images.

What OG image size does it produce?

1200x630 PNG with a JPEG fallback, using the brand template with a title and optional subtitle.

Design & UI/UXbrandingui

About

Brand Icons by the numbers

brand-icons capabilities & compatibility

What brand-icons says it does

Add your badge

What it does

Who is it for?

When should I use this skill?

What you get

By the numbers

Files

Brand Icons

Capabilities

Commands

generate <source-image>

og-image <title> [--subtitle <text>]

audit <project-path>

social <platform> <source-image>

Size Reference

Favicons

HTML Integration

manifest.webmanifest

Integration

brand-icons

Quick Start

Modes

Integration

License

Related skills

FAQ

What does the audit command check?

What OG image size does it produce?

This week in AI coding

`generate <source-image>`

`og-image <title> [--subtitle <text>]`

`audit <project-path>`

`social <platform> <source-image>`