Which social media platforms are supported for meta images?

It generates optimized images for Facebook, Twitter (X), WhatsApp, and LinkedIn, including the standard 1200x630 format and 16:9 Twitter large cards.

Does this skill provide the HTML code for my website?

Absolutely. It generates the specific link and meta tags required for all icons and social images and can even offer to insert them into your code automatically.

Can I generate icons without an existing logo image?

Yes, you can generate professional assets using text slogans or even emojis with the built-in suggestion engine that recommends icons based on your project description.

Can it integrate with frameworks like Next.js or Astro?

Yes, the skill includes an auto-detection feature that identifies your framework and can update files like layout.tsx or index.html with the correct tags.

Does this require any external design software?

No, the skill uses internal scripts to handle all image processing, resizing, and color overlays directly within your Claude Code environment.

Web Asset & Open Graph Generator

Name: Web Asset & Open Graph Generator
Author: BbgnsurfTech

byBbgnsurfTech

•

Design Tools

Generates a complete suite of website favicons, mobile app icons, and social media Open Graph images from logos, text, or emojis.

This skill streamlines the creation of essential web branding assets by transforming source logos, slogans, or emojis into production-ready icons and social sharing images. It handles complex resizing tasks for browser favicons and PWA icons while generating platform-specific social media cards for Facebook, Twitter, and LinkedIn. Beyond image generation, it provides the necessary HTML meta tags and offers automated integration into popular web frameworks like Next.js, Astro, and SvelteKit, ensuring your site looks professional across all platforms.

Key Features

01Smart emoji-to-favicon conversion with keyword-based suggestions

02Multi-format favicon generation including .ico and high-resolution PNGs

03Automated HTML meta tag generation and framework-aware integration

04PWA-compliant app icons for iOS and Android home screens

053 GitHub stars

06Automated Open Graph and Twitter Card image creation

Use Cases

01Generating a complete set of favicons and touch icons for a new web project

02Updating legacy websites with modern PWA icons and Open Graph metadata

03Creating branded social sharing previews for landing pages from simple text slogans

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bbgnsurftech/claude-skills-collection web-asset-generator

For use in Claude.ai and ChatGPT

Download Skill