What does this skill do, and when should you use it?
This is a Claude Code Skill that produces the image assets a website needs to ship: favicons (16/32/96px plus favicon.ico), PWA app icons (180/192/512px), and Open Graph sharing images (1200×630 for Facebook/WhatsApp/LinkedIn, 1200×675 for Twitter). Input can be a logo image, a text slogan, or an emoji, and the emoji mode suggests candidates based on a project description. After generating assets it emits ready-to-paste HTML meta tags, detects frameworks like Next.js and Astro, and offers to insert the tags into your codebase. A --validate flag checks file sizes, dimensions, formats, and WCAG contrast compliance. It is MIT-licensed and depends on Pillow, with pilmoji and emoji needed for emoji features.
Reads an uploaded logo, a text slogan, or an emoji character and runs Python scripts (generate_favicons.py and generate_og_images.py, built on Pillow) to batch-produce favicons, app icons, and Open Graph images at all standard sizes. Emoji mode uses a --suggest flag to recommend candidates from a project description, then renders icons with --emoji (requires pilmoji). It automatically outputs favicon link tags and og:/twitter: meta tags; it can scan for config files like next.config.js or astro.config.mjs to identify your framework, locate target files such as layout.tsx or index.html, and insert tags after showing a diff for confirmation. The --validate flag checks file size limits (8MB Facebook, 5MB Twitter), dimension ratios, supported formats, and computes WCAG 2.0 contrast ratios for text-based images.
- An indie developer launching a new site with no icons yet who wants a full set of favicons and PWA icons from a single emoji or logo
- A blogger who wants article links to render rich preview cards on Twitter, WhatsApp, and LinkedIn and needs correctly sized OG images plus meta tags
- A team on Next.js or Astro that wants to skip manually pasting icon tags into layout files by letting the skill detect the framework and insert code
- A non-designer founder with only a tagline who needs branded social images and a WCAG contrast compliance check
- A frontend engineer who wants to batch-validate existing icon files' sizes, dimensions, and formats against platform requirements before deployment
How do you install this skill?
- Emoji generation depends on pilmoji, which typically fetches emoji images from overseas CDNs and may fail in mainland-China network environments.
- Publisher is not verified by the FollowSkills registry; identity is unknown, with no versioning or update path, so long-term maintenance is unclear.
- Nothing was executed in this review: favicon.ico and OG image quality and the availability of external validator links are unverified; some links (cards-dev.twitter.com) may be defunct.
- Framework auto-integration modifies user code files; although confirmation and diff preview are required, users should back up target files before changes.
- The emoji library must be pinned to <2.0.0 for pilmoji compatibility; take care during installation.
- Shell / CLI
- Local filesystem
Python 3.6+Pillowpilmoji (optional, emoji icons)emoji<2.0.0 (optional, emoji suggestions)
Prerequisites: Claude Code 2.0.13+ and Python 3.6+. Recommended install via the plugin marketplace: /plugins marketplace add alonw0/web-asset-generator, then /plugin install web-asset-generator@web-asset-generator-marketplace. For manual installation, clone the repository and copy the skills/web-asset-generator/ folder into ~/.claude/skills/. Then install dependencies: pip install Pillow (plus pip install pilmoji 'emoji<2.0.0' for emoji features), and restart Claude Code.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/alonw0/web-asset-generator.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/web-asset-generator" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Create a favicon with a rocket emoji
- Generate Open Graph images for my blog
- Make app icons from my logo.png
After installing, trigger it with natural language, e.g. "Create a favicon with a rocket emoji", "Generate Open Graph images for my blog", or "Make app icons from my logo.png". The skill uses interactive multiple-choice questions to confirm asset type, source material, target platforms, and colors, then runs its scripts and shows the HTML tags. You can also bypass Claude and run scripts directly, e.g.: python scripts/generate_favicons.py --emoji "🚀" output/ all, or python scripts/generate_og_images.py output/ --text "Welcome" --validate. You must copy generated files to your site's public/static directory and manually update dynamic meta values like og:title and og:url.
What are this skill's strengths and limitations?
- Generates every standard size and format in one pass (favicon.ico, apple-touch-icon, Android Chrome icons, multi-platform OG images) with no need to look up specs
- Outputs correct HTML/meta tags and can detect Next.js, Astro, SvelteKit, Nuxt, Gatsby, and more, then insert code directly
- Built-in --validate checks file sizes, dimension ratios, formats, and WCAG contrast — useful as a pre-deployment gate
- Emoji suggestion feature is handy for projects without a logo, with 60+ curated emojis
- MIT licensed; scripts also work standalone without Claude
- Emoji rendering depends on pilmoji and pins emoji<2.0.0, which may conflict with other Python projects
- Code insertion modifies project files; there is a diff-confirmation step, but review is still warranted
- Docs note OG images must be reachable via HTTPS absolute URLs, so local previews can't verify real sharing behavior
- No Pinterest/Instagram support and no WebP/AVIF yet (both on the roadmap); no test suite is evident in the repo
- The repository has no topics set — community size and activity should be verified on the GitHub page
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Web Asset Generator this page | 54 · Use with care | ★ 519 | 9mo ago | MIT |
| Slack GIF Creator Toolkit | 50 · Use with care | ★ 3.1k | 8mo ago | MIT |
| Image Crop and Rotate | 50 · Use with care | ★ 452 | 9mo ago | Apache-2.0 |
| Blog Image Creative Director | 53 · Use with care | ★ 2.4k | 11d ago | MIT |
| Guizang Social Cards | 49 · Use with care | ★ 7.5k | 3mo ago | AGPL-3.0 |
Compared with manually using online favicon generators like RealFaviconGenerator or per-platform card validators, this skill chains generation, meta tag output, in-framework code insertion, and validation into a single conversation; however it requires a Python/Pillow environment and covers fewer platforms than established online services.
How did FollowSkills review this skill?
All scripts perform local image processing with no network exfiltration or credential access; least privilege is respected. Code integration requires explicit user confirmation with diff preview, and data flow is transparent. Deductions: unverified publisher identity, no rollback guidance, no security posture statement for dependencies (Pillow/pilmoji/emoji<2.0).
Scripts are internally consistent with a dependency checker, import fallbacks, clear error messages and exit codes; abnormal input yields diagnosable messages rather than silent failure. Deductions: no test suite and no execution evidence (static cap 10), contradictory LinkedIn min-size definition (1200x628 min vs 627 recommended), edge cases around text truncation uncovered.
Trigger description is precise (favicons, PWA icons, OG images); platform sizes, input types and non-fit ranges are clearly declared, supporting accurate semantic invocation. Deductions: no Chinese-language support statement; pilmoji-based emoji rendering typically fetches emoji images from a CDN, so the emoji feature may be unreachable from mainland China; hardcoded Linux font path weakens cross-environment fit.
Well-layered docs: SKILL.md workflow, references/specifications.md details, CLAUDE.md developer notes, with examples, validation output samples, dependency notes and MIT license. Deductions: SKILL.md body is visibly truncated, no versioning/changelog, no stated maintenance ownership or update path, publisher unknown.
Covers genuine common needs (full favicon set, OG images, HTML tags, framework integration); the --validate flag adds marginal value and the CLI is complete and reviewable. Deductions: static review cannot confirm output quality or direct usability; no representative executed outputs; named-color contrast checks are explicitly skipped.
Full auditable source is provided and claims broadly match implementation; facts and inference are reasonably separated. Deductions: no CI, no committed tests, no third-party execution evidence; platform specification numbers lack cited sources; static cap 5.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →