Templates
W

Web Assets Generator Skill

Generates favicons, app icons, Open Graph images, and social media meta assets for web projects. Creates all required sizes from a single source image with proper HTML meta tags for cross-platform compatibility.

SkillCommunityfrontendv1.0.0MIT
0 views0 copies

Description

This skill generates all the visual assets a web project needs: favicons (ICO, PNG, SVG), Apple touch icons, Android/Chrome icons, Open Graph images, Twitter cards, and the associated HTML meta tags. Provide a single source image and it produces every size and format needed for full cross-browser and social media compatibility.

Instructions

  1. Input: Accept a source image (SVG preferred, PNG at minimum 1024x1024)
  2. Generate Sizes: Create all required icon sizes for each platform
  3. Meta Tags: Output the HTML <head> tags for proper linking
  4. Manifest: Update or create manifest.json / site.webmanifest
  5. Social: Generate Open Graph and Twitter Card images with text overlay

Rules

  • Source image should be square for icons (non-square images will be center-cropped)
  • Always generate both ICO (legacy) and PNG (modern) favicons
  • Include SVG favicon when source is SVG (best quality at any size)
  • Open Graph images must be exactly 1200x630 pixels
  • Twitter Card images must be exactly 1200x600 pixels (summary_large_image)
  • Apple touch icons must NOT have transparency (add white/colored background)
  • Always generate a site.webmanifest with proper icon references
  • Use progressive JPEG for OG images, PNG for icons
  • Optimize all output files for smallest file size

Required Asset Sizes

Favicons

FileSizeFormatPurpose
favicon.ico16x16, 32x32, 48x48ICO (multi-size)Legacy browsers
favicon-16x16.png16x16PNGModern browsers
favicon-32x32.png32x32PNGModern browsers
favicon.svgscalableSVGBest quality (if source is SVG)

Apple Touch Icons

FileSizeFormatPurpose
apple-touch-icon.png180x180PNG (no transparency)iOS home screen
apple-touch-icon-152x152.png152x152PNGiPad
apple-touch-icon-120x120.png120x120PNGiPhone

Android/Chrome

FileSizeFormatPurpose
android-chrome-192x192.png192x192PNGAndroid home screen
android-chrome-512x512.png512x512PNGAndroid splash screen
maskable-icon-512x512.png512x512PNG (safe zone)PWA maskable icon

Social Media

FileSizeFormatPurpose
og-image.jpg1200x630JPEGFacebook, LinkedIn
twitter-card.jpg1200x600JPEGTwitter/X

HTML Meta Tags

<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Manifest -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

<!-- Open Graph -->
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/twitter-card.jpg">

Generation Script (sharp/Node.js)

const sharp = require('sharp');
const path = require('path');

const SIZES = {
  'favicon-16x16.png': 16,
  'favicon-32x32.png': 32,
  'apple-touch-icon.png': 180,
  'android-chrome-192x192.png': 192,
  'android-chrome-512x512.png': 512,
};

async function generateIcons(sourcePath, outputDir) {
  for (const [filename, size] of Object.entries(SIZES)) {
    await sharp(sourcePath)
      .resize(size, size, { fit: 'cover', background: '#ffffff' })
      .flatten({ background: '#ffffff' }) // Remove transparency for Apple
      .png({ quality: 90 })
      .toFile(path.join(outputDir, filename));
    console.log(`Generated: ${filename}`);
  }
}

Examples

"Generate all favicon sizes from my logo.svg"
"Create Open Graph images for my site with the title 'My App'"
"Update the HTML meta tags for proper social media previews"
"Generate a PWA manifest with icons from this source image"
Community

Reviews

Write a review

No reviews yet. Be the first to review this template!

Similar Templates

/>

Full-Stack Code Reviewer

Comprehensive code review skill that checks for security vulnerabilities, performance issues, accessibility, and best practices across frontend and backend code.

Skill
20
View →
/>

Test Suite Generator

Generates comprehensive test suites with unit tests, integration tests, and edge cases. Supports Jest, Vitest, Pytest, and Go testing.

Skill
00
View →
/>

Pro Architecture Workspace

Battle-tested skill for architectural, decision, making, framework. Includes structured workflows, validation checks, and reusable patterns for development.

Skill
110
View →