Web Asset Generator: фабрика фавиконок и Open Graph картинок

10.03.2026обновлено 10 мар

Когда нужно создать все веб-ассеты для сайта (фавиконки, PWA иконки, Open Graph картинки), Claude Code превращается в дизайн-студию благодаря Web Asset Generator от Alon Weissfeld.

Что умеет генератор

Web Asset Generator — комплексный скилл для создания профессиональных веб-ассетов из логотипов, текста или даже эмодзи. Результат: готовые файлы + HTML теги для интеграции.

Типы ассетов:

  • Favicons** — иконки для браузера (16x16, 32x32, 96x96, favicon.ico)
  • PWA App Icons** — иконки для мобильных (180x180, 192x192, 512x512)
  • Social Media Images** — Open Graph для Facebook, Twitter, WhatsApp, LinkedIn
  • Everything** — полный комплект всех ассетов

Источники материала:

  • Logo image (PNG, JPG, SVG)
  • Emoji character (с AI-саджестами!)
  • Text/slogan (генерация из текста)
  • Logo + text combo

Interactive Questions: умный UI

Скилл использует AskUserQuestion вместо обычных вопросов — пользователь видит clickable chips instead typing:

Asset Type Selection:

What type of web assets do you need?                    [Asset type]
○ Favicons only - Browser tab icons (16x16, 32x32, 96x96) and favicon.ico
○ App icons only - PWA icons for iOS/Android (180x180, 192x192, 512x512)
○ Social images only - Open Graph images for Facebook, Twitter, WhatsApp, LinkedIn
● Everything - Complete package: favicons + app icons + social images

Source Material:

What source material will you provide?                  [Source]
● Logo image - I have or will upload a logo/image file
○ Emoji - Generate favicon from an emoji character  
○ Text/slogan - Create images from text only
○ Logo + text - Combine logo with text overlay (for social images)

Color Preferences (для text-based):

What colors should we use for your social images?       [Colors]
○ I'll provide colors - Let me specify exact hex codes for brand colors
● Default theme - Use default purple background (#4F46E5) with white text
○ Extract from logo - Auto-detect brand colors from uploaded logo
○ Custom gradient - Let me choose gradient colors

Workflow генерации

Логика детекции режима:

# Mode A: Create from scratch
"I need web assets"

# Mode B: Logo-based generation  
"Create favicons from this logo"

# Mode C: Text-based generation
"Generate Open Graph images with 'Transform Your Business'"

# Mode D: Emoji-based (NEW!)
"Make a favicon from an emoji"

Генерация из логотипа

Команда:

python scripts/generate_favicons.py <source_image> <output_dir> [icon_type]

Аргументы:

  • source_image — путь к логотипу
  • output_dir — папка для сохранения
  • icon_type — 'favicon', 'app', 'all' (default: 'all')

Пример:

python scripts/generate_favicons.py /mnt/user-data/uploads/logo.png /home/claude/output all

Результат:

output/
├── favicon-16x16.png
├── favicon-32x32.png  
├── favicon-96x96.png
├── favicon.ico (multi-resolution)
├── apple-touch-icon.png (180x180)
├── android-chrome-192x192.png
└── android-chrome-512x512.png

HTML теги (автогенерация):

<!-- Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

NEW FEATURE: Генерация из эмодзи

Шаг 1: AI-саджесты

python scripts/generate_favicons.py --suggest "coffee shop" /home/claude/output all

Результат:

1. ☕  Coffee               - coffee, cafe, beverage
2. 🌐  Globe                - web, website, global  
3. 🏪  Store                - shop, store, retail
4. 🛒  Cart                 - shopping, cart, ecommerce

Шаг 2: Генерация из выбранного эмодзи

python scripts/generate_favicons.py --emoji "☕" <output_dir> [icon_type] [--emoji-bg COLOR]

Примеры:

# Базовая генерация (прозрачный фон для favicon)
python scripts/generate_favicons.py --emoji "🚀" /home/claude/output favicon

# С кастомным фоном для app icons
python scripts/generate_favicons.py --emoji "☕" --emoji-bg "#F5DEB3" /home/claude/output all

# Полный set с белым фоном  
python scripts/generate_favicons.py --emoji "💻" --emoji-bg "white" /home/claude/output all

Требует: pip install pilmoji для поддержки эмодзи.

Open Graph изображения

Из логотипа:

python scripts/generate_og_images.py <output_dir> --image <source_image>

Из текста:

python scripts/generate_og_images.py <output_dir> --text "Your text here" [options]

Опции:

  • --logo <path> — добавить лого к тексту
  • --bg-color <color> — цвет фона (hex or name, default: '#4F46E5')
  • --text-color <color> — цвет текста (default: 'white')

Пример:

python scripts/generate_og_images.py /home/claude/output \
  --text "Transform Your Business with AI" \
  --logo /mnt/user-data/uploads/logo.png \
  --bg-color "#4F46E5"

Результат:

output/
├── og-image.png (1200x630 - Facebook, WhatsApp, LinkedIn)
├── twitter-image.png (1200x675 - Twitter)  
└── og-square.png (1200x1200 - Square variant)

HTML теги:

<!-- Open Graph / Facebook -->
<meta property="og:image" content="/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Your description here">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="/twitter-image.png">
<meta name="twitter:image:alt" content="Your description here">

Автоматическая интеграция в код

После генерации скилл предлагает автоматически добавить HTML теги в кодовую базу:

Framework Detection:

  • Next.js:** Ищет next.config.js, обновляет app/layout.tsx
  • Astro:** Ищет astro.config.mjs, обновляет layout files
  • SvelteKit:** Ищет svelte.config.js, обновляет src/app.html
  • Vue/Nuxt:** Ищет nuxt.config.js, обновляет app.vue
  • Plain HTML:** Ищет index.html files

Next.js App Router интеграция:

export const metadata = {
  icons: {
    icon: [
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
    ],
    apple: [
      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
  openGraph: {
    images: ['/og-image.png'],
  },
  twitter: {
    card: 'summary_large_image',
    images: ['/twitter-image.png'],
  },
}

Astro интеграция:

<head>
  <meta charset="UTF-8">
  <!-- Favicons -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>

Validation & Quality Checks

Скилл включает автоматическую валидацию с флагом --validate:

Для Open Graph изображений:

  • File Size:** Facebook/LinkedIn <8MB, Twitter <5MB
  • Dimensions:** Проверка соответствия platform requirements
  • Format:** PNG, JPG поддержка на всех платформах
  • Accessibility:** WCAG contrast ratio для text-based images

Для фавиконок:

  • File Size:** Warning если >100KB (favicons), >500KB (app icons)
  • Dimensions:** Проверка точных размеров (16x16, 32x32, etc.)
  • Format:** PNG и ICO validation

Пример validation output:

======================================================================
Running validation checks...
======================================================================

og-image.png:

Facebook Validation:
======================================================================
  ✓ File size 0.3MB is within Facebook limits
  ✓ Dimensions 1200x630 match Facebook recommended size
  ✓ Format PNG is supported by Facebook

Accessibility Checks:
======================================================================
  ✓ Contrast ratio 8.6:1 meets WCAG AAA standards (4.5:1 required)

======================================================================
Summary: 9/9 checks passed
✓ All validations passed!

После генерации скилл предлагает testing links:

Testing URLs:

  • Facebook Sharing Debugger:** https://developers.facebook.com/tools/debug/
  • Twitter Card Validator:** https://cards-dev.twitter.com/validator
  • LinkedIn Post Inspector:** https://www.linkedin.com/post-inspector/
  • OpenGraph.xyz:** https://www.opengraph.xyz/

Interactive choice через AskUserQuestion:

Would you like to test your meta tags now?              [Testing]
○ Facebook Debugger - Test Open Graph tags on Facebook
○ Twitter Card Validator - Test Twitter card appearance  
○ LinkedIn Post Inspector - Test LinkedIn sharing preview
● All testing tools - Get links to all validators
○ No, skip testing - I'll test later myself

Advanced Features

Text Auto-Sizing:

  • Short text (≤20 chars): 144px font — Large and impactful
  • Medium text (21-40 chars): 120px font — Standard readable
  • Long text (41-60 chars): 102px font — Reduced for fit
  • Very long text (>60 chars): 84px font — Minimal size

Smart Color Choices:

  • Extract brand colors from uploaded logo
  • Ensure WCAG 2.0 contrast compliance (4.5:1 minimum)
  • Support for custom gradients
  • Default theme с professional palette

Platform-Specific Optimizations:

  • Facebook/LinkedIn: 1200x630 (1.91:1 ratio)
  • Twitter: 1200x675 (16:9 ratio)
  • Square variant: 1200x1200 (универсальный)
  • iOS app icons: rounded corners автоматически

Complete Workflow Example

User request: "Create complete web assets for my AI startup"

Step 1: Asset type selection (Everything)

Step 2: Source material (Logo + text)

Step 3: Generate all assets

# Favicons from logo
python scripts/generate_favicons.py logo.png output/ all --validate

# Social images with logo + tagline
python scripts/generate_og_images.py output/ \
  --text "Transform Your Business with AI" \
  --logo logo.png \
  --validate

Step 4: Framework detection (Next.js detected)

Step 5: Code integration (automatic metadata update)

Step 6: Testing links (all validators)

Final deliverable:

  • 7 icon files (all sizes)
  • 3 social media images
  • Complete HTML integration
  • Validation report (all passed)
  • Testing links ready

Dependencies & Setup

# Основные зависимости
pip install Pillow --break-system-packages

# Для emoji features (опционально)  
pip install pilmoji emoji --break-system-packages

Заключение

Web Asset Generator превращает создание веб-ассетов из routine chore в automated workflow:

  • Zero design skills required** — AI генерирует всё
  • Complete coverage** — от favicon до Open Graph
  • Smart integrations** — автоматический код для всех фреймворков
  • Quality assurance** — validation и testing out of the box
  • Emoji support** — даже эмодзи превращаются в professional assets

GitHub: https://github.com/alonw0/web-asset-generator

Claude Code с этим скиллом заменяет целую дизайн-студию: от идеи до production-ready ассетов за минуты.

Результат: полный комплект веб-ассетов + готовый код для интеграции + validation report + testing links.

*Веб-ассеты: когда каждый пиксель на своём месте.* 🧪

TG

> Пока нет комментариев