🎨 A Claude Code Skill for generating favicons, app icons, and social media images

Talk to Claude naturally to create production-ready web assets from logos, text, or emojis!

This is a Claude Code Skill - a modular capability that extends Claude's functionality. When installed, Claude can automatically generate web assets through natural conversation.

Example conversation:

You: "Create a favicon for my coffee shop website"

Claude:

• Suggests relevant emojis (☕ Coffee, 🏪 Store)
• Generates all icon sizes (16×16 through 512×512)
• Validates files and checks accessibility
• Detects your framework (Next.js, Astro, etc.)
• Offers to add HTML tags to your code
• Provides testing validator links

No manual work needed - just ask Claude!

See the skill in action:

Watch Claude automatically generate favicons, validate them, and integrate them into your project!

• Claude Code 2.0.13 or later
• Python 3.6+ with pip

Recommended: Via Plugin Marketplace

The easiest way to install:

/plugins marketplace add alonw0/web-asset-generator
and then
/plugin install web-asset-generator@web-asset-generator-marketplace

Then install dependencies:

pip install Pillow

# Optional: For emoji support
pip install pilmoji 'emoji<2.0.0'

Alternative: Manual Installation

git clone https://github.com/alonw0/web-asset-generator.git
cd web-asset-generator

# macOS/Linux
cp -r skills/web-asset-generator ~/.claude/skills/

# Windows
xcopy /E /I skills\web-asset-generator %USERPROFILE%\.claude\skills\web-asset-generator

pip install Pillow
pip install pilmoji 'emoji<2.0.0'  # Optional

After installation, restart Claude Code to load the plugin.

Open Claude Code and try:

• "Create a favicon with a rocket emoji"
• "Generate Open Graph images for my blog"
• "Make app icons from my logo.png"

Claude will automatically invoke this skill and guide you through the process!

• Favicons - Browser icons (16×16, 32×32, 96×96, favicon.ico)
• App Icons - PWA/mobile icons (180×180, 192×192, 512×512)
• PWA Manifest - Auto-generate manifest.json with icons, colors, and settings
• Social Images - Open Graph for Facebook, Twitter, LinkedIn (1200×630, 1200×675)
• Emoji Support - 60+ curated emojis with smart suggestions
• Validation - File sizes, dimensions, formats, WCAG contrast compliance
• Auto-Integration - Framework detection and code insertion
• Interactive - Question-based workflow using Claude's UI

Emoji Favicon Generated from 🚀 with custom background

Social Media Image Text with dynamic font sizing

web-asset-generator/                    # Repository root
├── README.md                           # This file
├── CONTRIBUTING.md                     # How to contribute
├── LICENSE                             # MIT License
├── CHANGELOG.md                        # Version history
├── .claude-plugin/                     # Plugin metadata
│   └── plugin.json                     # Plugin manifest
├── marketplace.json                    # Marketplace distribution
├── docs/                               # Documentation & examples
└── skills/                             # Skills directory
    └── web-asset-generator/           # ⭐ THE SKILL (copy this folder)
        ├── SKILL.md                    # Skill definition (Claude reads this)
        ├── CLAUDE.md                   # Development guidance
        ├── scripts/
        │   ├── generate_favicons.py    # Favicon generator
        │   ├── generate_og_images.py   # Social image generator
        │   ├── emoji_utils.py          # Emoji utilities
        │   ├── check_dependencies.py   # Dependency checker
        │   └── lib/
        │       └── validators.py       # Validation system
        └── references/
            └── specifications.md       # Platform specs

To install: Copy the skills/web-asset-generator/ folder to ~/.claude/skills/

Once installed, use natural language:

"Create a favicon for my tech startup"
"Generate app icons from my logo.png"
"Make a favicon using a rocket emoji"
"I need PWA icons for my website"

"Create Open Graph images for my blog"
"Generate Twitter card with my tagline"
"Make social sharing images from my logo"
"Create Facebook preview with custom colors"

"Suggest emojis for my coffee shop"
"Show me good emojis for a fitness app"
"Create favicon from emoji representing growth"

"Generate favicons and validate them"
"Create social images and check accessibility"
"Make Open Graph images and verify file sizes"

You can also use the scripts directly without Claude:

cd ~/.claude/skills/web-asset-generator

# Generate from emoji
python scripts/generate_favicons.py --emoji "🚀" output/ all

# Generate social images
python scripts/generate_og_images.py output/ --text "Welcome"

# Check dependencies
python scripts/check_dependencies.py

See skills/web-asset-generator/CLAUDE.md for complete script documentation.

1. Verify installation:

   ls ~/.claude/skills/web-asset-generator/SKILL.md

2. Check dependencies:

   cd ~/.claude/skills/web-asset-generator
   python scripts/check_dependencies.py

3. Restart Claude Code

4. Your request should include keywords like "favicon", "icon", "social image", or "Open Graph"

Pilmoji requires emoji<2.0.0:

pip install 'emoji<2.0.0'

• Ensure SKILL.md is in the skill folder
• Restart Claude Code after installation
• Try explicit requests like "create a favicon"
• Check that the skill folder is named web-asset-generator

• PLUGIN_INSTALLATION.md - Detailed plugin installation guide
• skills/web-asset-generator/SKILL.md - Complete Skill instructions
• skills/web-asset-generator/CLAUDE.md - Development guide
• CONTRIBUTING.md - Contribution guidelines
• CHANGELOG.md - Version history

Contributions welcome! See CONTRIBUTING.md for:

• Development setup
• Code standards
• Testing guidelines
• Pull request process

Priority areas:

• Additional platforms (Pinterest, Instagram)
• WebP/AVIF format support
• Unit tests
• Performance optimizations

MIT License - see LICENSE

• Anthropic for Claude Code and the Skills framework
• Pillow - Python Imaging Library
• Pilmoji - Emoji rendering

• PWA manifest.json generation ✅ Completed!
• WebP and AVIF support
• Pinterest/Instagram support
• Dark mode variants
• Batch processing
• Web preview interface

• 📖 Claude Code Skills Docs
• 🐛 Report Issues
• 💬 Discussions
• 🌟 Anthropic Skills Repo

Built for Claude Code • Made with ❤️ by the community

⭐ Star this repo • Share with Claude Code users!