Web Asset Generator
Generate production-ready web assets (favicons, app icons, social images) through natural conversation with Claude.
When to Use This Skill
- Creating favicons for a new website
- Generating PWA/mobile app icons
- Making Open Graph images for social sharing
- Converting logos to multiple sizes
- Creating quick icons from emojis
- Building a complete asset package
What It Generates
Favicons
favicon-16x16.png
favicon-32x32.png
favicon-96x96.png
favicon.icoPWA & App Icons
apple-touch-icon-180x180.png
android-chrome-192x192.png
android-chrome-512x512.pngSocial Media Images
og-image-1200x630.png # Facebook, LinkedIn
twitter-card-1200x600.png # Twitter/X
whatsapp-preview.png # WhatsAppManifest Files
{
"name": "My App",
"icons": [...]
}How to Use
From Logo
Create all web assets from my logo: /path/to/logo.pngFrom Emoji
Generate favicons using the coffee emoji for my cafe websiteFrom Text
Create social media images with text "Launch Day!"
on a gradient blue backgroundComplete Package
Generate everything I need for my new startup website:
- Favicons
- PWA icons
- Open Graph images
Company: TechFlow
Colors: #2D9CDB primary, #27AE60 accentInteractive Workflow
The skill uses structured questions:
1. Asset Type Selection
What do you need?
○ Favicons only
○ PWA/App icons
○ Social media images
○ Everything (recommended)2. Source Material
What should I use?
○ Logo image (provide path)
○ Emoji (I'll suggest options)
○ Text/slogan
○ Combination3. For Emoji-Based Icons
Your project: Coffee shop website
Suggested emojis:
☕ Coffee cup
🫘 Coffee beans
☕️ Hot beverage
🏪 Store front
Or describe what you'd prefer...4. Customization
Background color:
○ White (#FFFFFF)
○ Transparent
○ Custom color (enter hex)Generated Output
Files Structure
assets/
├── favicons/
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ └── favicon.ico
├── app-icons/
│ ├── apple-touch-icon.png
│ └── android-chrome-512x512.png
├── social/
│ ├── og-image.png
│ └── twitter-card.png
└── manifest.jsonHTML Tags
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Open Graph -->
<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yoursite.com/twitter-card.png">Validation
Assets are checked for:
- Correct dimensions
- File size limits
- Color accessibility
- Platform compatibility
- Format requirements
Framework Integration
After generation:
I detected you're using Next.js.
Add to your public/ folder:
1. Copy generated files to /public/
2. Update app/layout.tsx with meta tags
3. Add manifest link
Want me to show the code?Dependencies
Required
pip install PillowOptional (for emoji support)
pip install pilmoji emojiExamples
Quick Favicon
User: "Make a quick favicon with a rocket emoji"
Generated:
- favicon-16x16.png ✓
- favicon-32x32.png ✓
- favicon.ico ✓
- HTML tags readyFull Branding Package
User: "Create complete web assets for my SaaS product 'DataFlow'"
Generated:
- 12 favicon sizes ✓
- 5 app icon sizes ✓
- 3 social images ✓
- manifest.json ✓
- HTML meta tags ✓
- Framework-specific code ✓Social Images Only
User: "I need Open Graph images for my blog post about AI"
Generated:
- og-image-1200x630.png (Facebook, LinkedIn)
- twitter-card-1200x600.png (Twitter/X)
- HTML tags for bothBest Practices
- Start with high-res source (512px+ for logos)
- Test generated assets in social media debuggers
- Use transparent PNGs when possible
- Verify on multiple devices
- Update manifest.json with correct paths
Testing Tools
After generation, test with: