web-asset-generation

Web Asset Generation

Part of Agent Skills™ by googleadsagent.ai™

Description

Web Asset Generation automates the creation of favicons, PWA icons, Open Graph images, social media meta tags, and Apple touch icons from a single source image or brand specification. The agent produces the complete set of assets required for a modern web application—across all platforms, sizes, and formats—with proper HTML meta tags and web manifest configuration.

A professional web presence requires dozens of image variants: 16x16 and 32x32 favicons, 180x180 Apple touch icons, 192x192 and 512x512 PWA icons in both regular and maskable formats, 1200x630 Open Graph images, 1200x600 Twitter cards, and platform-specific splash screens. Generating these manually is tedious and error-prone; forgetting a single variant means broken previews on a specific platform. This skill automates the entire pipeline.

Beyond icon generation, the skill produces the associated configuration: HTML <link> and <meta> tags for the document head, manifest.json for PWA support, and platform-specific meta tags for Twitter Cards, Facebook Open Graph, and LinkedIn. The output is copy-paste ready—a complete set of assets with the HTML to reference them.

Use When

• Setting up favicon and icon assets for a new web project
• Generating Open Graph images for social media sharing
• Configuring PWA manifest with proper icon sizes
• Creating social media meta tags (Twitter Cards, OG tags)
• Rebuilding assets after a brand update or redesign
• The user asks for "favicon", "OG image", "PWA icons", or "social meta tags"

How It Works

graph TD
    A[Source: SVG / PNG / Brand Config] --> B[Parse Source Asset]
    B --> C[Generate Favicon Set]
    B --> D[Generate PWA Icons]
    B --> E[Generate OG Images]
    B --> F[Generate Apple Touch Icons]
    C --> G[favicon.ico: 16x16, 32x32]
    C --> H[favicon.svg: Scalable]
    D --> I[icon-192.png + icon-512.png]
    D --> J[maskable-192.png + maskable-512.png]
    E --> K[og-image-1200x630.png]
    E --> L[twitter-card-1200x600.png]
    F --> M[apple-touch-icon-180x180.png]
    G --> N[Generate HTML Meta Tags]
    H --> N
    I --> N
    J --> N
    K --> N
    L --> N
    M --> N
    N --> O[Generate manifest.json]
    O --> P[Complete Asset Package]