skills.rest
itallstartedwithaidea
itallstartedwithaideaCOMMUNITY
Explore all skills by this author โ†’
WebsiteGitHub

web-asset-generation

Generate web asset icons and HTML/meta configuration for favicons, PWA, and social sharing.

31|8|Updated Apr 10, 2026
Search Tags:#favicon#open-graph#twitter-card#image-resizing#web-manifest#pwa-icons#social-meta-tags
One-click install
npx skills add https://github.com/itallstartedwithaidea/agent-skills --skill web-asset-generation
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: web-asset-generation
Source: https://github.com/itallstartedwithaidea/agent-skills/tree/main/skills/media-creative/web-asset-generation
Command: npx skills add https://github.com/itallstartedwithaidea/agent-skills --skill web-asset-generation

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes assets (resource) components.

What problem does it solve?

Web Asset Generation eliminates the tedious, error-prone work of manually creating and wiring all the required website icons and social sharing metadata for modern browsers and platforms.

Core Features & Use Cases

  • Favicon and Apple Touch Icon Sets: Generates the correct image variants (including standard and platform-specific sizes) so bookmarks, tabs, and iOS devices display properly.
  • PWA Icons and Web Manifest: Produces regular and maskable icon variants and a manifest.json configured for installable PWA behavior.
  • Open Graph and Social Meta Tags: Creates Open Graph tags plus Twitter card configuration to ensure correct previews when sharing on social platforms.

Use case example: After a brand refresh, generate the full favicon set, PWA icon set, manifest, and social meta tags from a single source image so every platform displays consistent branding.

Quick Start

Use the web-asset-generation skill to generate favicon files, PWA icons with manifest.json, and copy-paste HTML meta tags from my source image for site name, URL, theme color, and description.

Frequently Asked Questions about web-asset-generation

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

FAQPage Schema
How do I generate favicons and PWA icons from a single source image?โ–ผ

Generating favicons and PWA icons from a single source image involves producing all required image size variants and platform-correct formats, including maskable PWA icons, to ensure consistent branding across browsers and devices.

What do I need to create Open Graph tags and a web manifest for social sharing?โ–ผ

Creating Open Graph tags and a web manifest requires a source image, site name, URL, theme color, and description. This skill outputs ready-to-use manifest.json files and document head tags configured for social sharing previews.

Does this generate maskable PWA icons and Apple Touch icons?โ–ผ

Yes, this generates maskable PWA icons and Apple Touch icons. It produces platform-correct icon variants and a manifest.json configured for installable PWA behavior so bookmarks, tabs, and iOS devices display properly.

How do I add Twitter card metadata to my website header?โ–ผ

To add Twitter card metadata to your website header, this skill creates ready-to-use HTML document head tags. It outputs the correct configuration to ensure proper link previews when sharing URLs on social platforms.

Can I update my web icons and social meta tags after a brand refresh?โ–ผ

Yes, you can update web icons and social meta tags after a brand refresh. This skill is designed for website setup and brand updates, generating the full favicon set, PWA icons, manifest, and social meta tags from your new source image.

Related Skills

Explore More Design & Creative Skillsโ†’
ezaurumezaurum

favicon

Generate a minimal favicon set from a source image and update site HTML.

Community
Intermediate
686f6c61686f6c61
105

meta-tags

Audit page URLs and generate corrected HTML meta tag snippets.

Community
Intermediate
oguzhan18oguzhan18
6

angular-pwa

Configure service workers and manifests for Angular PWA applications.

Community
Intermediate
I-OnlabsI-Onlabs
3

web-asset-generator

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

Community
Advanced