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.ico
PWA & App Icons
apple-touch-icon-180x180.png
android-chrome-192x192.png
android-chrome-512x512.png
Social Media Images
og-image-1200x630.png # Facebook, LinkedIn
twitter-card-1200x600.png # Twitter/X
whatsapp-preview.png # WhatsApp
Manifest Files
{
"name": "My App",
"icons": [...]
}
How to Use
From Logo
Create all web assets from my logo: /path/to/logo.png
From Emoji
Generate favicons using the coffee emoji for my cafe website
From Text
Create social media images with text "Launch Day!"
on a gradient blue background
Complete Package
Generate everything I need for my new startup website:
- Favicons
- PWA icons
- Open Graph images
Company: TechFlow
Colors: #2D9CDB primary, #27AE60 accent
Interactive 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
○ Combination
3. 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.json
HTML 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 Pillow
Optional (for emoji support)
pip install pilmoji emoji
Examples
Quick Favicon
User: "Make a quick favicon with a rocket emoji"
Generated:
- favicon-16x16.png ✓
- favicon-32x32.png ✓
- favicon.ico ✓
- HTML tags ready
Full 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 both
Best 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: