Back to Cookbook

Favicon Factory

One SVG in, every favicon format out

Every new site needs a favicon set, app icons, and share images. Hand one source file to your Claw and get the package back, along with the HTML snippet ready to paste into your project.

House RecipeWork1 min

PROMPT

Create a skill called "Favicon Factory". When I give you a source logo or icon file (SVG, PNG, or another common image format), generate a complete favicon and app-icon package: favicon.ico (multi-size: 16, 32, 48), apple-touch-icon (180x180), Android Chrome icons (192x192, 512x512), a maskable PWA icon with proper safe-zone padding, Open Graph image (1200x630), Twitter Card image (1200x600), Safari pinned tab SVG (monochrome), and optional legacy Microsoft tile assets when needed. Also generate the site.webmanifest file and a complete HTML snippet for the head tag that references all icons correctly. Let me specify a background color for padded variants. Put all files in an organized directory structure ready to copy into a project.

How It Works

Give your Claw a single high-resolution logo or icon file (SVG preferred,

PNG also works), and it generates the favicon and app-icon variants you

actually need for a modern site. It can also include optional legacy files

for broader platform support.

What You Get

  • favicon.ico (16x16, 32x32, 48x48 multi-size)
  • apple-touch-icon.png (180x180)
  • Android Chrome icons (192x192, 512x512)
  • Maskable icon for PWAs (with safe-zone padding)
  • Open Graph image (1200x630)
  • Twitter Card image (1200x600)
  • Safari pinned tab SVG (monochrome)
  • Optional legacy files such as browserconfig.xml and Microsoft tile icons
  • site.webmanifest
  • Complete HTML snippet for your head tag

Setup Steps

  1. Drop in your source logo file (SVG preferred, PNG at 1024x1024+ also works)
  2. Optionally specify a background color for padded variants
  3. Your Claw generates the variants and the HTML snippet
  4. Copy the files to your project's public directory and paste the snippet

Tips

  • SVG source files produce the sharpest results at all sizes
  • The maskable icon adds safe-zone padding automatically so your icon is not clipped on Android
  • Re-run it whenever the logo changes so the whole set stays in sync
  • Keep Open Graph and Twitter assets visually simple so link previews stay legible at small sizes
Tags:#web-design#assets#favicon#automation