skills.rest
gitspexx
gitspexxCOMMUNITY
Explore all skills by this author →
GitHub

web-asset-generator

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

Updated Mar 16, 2026
Search Tags:#social media#python#image generation#favicon#open graph#pillow#pwa icons
One-click install
npx skills add https://github.com/gitspexx/insider-guide --skill web-asset-generator-gitspexx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-asset-generator
Source: https://github.com/gitspexx/insider-guide/tree/main/insiderguide/.claude/skills/web-asset-generator
Command: npx skills add https://github.com/gitspexx/insider-guide --skill web-asset-generator-gitspexx

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 Open Graph images for Facebook, Twitter, LinkedIn, and WhatsApp—requires repetitive resizing, format conversion, and manual HTML meta tag writing. This Skill automates that entire pipeline from a single logo, text slogan, or emoji. ## Core Features & Use Cases - Favicon and App Icon Generation: Produces favicon.ico plus PNGs at 16x16, 32x32, 96x96, 180x180, 192x192, and 512x512 from a source image or an emoji character, with keyword-based emoji suggestions. - Open Graph Image Generation: Creates og-image.png (1200x630), twitter-image.png (1200x675), and og-square.png (1200x1200) from text with dynamic font sizing, optional logo overlay, and custom colors, or by resizing an existing image. - Validation and HTML Output: Optional --validate flag checks file sizes, dimensions, formats, and WCAG contrast ratios against platform requirements, and both scripts emit ready-to-paste HTML 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 sharing images, validated against platform limits—plus the exact meta tags to paste into their layout file. ## Quick Start Ask the assistant to generate favicons, app icons, and social media Open Graph images from your logo 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 in Python?▼

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

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 one. It generates og-image.png (1200x630), twitter-image.png (1200x675), and og-square.png (1200x1200), plus the Open Graph and Twitter meta tags.

Can I generate a favicon from an emoji character?▼

Yes, pass --emoji with a character like 🚀 to generate_favicons.py, optionally with --emoji-bg for a background color. This requires the pilmoji library, and the --suggest flag can recommend emojis based on a project description.

What image sizes and file size limits do social platforms require?▼

Facebook, LinkedIn, and WhatsApp recommend 1200x630 with files under 8MB (5MB for LinkedIn), while Twitter uses 1200x675 under 5MB. The references/specifications.md file documents all platform requirements, and the --validate flag checks your output against them.

Why does emoji favicon generation fail with an import error?▼

Emoji rendering requires the pilmoji library, and emoji suggestions require the emoji package pinned below version 2.0.0 for pilmoji compatibility. Install both with pip install pilmoji 'emoji<2.0.0', or run scripts/check_dependencies.py to diagnose the issue.

Does the tool check accessibility of text-based social images?▼

Yes, the --validate flag calculates the WCAG 2.0 contrast ratio between text and background colors for text-based images. It reports compliance against AA (4.5:1) and AAA (7.0:1) thresholds, accounting for large bold text.

Related Skills

Explore More Design & Creative Skills→
Growth4U-systemsGrowth4U-systems

visual-identity

Generate logos and style guides from brand traits, colors, typography, and imagery style.

Official
Advanced
dirnbauerdirnbauer
33

og-image

Generate Open Graph images and configure social meta tags for web frameworks.

Community
Intermediate
hdickohdicko

seo-optimizer

Generate SEO metadata, Open Graph tags, and semantic markup for web content.

Community
Intermediate
afel6afel6

meme-generation

Generate meme images from imgflip templates or custom images as PNGs.

Community
Intermediate