Web Asset Generator
Generate favicons, app icons (PWA), and social media Open Graph images from logos or text
WhatIsIt
A comprehensive tool for generating professional web assets from a single source - whether a logo image, text slogan, or emoji. Creates complete favicon sets, PWA app icons, and social media Open Graph images for all major platforms (Facebook, Twitter, LinkedIn). Transforms a single input into all the icons and images your website needs, with built-in validation, accessibility checking, and framework-specific integration code.
HowToUse
The skill uses Claude's interactive visual UI for a streamlined workflow:
-
Select Asset Types - Visual selector for what you need: favicons only, app icons only, social images only, or everything
-
Provide Source - Choose your input method:
- Upload an existing logo/image
- Generate from text/slogan with custom colors
- Use curated emoji suggestions (60+ organized by industry)
-
Generate & Validate - Skill automatically:
- Generates all required sizes (16×16 through 512×512)
- Validates file sizes and dimensions
- Checks WCAG contrast compliance for accessibility
- Creates PWA manifest.json with proper configuration
-
Framework Integration - Automatically detects your framework (Next.js, Astro, etc.) and offers to add HTML tags to your code
-
Test - Provides validator links (realfavicongenerator.net, etc.) for final verification
No manual image editing required - from single input to complete asset set with validation and integration code.
KeyFeatures
- Complete asset generation - Favicons (16×16 to 96×96), app icons (180×180 to 512×512), social images (1200×630, 1200×675)
- Multiple input methods - From images (logos), from text (with custom backgrounds), from emojis (60+ curated suggestions)
- Interactive visual UI - Question-based workflow using Claude's AskUserQuestion for clear, fast selections
- Comprehensive validation - File sizes, dimensions, formats, WCAG contrast compliance for accessibility
- PWA manifest generation - Auto-generates manifest.json with icons, colors, and app settings
- Framework auto-detection - Detects Next.js, Astro, etc. and provides framework-specific integration code
- Emoji library - 60+ curated emojis organized by industry (tech, food, commerce, creative, data)
- Testing validator links - Provides URLs to test your generated assets in real scenarios