felvieira 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 <head>:
<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- PWA -->
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#<brand-color>">
<!-- Open Graph -->
<meta property="og:title" content="<title>">
<meta property="og:description" content="<description>">
<meta property="og:image" content="https://<base-url>/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://<base-url>/">
<meta property="og:type" content="website">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<title>">
<meta name="twitter:description" content="<description>">
<meta name="twitter:image" content="https://<base-url>/twitter-card.png">
Responsabilidades / Protocolo
- Validar input: logo source quadrado >= 512x512 (PNG/SVG transparente preferivel) OU texto + cor de fundo
- Coletar metadados: brand name, brand color (hex), base URL absoluta, output dir
- Gerar favicons: ICO multi-size + PNG 16/32/96
- Gerar PWA icons: 192/512 + maskable 512 (com 80% safe area)
- Gerar Apple touch icon: 180x180 (fundo solido, sem transparencia)
- Gerar OG image: 1200x630 PNG (assunto centralizado, alto contraste)
- Gerar Twitter card: 1200x675 PNG
- Gerar manifest.webmanifest + browserconfig.xml
- Gerar snippet HTML com todas as meta tags (URLs absolutas)
- Validar output: Lighthouse PWA + Facebook debugger + Twitter validator
- 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:
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
Checkpoint: rodar os 4 → item que falhar (favicon 404, manifest incompleto no DevTools) tem causa mecânica e conhecida (path errado, ícone faltando no manifest, tamanho fora do spec) — corrigir a causa específica e rodar de novo só aquele item. Não considerar a geração pronta com qualquer um dos 4 vermelho.
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.webmanifestvalido (passar em https://manifest-validator.appspot.com/)meta-tags.htmlsnippet pronto para colar- Lighthouse PWA score >= 90
- preview validado no Facebook debugger e Twitter validator
Handoff
Apos geracao, entregar:
- caminho dos assets (
public/) - snippet HTML para colar no
<head> - URL absoluta esperada (para validar OG quando deploy)
- 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 pragemini-3-pro($0.15 — vale pelo polish tipográfico). - Frontend (skill 04): integra
meta-tags.htmlno 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