Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn. Use when users need icons, favicons, social sharing images, or Open Graph images from logos or text slogans. Handles image resizing, text-to-image generation, and provides proper HTML meta tags.
Permissions
Files
Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn. Use when users need icons, favicons, social sharing images, or Open Graph images from logos or text slogans. Handles image resizing, text-to-image generation, and provides proper HTML meta tags.
Generate professional web assets from logos or text slogans, including favicons, app icons, and social media meta images.
When a user requests web assets:
Use AskUserQuestion tool to clarify needs if not specified:
Version history
Check for source material:
Run the appropriate script(s):
scripts/generate_favicons.pyscripts/generate_og_images.pyProvide the generated assets and HTML tags to the user
IMPORTANT: Always use the AskUserQuestion tool to gather requirements instead of plain text questions. This provides a better user experience with visual selection UI.
✅ Visual UI: Users see options as clickable chips/tags instead of typing responses ✅ Faster: Click to select instead of typing out answers ✅ Clearer: Descriptions explain what each option means ✅ Fewer errors: No typos or misunderstandings from free-form text ✅ Professional: Consistent with modern Claude Code experience
User request: "I need web assets"
Claude uses AskUserQuestion (not plain text):
What type of web assets do you need? [Asset type]
○ Favicons only - Browser tab icons (16x16, 32x32, 96x96) and favicon.ico
○ App icons only - PWA icons for iOS/Android (180x180, 192x192, 512x512)
○ Social images only - Open Graph images for Facebook, Twitter, WhatsApp, LinkedIn
● Everything - Complete package: favicons + app icons + social images
User clicks → Claude immediately knows what to generate
Below are the standard question patterns to use in various scenarios. Copy the structure and adapt as needed.
When the user's request is vague (e.g., "create web assets", "I need icons"), use AskUserQuestion:
Question: "What type of web assets do you need?" Header: "Asset type" Options:
When the asset type is determined but source is unclear:
Question: "What source material will you provide?" Header: "Source" Options:
When user requests social images but doesn't specify platforms:
Question: "Which social media platforms do you need images for?" Header: "Platforms" Multi-select: true Options:
When generating text-based social images:
Question: "What colors should we use for your social images?" Header: "Colors" Options:
When user says "create icons" or "generate icons" (ambiguous):
Question: "What kind of icons do you need?" Header: "Icon type" Options:
When user selects "Emoji" as source material:
Step 1: Ask for project description (free text):
Step 2: Use AskUserQuestion to present the 4 suggested emojis:
Question: "Which emoji best represents your project?" Header: "Emoji" Options: (Dynamically generated based on project description)
Implementation:
# Get suggestions
python scripts/generate_favicons.py --suggest "coffee shop" output/ all
# Then generate with selected emoji
python scripts/generate_favicons.py --emoji "☕" output/ all
Optional: Ask about background color for app icons:
Question: "Do you want a background color for app icons?" Header: "Background" Options:
When to use: After generating assets and showing HTML tags to the user
Question: "Would you like me to add these HTML tags to your codebase?" Header: "Integration" Options:
If user selects "Yes, auto-detect":
If user selects "Yes, I'll tell you where":
Framework Detection Priority:
next.config.js, update app/layout.tsx or pages/_app.tsxastro.config.mjs, update layout files in src/layouts/svelte.config.js, update src/app.htmlnuxt.config.js, update app.vue or nuxt.config.tsindex.html or *.html filesgatsby-config.js, update gatsby-ssr.jsWhen to use: After code integration (or if user declined integration)
Question: "Would you like to test your meta tags now?" Header: "Testing" Options:
Provide appropriate testing URLs:
When user has a logo image:
python scripts/generate_favicons.py <source_image> <output_dir> [icon_type]
Arguments:
source_image: Path to the logo/image fileoutput_dir: Where to save generated iconsicon_type: Optional - 'favicon', 'app', or 'all' (default: 'all')Example:
python scripts/generate_favicons.py /mnt/user-data/uploads/logo.png /home/claude/output all
Generates:
favicon-16x16.png, favicon-32x32.png, favicon-96x96.pngfavicon.ico (multi-resolution)apple-touch-icon.png (180x180)android-chrome-192x192.png, android-chrome-512x512.pngNEW FEATURE: Create favicons from emoji characters with smart suggestions!
When user wants emoji-based icons, first get suggestions:
python scripts/generate_favicons.py --suggest "coffee shop" /home/claude/output all
This returns 4 emoji suggestions based on the description:
1. ☕ Coffee - coffee, cafe, beverage
2. 🌐 Globe - web, website, global
3. 🏪 Store - shop, store, retail
4. 🛒 Cart - shopping, cart, ecommerce
python scripts/generate_favicons.py --emoji "☕" <output_dir> [icon_type] [--emoji-bg COLOR]
Arguments:
--emoji: Emoji character to useoutput_dir: Where to save generated iconsicon_type: Optional - 'favicon', 'app', or 'all' (default: 'all')--emoji-bg: Optional background color (default: transparent for favicons, white for app icons)Examples:
# Basic emoji favicon (transparent background)
python scripts/generate_favicons.py --emoji "🚀" /home/claude/output favicon
# Emoji with custom background for app icons
python scripts/generate_favicons.py --emoji "☕" --emoji-bg "#F5DEB3" /home/claude/output all
# Complete set with white background
python scripts/generate_favicons.py --emoji "💻" --emoji-bg "white" /home/claude/output all
Generates same files as logo-based generation:
Note: Requires pilmoji library: pip install pilmoji
When user has a logo and needs Open Graph images:
python scripts/generate_og_images.py <output_dir> --image <source_image>
Example:
python scripts/generate_og_images.py /home/claude/output --image /mnt/user-data/uploads/logo.png
Generates:
og-image.png (1200x630 - Facebook, WhatsApp, LinkedIn)twitter-image.png (1200x675 - Twitter)og-square.png (1200x1200 - Square variant)When user provides a text slogan or tagline:
python scripts/generate_og_images.py <output_dir> --text "Your text here" [options]
Options:
--logo <path>: Include a logo with the text--bg-color <color>: Background color (hex or name, default: '#4F46E5')--text-color <color>: Text color (default: 'white')Example:
python scripts/generate_og_images.py /home/claude/output \
--text "Transform Your Business with AI" \
--logo /mnt/user-data/uploads/logo.png \
--bg-color "#4F46E5"
For users who want the complete package:
# Generate favicons and icons
python scripts/generate_favicons.py /mnt/user-data/uploads/logo.png /home/claude/output all
# Generate social media images
python scripts/generate_og_images.py /home/claude/output --image /mnt/user-data/uploads/logo.png
Or for text-based:
# Generate favicons from logo
python scripts/generate_favicons.py /mnt/user-data/uploads/logo.png /home/claude/output all
# Generate social media images with text + logo
python scripts/generate_og_images.py /home/claude/output \
--text "Your Tagline Here" \
--logo /mnt/user-data/uploads/logo.png
After generating assets, follow this workflow:
cp /home/claude/output/* /mnt/user-data/outputs/
Display the HTML tags that were automatically generated by the scripts.
Example output for favicons:
<!-- 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">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
Example output for Open Graph images:
<!-- Open Graph / Facebook -->
<meta property="og:image" content="/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Your description here">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="/twitter-image.png">
<meta name="twitter:image:alt" content="Your description here">
IMPORTANT: Always ask if the user wants help adding the tags to their codebase.
Question: "Would you like me to add these HTML tags to your codebase?" Header: "Integration" Options:
A. Detect Framework:
# Search for framework config files
find . -maxdepth 2 -name "next.config.js" -o -name "astro.config.mjs" -o -name "svelte.config.js" -o -name "nuxt.config.js" -o -name "gatsby-config.js"
# Or check package.json
grep -E "next|astro|nuxt|svelte|gatsby" package.json
B. Find Target Files Based on Framework:
app/layout.tsx or app/layout.jspages/_app.tsx or pages/_document.tsxsrc/layouts/*.astro (typically BaseLayout.astro or Layout.astro)src/app.htmlapp.vue or nuxt.config.ts (head section)gatsby-ssr.js or src/components/seo.tsxindex.html, public/index.html, or any *.html fileC. Confirm with User:
Use AskUserQuestion to confirm detected file:
Question: "I found [Framework Name]. Should I update [file_path]?"
Header: "Confirm"
Options:
- "Yes, update this file"
- "No, show me other options"
- "Cancel, I'll do it manually"
D. Show Diff and Insert:
<head> or appropriate section)Framework-Specific Insertion Examples:
For Plain HTML (insert before </head>):
<head>
<meta charset="UTF-8">
<!-- INSERT TAGS HERE -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
...
</head>
For Next.js App Router (add to metadata export):
export const metadata = {
icons: {
icon: [
{ url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
{ url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
],
apple: [
{ url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
],
},
openGraph: {
images: ['/og-image.png'],
},
twitter: {
card: 'summary_large_image',
images: ['/twitter-image.png'],
},
}
For Astro (insert in <head> of layout file):
<head>
<meta charset="UTF-8">
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
...
</head>
Provide brief instructions:
<head> section of your HTMLQuestion: "Would you like to test your meta tags now?" Header: "Testing" Options:
Provide Testing URLs:
Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
Twitter Card Validator: https://cards-dev.twitter.com/validator
LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/
OpenGraph.xyz: https://www.opengraph.xyz/
Remind user to:
Important Notes:
Both generate_og_images.py and generate_favicons.py support automated validation with the --validate flag.
Always recommend validation when:
Validation is optional for:
File Size Validation:
Dimension Validation:
Format Validation:
Accessibility (Contrast Ratio):
File Size Validation:
Dimension Validation:
Format Validation:
In generate_og_images.py:
python scripts/generate_og_images.py output/ --text "My Site" --validate
In generate_favicons.py:
python scripts/generate_favicons.py logo.png output/ all --validate
Output Format:
======================================================================
Running validation checks...
======================================================================
og-image.png:
Facebook Validation:
======================================================================
✓ File size 0.3MB is within Facebook limits
✓ Dimensions 1200x630 match Facebook recommended size
✓ Format PNG is supported by Facebook
LinkedIn Validation:
======================================================================
✓ File size 0.3MB is within LinkedIn limits
✓ Dimensions 1200x630 match LinkedIn recommended size
✓ Format PNG is supported by LinkedIn
======================================================================
Accessibility Checks:
======================================================================
✓ Contrast ratio 8.6:1 meets WCAG AAA standards (4.5:1 required)
======================================================================
Summary: 9/9 checks passed
✓ All validations passed!
After generating assets, if validation was NOT run:
If validation was run and issues found:
If validation passes:
For detailed platform specifications, size requirements, and implementation guidelines, read:
references/specifications.md: Comprehensive specs for all platformsUse AskUserQuestion:
Then ask:
Generate: Use generate_favicons.py with appropriate parameters
Use AskUserQuestion:
Then ask:
Generate: Use generate_og_images.py with appropriate parameters
Use AskUserQuestion:
Generate:
Use AskUserQuestion:
Generate: Use --text and --logo parameters together in generate_og_images.py
The scripts require:
pip install Pillow --break-system-packagespip install pilmoji (optional, only needed for emoji-based generation)pip install emoji (optional, only needed for emoji suggestions)Install if needed before running scripts.
For emoji features, install both:
pip install pilmoji emoji --break-system-packages
Popular skills
Works with
Claude, Codex, Cursor & more