Web Asset Generation

# Web Asset Generation

Part of [Agent Skills™](https://github.com/itallstartedwithaidea/agent-skills) by [googleadsagent.ai™](https://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

```mermaid
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]
```

A single source asset flows through parallel generation pipelines, producing all required size variants and formats. The final step generates the HTML and manifest configuration to wire everything together.

## Implementation

```typescript
import sharp from "sharp";
import { writeFileSync, mkdirSync } from "fs";

interface AssetConfig {
  source: string;
  outputDir: string;
  siteName: string;
  siteUrl: string;
  themeColor: string;
  backgroundColor: string;
  description: string;
}

const ICON_SIZES = {
  "favicon-16x16.png": { width: 16, height: 16 },
  "favicon-32x32.png": { width: 32, height: 32 },
  "apple-touch-icon.png": { width: 180, height: 180 },
  "icon-192x192.png": { width: 192, height: 192 },
  "icon-512x512.png": { width: 512, height: 512 },
  "maskable-192x192.png": { width: 192, height: 192, maskable: true },
  "maskable-512x512.png": { width: 512, height: 512, maskable: true },
};

async function generateIcons(config: AssetConfig): Promise<void> {
  mkdirSync(config.outputDir, { recursive: true });
  const source = sharp(config.source);

  for (const [filename, size] of Object.entries(ICON_SIZES)) {
    let pipeline = source.clone().resize(size.width, size.height, { fit: "contain" });

    if ((size as { maskable?: boolean }).maskable) {
      const padding = Math.round(size.width * 0.1);
      pipeline = source.clone().