skills.rest
kennyolofsson23-netizen
kennyolofsson23-netizenCOMMUNITY
Explore all skills by this author →
GitHub

web-asset-generator

Generate favicons, PWA app icons, and Open Graph images from logos or text.

1|Updated Mar 15, 2026
Search Tags:#validation#emoji#image-generation#open-graph#app-icons#favicons#og-images
One-click install
npx skills add https://github.com/kennyolofsson23-netizen/claude-code-config --skill web-asset-generator-kennyolofsson23-netizen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-asset-generator
Source: https://github.com/kennyolofsson23-netizen/claude-code-config/tree/main/skills/web-asset-generator
Command: npx skills add https://github.com/kennyolofsson23-netizen/claude-code-config --skill web-asset-generator-kennyolofsson23-netizen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Pillow, pilmoji, emoji, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Many projects lack correctly sized, accessible, and platform-ready icons and social sharing images, which causes poor previews, branding inconsistencies, and deployment friction. This Skill centralizes generation of favicons, PWA app icons, and Open Graph images from a single logo, emoji, or text input and returns ready-to-use files plus HTML/meta tags.

Core Features & Use Cases

  • Multi-format generation: Produces favicon PNGs, favicon.ico, apple/android app icons, and Open Graph images (1200x630, 1200x675, 1200x1200).
  • Emoji-first flow: Suggests and renders emoji-based icons when a logo is not available.
  • Text-to-image: Creates branded social images from taglines with dynamic font sizing and optional logo overlay.
  • Validation & accessibility: Optional validation checks for file size, dimensions, formats, and WCAG contrast compliance.
  • Integration help: Provides HTML link/meta tags and an optional workflow to auto-detect frameworks and insert tags into project files.

Quick Start

Generate favicons, app icons, and Open Graph images from my logo and show the HTML meta tags for integration.

Frequently Asked Questions about web-asset-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate favicons and Open Graph images from a logo?▼

You can generate favicons and Open Graph images from a single logo, emoji, or text input. The process outputs correctly sized PNG/JPEG variants, favicon.ico, and accompanying HTML meta and link tags for websites and social platforms.

What sizes do Open Graph images need for Facebook, Twitter, and LinkedIn?▼

Open Graph images for platforms like Facebook and Twitter require specific dimensions. This tool outputs correctly sized variants including 1200x630, 1200x675, and 1200x1200 pixels to ensure proper social media previews.

Can I create PWA app icons and favicons using an emoji instead of a logo?▼

Yes, you can create app icons and favicons using an emoji. An emoji-first flow suggests and renders emoji-based icons when a logo file is not available, producing correctly sized PNG variants for web deployment.

Does the generated image output include WCAG contrast validation?▼

Yes, the image generation includes optional validation that checks for WCAG contrast compliance. It also validates file size, dimensions, and formats to ensure your web assets meet accessibility and platform requirements.

How do I add HTML meta tags for favicons into my project files?▼

You can add HTML meta tags by using the optional workflow to auto-detect your framework and insert the generated link tags directly into your project files. This provides ready-to-use integration code alongside the exported assets.

What is the best way to make text-to-image branded social sharing previews?▼

The best way to make text-to-image branded social previews is by inputting your taglines to create dynamic, font-sized images with optional logo overlays. This produces ready-to-use Open Graph images for social platforms.

Related Skills

Explore More Design & Creative Skills→
hongmaple0820hongmaple0820
9

web-asset-generator

Generate favicons, app icons, and Open Graph images from logos or text.

Community
Advanced
sayali-ingle-pdlsayali-ingle-pdl

public

Generate PWA favicons, icons, and site.webmanifest in the public/ directory.

Community
Intermediate
jackspacejackspace
16

web-asset-generator

Generate favicons, app icons, and Open Graph images from logos or text slogans.

Community
Advanced
Yukine5377Yukine5377

bmad-edit-prd

Automates PRD editing and optimization through a BMAD-aligned workflow with validation routing and approval gates.

Community
Advanced