web-asset-generator

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

Updated Sep 11, 2026
One-click install
npx skills add https://github.com/CYRUS-pinto/pi-bot --skill web-asset-generator-cyrus-pinto
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-asset-generator
Source: https://github.com/CYRUS-pinto/pi-bot/tree/main/.agents/skills/web-asset-generator
Command: npx skills add https://github.com/CYRUS-pinto/pi-bot --skill web-asset-generator-cyrus-pinto

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating the full set of web assets a site needs—favicons in multiple sizes, PWA app icons, and platform-specific social sharing images—requires repetitive resizing, format conversion, and manual HTML meta tag writing. This Skill automates that entire pipeline with Python scripts and returns ready-to-paste HTML tags. ## Core Features & Use Cases - Favicon and App Icon Generation: Produces favicon.ico plus PNGs at 16x16, 32x32, 96x96, 180x180, 192x192, and 512x512 from a logo image or an emoji character, with keyword-based emoji suggestions. - Open Graph Image Generation: Creates 1200x630 (Facebook/LinkedIn/WhatsApp), 1200x675 (Twitter), and 1200x1200 square images from text with dynamic font sizing, optional logo overlay, and custom colors. - Validation and HTML Output: Optional --validate flag checks file sizes, dimensions, formats, and WCAG contrast ratios against platform limits, and both scripts emit the corresponding <link> and <meta> tags. - Use Case: A developer launching a new site uploads a logo and tagline, then receives a complete asset package—favicons, app icons, social images, validated against Facebook and Twitter requirements—plus the exact HTML to paste into their layout file. ## Quick Start Ask the assistant to generate favicons, app icons, and social sharing images from your logo file or a text slogan, and it will run the scripts and return the assets with HTML meta 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 app icons from a logo image?

Run generate_favicons.py with the source image path, output directory, and icon type ('favicon', 'app', or 'all'). It produces favicon.ico plus PNGs at 16x16, 32x32, 96x96, 180x180, 192x192, and 512x512, and prints the HTML link tags to include.

How do I create Open Graph images for Facebook and Twitter?

Run generate_og_images.py with an output directory and either --text for text-based images or --image to resize an existing image. It generates og-image.png (1200x630), twitter-image.png (1200x675), and og-square.png (1200x1200) with matching meta tags.

Can I generate a favicon from an emoji instead of a logo?

Yes, use the --emoji flag with generate_favicons.py, or --suggest with a project description to get four keyword-matched emoji suggestions. This requires the pilmoji library and the emoji package pinned below version 2.0.0 for compatibility.

What Python dependencies does web asset generation require?

Pillow is required for all image generation on Python 3.6 or later. Pilmoji and emoji (version below 2.0.0) are optional and only needed for emoji-based icon generation. A check_dependencies.py script verifies your environment.

How do I validate social images against platform requirements?

Add the --validate flag to either generation script. It checks file sizes against Facebook's 8MB and Twitter's 5MB limits, verifies dimensions and aspect ratios, confirms PNG/JPG format support, and calculates WCAG AA/AAA contrast ratios for text-based images.

Why does emoji rendering fail when generating favicons?

Emoji rendering fails when pilmoji is not installed or when the emoji package version is 2.0.0 or higher, which breaks pilmoji compatibility. Install with pip install pilmoji and pip install 'emoji<2.0.0' to resolve it.