skills.rest
luicabref97
luicabref97COMMUNITY
Explore all skills by this author →
GitHub

web-asset-generator

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

Updated Apr 6, 2026
Search Tags:#validation#generate#open-graph#app-icons#favicons#og-images#emoji-icons
One-click install
npx skills add https://github.com/luicabref97/sushi-jungle-web --skill web-asset-generator-luicabref97
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-asset-generator
Source: https://github.com/luicabref97/sushi-jungle-web/tree/main/.agents/skills/web-asset-generator
Command: npx skills add https://github.com/luicabref97/sushi-jungle-web --skill web-asset-generator-luicabref97

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Many websites and apps need correctly sized, formatted, and accessible icons and social sharing images for multiple platforms, but creating every required variant manually is time-consuming and error-prone. This Skill automates generation, sizing, formatting, and validation so assets meet platform guidelines and accessibility requirements.

Core Features & Use Cases

  • Favicons & App Icons: Produce browser favicons (PNG + ICO) and PWA app icons at required sizes (16x16, 32x32, 180x180, 192x192, 512x512).
  • Open Graph / Social Images: Generate platform-specific OG and Twitter images (1200x630, 1200x675, 1200x1200) from logos or text with dynamic font sizing and optional logo placement.
  • Emoji-based Icons & Validation: Suggest and render emoji icons, run validation for file size, dimensions, format, and WCAG contrast to ensure deployable assets.
  • Use Case: Turn a single uploaded logo or a short slogan into a complete web asset package and receive ready-to-use HTML meta and link tags.

Quick Start

Generate favicons and Open Graph images from my logo file and return the generated asset files plus the HTML meta/link tags.

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 single logo?▼

Generate favicons and Open Graph images by uploading a single logo or text slogan to produce browser favicons, PWA app icons, and social media meta images. The process handles resizing, format conversion, and returns ready-to-use HTML meta and link tags.

What sizes do I need for PWA app icons and social media meta images?▼

PWA app icons require sizes like 192x192 and 512x512, while social media meta images typically use 1200x630 for Open Graph and 1200x675 for Twitter. Generating these platform-specific dimensions from a single source image ensures compliance.

Can I create favicon and app icon packages from text instead of an image?▼

Yes, you can create favicon and app icon packages from short text slogans. The generator applies dynamic font sizing to render text into correctly formatted PNG and ICO files suitable for web and PWA deployment.

Does this validate Open Graph images for file size and WCAG contrast?▼

Yes, validation checks file size, dimensions, format, and WCAG contrast for Open Graph images. Running these platform-specific validations ensures your generated assets meet accessibility requirements and platform guidelines before deployment.

How do I render emoji icons for web assets?▼

Render emoji icons for web assets by using the built-in emoji-based generation feature. This allows you to suggest and create emoji icons that are automatically resized and formatted into deployable favicon and app icon files.

What is the best way to automate creating browser favicons and ICO files?▼

Automate creating browser favicons and ICO files by processing an uploaded image or text through an automated generation pipeline. This handles resizing, format conversion, and validation, producing a complete web asset package.

Related Skills

Explore More Design & Creative Skills→
jackspacejackspace
16

web-asset-generator

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

Community
Advanced
kennyolofsson23-netizenkennyolofsson23-netizen

web-asset-generator

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

Community
Advanced
Ali1razAli1raz
2

nextjs-seo

Implement metadata, Open Graph, Twitter Cards, JSON-LD, sitemaps, and robots.txt for Next.js 13+ App Router.

Community
Advanced
rmjamesrmjames
1

image-processor

Resize and crop raster and SVG images with ImageMagick and SVGO.

Community
Advanced