From dev-team-kit-fv
Generates favicons (multi-size), PWA icons, Open Graph images for social sharing, apple-touch-icon, and HTML meta tags from logo or text. Use before deploying sites, landing pages, or PWAs.
npx claudepluginhub felvieira/claude-skills-fvThis skill is limited to using the following tools:
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.
Generates favicons, PWA app icons, and Open Graph social images for Facebook/Twitter/WhatsApp/LinkedIn from logos or text. Includes image resizing, text-to-image, and HTML meta tags.
Guides implementation, optimization, and auditing of favicons and app icons for browsers, PWAs, mobile screens, and Google Search results, including sizes, formats, and SERP guidelines.
Generates code-based visual assets: SVG icons, OG image HTML templates, social banners, and icon sets. Outputs files with light/dark variants and usage instructions.
Share bugs, ideas, or general feedback.
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).
Esta skill segue GLOBAL.md, policies/execution.md, policies/tool-safety.md, policies/writing-clarity.md.
https://meusite.compublic/): onde gerar os arquivospublic/
├── 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)
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">
Detalhes nas sub-secoes a seguir.
| 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:
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.
# 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
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');
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.
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"
}
]
}
?v=2og-image-v2.pngChecklist:
# 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
Stock photo sem branding = link parece spam. Sempre incluir logo + nome.
Resize de logo complexo para 16x16 vira borrao. Criar versao simplificada do logo (so simbolo, sem texto).
iOS aplica fundo branco automatico atras de transparencia, gerando halo. Sempre fundo solido em apple-touch-icon.
PWA sem maskable: adaptive icon do Android fica com borda branca. Sempre incluir purpose: maskable.
OG image precisa URL absoluta (https://...), nao relativa (/og-image.png). Sem URL absoluta, preview nao funciona em apps externos.
Pagina de produto X com OG generico do site = baixa CTR. Por pagina importante, gerar OG dedicada.
manifest.webmanifest valido (passar em https://manifest-validator.appspot.com/)meta-tags.html snippet pronto para colarApos geracao, entregar:
public/)<head>meta-tags.html no template HTML/Next layoutdocs/repo-audit/assets.md