Web Asset Generator

Web Asset Generator — Favicons, PWA Icons, OG Images

Gap operacional comum: time termina deploy e percebe que faltam favicons, PWA icons, e a OG image quando alguem compartilha o link no WhatsApp aparece em branco. Esta skill resolve em 1 comando.

Complementa skill 17 (Image Generator — fal.ai) que gera imagens originais; esta skill deriva assets de uma imagem ja existente (logo) ou de texto (slogan).

Governanca Global

Esta skill segue GLOBAL.md, policies/execution.md, policies/tool-safety.md, policies/writing-clarity.md.

Quando Usar

• antes do primeiro deploy de site
• depois de mudanca de identidade visual (rebrand)
• ao adicionar suporte a PWA
• ao detectar (via Lighthouse) ausencia de manifest, favicon, OG tags
• preparando landing page para anuncio/lancamento
• migrando para HTTPS/dominio novo (URLs nas meta tags mudam)

Quando Nao Usar

• gerar imagem original (use skill 17 — Image Generator com fal.ai)
• editar imagem existente (use ferramenta especializada)
• design system inteiro (use skill 02 — UI/UX Designer)
• video/GIF (use skill 27 — Video Integration)

Entradas Esperadas

• logo source (preferivel): PNG/SVG quadrado, fundo transparente, >= 512x512
• OU brand text (fallback): nome curto + cor hex de fundo
• brand name (sempre): aparece em manifest e meta tags
• brand color (sempre): theme-color, OG bg
• base URL (para meta tags): https://meusite.com
• output dir (default public/): onde gerar os arquivos

Saidas Esperadas

Diretorio de assets

public/
├── favicon.ico              (16, 32, 48 multi-size .ico)
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-96x96.png
├── apple-touch-icon.png     (180x180)
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── icon-maskable-512.png    (PWA maskable, com safe area)
├── og-image.png             (1200x630 — Facebook/LinkedIn)
├── twitter-card.png         (1200x675 — Twitter large card)
├── manifest.webmanifest
└── browserconfig.xml        (Windows tile)

Snippet HTML pronto

public/meta-tags.html — copiar e colar no ``:

">

">
">
/og-image.png">

/">

">
">
/twitter-card.png">

Responsabilidades / Protocolo

1. Validar input: logo source quadrado >= 512x512 (PNG/SVG transparente preferivel) OU texto + cor de fundo
2. Coletar metadados: brand name, brand color (hex), base URL absoluta, output dir
3. Gerar favicons: ICO multi-size + PNG 16/32/96
4. Gerar PWA icons: 192/512 + maskable 512 (com 80% safe area)
5. Gerar Apple touch icon: 180x180 (fundo solido, sem transparencia)
6. Gerar OG image: 1200x630 PNG (assunto centralizado, alto contraste)
7. Gerar Twitter card: 1200x675 PNG
8. Gerar manifest.webmanifest + browserconfig.xml
9. Gerar snippet HTML com todas as meta tags (URLs absolutas)
10. Validar output: Lighthouse PWA + Facebook debugger + Twitter validator
11. Handoff para skill 04 (Frontend) integrar no template HTML

Detalhes nas sub-secoes a seguir.

Especificacoes Por Plataforma

| Asset | Tamanho | Formato | Para | |---|---|---|---| | favicon.ico | 16+32+48 multi | ICO | browser tab | | favicon-16/32/96 | exatos | PNG | browser tab fallback | | apple-touch-icon | 180x180 | PNG | iOS home screen | | android-chrome-192 | 192x192 | PNG | Android | | android-chrome-512 | 512x512 | PNG | Android splash | | icon-maskable-512 | 512x512 | PNG (com 80% safe area centralizada) | PWA adaptive icon | | og-image | 1200x630 | PNG ou JPG | Facebook, LinkedIn, WhatsApp | | twitter-card | 1200x675 | PNG | Twitter Large Card | | ms-tile | 144x144 | PNG | Windows pinned site |

Regra critica de OG image:

• texto deve caber em safe area de 1080x540 (margem 60px) — alguns clientes croppam
• contraste minimo 4.5:1 para texto
• evitar texto > 60 chars (corta no preview)

Ferramentas

Opcao A: realfavicongenerator (recomendada)

npx @realfavicongenerator/cli generate \
  --master-picture path/to/logo.png \
  --output public/ \
  --background "#0f766e" \
  --theme-color "#0f766e" \
  --app-name "MeuApp"

Cobre favicon completo + PWA + Apple + Windows. Output inclui HTML snippet.

Opcao B: ImageMagick (mais controle, manual)

# favicon.ico multi-size
magick logo.png -define icon:auto-resize=16,32,48 favicon.ico

# PNG sizes
for size in 16 32 96 192 512; do
  magick logo.png -resize ${size}x${size} favicon-${size}x${size}.png
done

# Apple
magick logo.png -resize 180x180 apple-touch-icon.png

# OG (1200x630, com padding centralizado)
magick logo.png -resize 600x600 -background "#0f766e" \
  -gravity center -extent 1200x630 og-image.png

Opcao C: Sharp (Node, programatico)

import sharp from 'sharp';

const sizes = [16, 32, 96, 192, 512];
for (const size of sizes) {
  await sharp('logo.png')
    .resize(size, size)
    .toFile(`public/favicon-${size}x${size}.png`);
}

// OG image
await sharp('logo.png')
  .resize(600, 600)
  .extend({
    top: 15, bottom: 15, left: 300, right: 300,
    background: { r: 15, g: 118, b: 110, alpha: 1 }
  })
  .toFile('public/og-image.png');

Opcao D: Text-to-image (sem logo)

Se nao houver logo, gerar OG/favicon a partir de texto + cor:

magick -size 1200x630 xc:"#0f766e" \
  -font Arial-Bold -pointsize 96 -fill white -gravity center \
  -annotate 0 "MeuApp" og-image.png

Para favicon com inicial: gerar 512x512 com letra centralizada, depois resize.

Manifest PWA

Template minimo:

{
  "name": "MeuApp",
  "short_name": "MeuApp",
  "description": "Descricao curta",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f766e",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Heuristicas

Logo source ideal

• SVG > PNG transparente > PNG com fundo
• quadrado (recortar antes se nao for)
• detalhe minimo legivel a 16x16 (logos com texto fino quebram)
• contrastar com fundo branco E preto (PWA usa ambos)

OG image que funciona em todo lugar

• 1200x630 (proporcao 1.91:1)
• assunto principal no centro 1080x540
• texto grande (96-120pt para titulo)
• contraste alto
• sem informacao critica nas bordas

Maskable icon (PWA)

• safe area circular de 80% (raio 410px em 512px)
• fundo solido (sem transparencia)
• ferramenta visual: https://maskable.app/editor

Cache busting

• ao trocar assets, mudar query string nas meta tags: ?v=2
• ou renomear: og-image-v2.png
• caches de Facebook/Twitter levam dias para invalidar — usar debugger oficial:
• Facebook: https://developers.facebook.com/tools/debug/
• Twitter: https://cards-dev.twitter.com/validator

Validacao Pos-Geracao

Checklist:

# 1. Lighthouse (Best Practices + PWA)
npx lighthouse https://meusite.com --view

# 2. Favicon checker
curl -I https://meusite.com/favicon.ico  # deve retornar 200

# 3. OG preview
# Facebook debugger (URL acima)
# OpenGraph.xyz (rapido visual): https://www.opengraph.xyz/

# 4. PWA installability
# Chrome DevTools > Application > Manifest

Anti-Padroes

"OG image gerica de stock"

Stock photo sem branding = link parece spam. Sempre incluir logo + nome.

"Favicon de 16px borrado"

Resize de logo complexo para 16x16 vira borrao. Criar versao simplificada do logo (so simbolo, sem texto).

"Apple icon transparente"

iOS aplica fundo branco automatico atras de transparencia, gerando halo. Sempre fundo solido em apple-touch-icon.

"Manifest sem icons maskable"

PWA sem maskable: adaptive icon do Android fica com borda branca. Sempre incluir purpose: maskable.

"Esquecer de atualizar URL absoluta"

OG image precisa URL absoluta (https://...), nao relativa (/og-image.png). Sem URL absoluta, preview nao funciona em apps externos.

"Mesma OG image para todas as paginas"

Pagina de produto X com OG generico do site = baixa CTR. Por pagina importante, gerar OG dedicada.

Evidencia de Conclusao

• todos os assets do quadro "Especificacoes Por Plataforma" gerados
• manifest.webmanifest valido (passar em https://manifest-validator.appspot.com/)
• meta-tags.html snippet pronto para colar
• Lighthouse PWA score >= 90
• preview validado no Facebook debugger e Twitter validator

Handoff

Apos geracao, entregar:

1. caminho dos assets (public/)
2. snippet HTML para colar no ``
3. URL absoluta esperada (para validar OG quando deploy)
4. checklist de validacao pos-deploy

Integracao com Pipeline

• Image Generator (skill 17): handoff direto — apos skill 17 gerar logo/mascote/asset criativo principal, esta skill (36) deriva todos os formatos web operacionais (favicon multi-tamanho, apple-touch-icon, PWA icons incluindo maskable, Open Graph 1200x630, Twitter card 1200x675, manifest, browserconfig). Skill 17 cria o original criativo; skill 36 deriva o pacote operacional. Se logo nao existe, skill 17 cria primeiro; se ja existe, skill 36 roda sozinha. Quando gerar logo, skill 17 usa default grok-imagine ($0.020). Para OG card com texto, override pra gemini-3-pro ($0.15 — vale pelo polish tipográfico).
• Frontend (skill 04): integra meta-tags.html no template HTML/Next layout
• SEO (skill 14): valida que tags estao corretas e completas para indexacao
• Asset Librarian (skill 19): cataloga assets gerados em docs/repo-audit/assets.md
• Deploy (skill 07): valida que assets estao no bundle final + URLs absolutas configuradas
• Accessibility (skill 22): valida contraste de OG image

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: felvieira
• Source: felvieira/claude-skills-fv
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.