---
name: Web Asset Generator
description: Generate favicons, app icons (PWA), and social media Open Graph images from logos or text
---

# Web Asset Generator

Generate favicons, app icons (PWA), and social media Open Graph images from logos or text

What is it?
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.

## How to use it?
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.

## Key Features

* 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 scenariosView on GitHub

### GitHub Stats
StarsForksLast UpdateAuthoralonw0LicenseMITVersion1.0.0

### Categories
DesignDeveloper Tools

### Tags
faviconiconsopen-graphsocial-mediaweb-assetspwa

### Features
💻 Code Execution

## Related Skills
More from Design

### Frontend Design
The official Claude frontend design skill by Anthropic. Guides Claude Code to create distinctive, production-grade frontend interfaces with high design quality, covering typography, color, motion, spatial composition, and UI design patterns

5.7kanthropicsDesignDeveloper Tools00

### Architecture Diagram Creator
Creates comprehensive HTML architecture diagrams with SVG visualizations showing business context, data flows, processing pipelines, and system architecture

350mhattingpeteDeveloper ToolsDesign00

### Flowchart Creator
Creates HTML flowcharts and process diagrams with SVG-based nodes, decision diamonds, connecting arrows, and optional swimlanes with color-coded types

350mhattingpeteDeveloper ToolsDesign00

---

**Source**: https://github.com/alonw0/web-asset-generator
**Author**: alonw0
**License**: https://opensource.org/licenses/MIT
**GitHub Stars**: 120
**Tags**: favicon, icons, open-graph, social-media, web-assets, pwa