Checklist de Favicon e ativos PWA 2025 — Manifesto, ícones e sinais de SEO

Publicado: 18 de set. de 2025 · Tempo de leitura: 3 min · Por Unified Image Tools Editorial

Ainda vemos muitos sites com falhas em manifestos ou ícones. Quatro problemas comuns: tamanhos insuficientes, referência incorreta de manifestos por localidade, inconsistência de theme-color e mistura de rotas de PWA e favicon. Use a ordem abaixo para reduzir esquecimentos.

1) Conjunto mínimo de ícones

• 16px/32px: abas/favoritos (ICO aceitável)
• 192/512: instalação PWA (PNG recomendado)
• Para Safari pinned tab, forneça um SVG monocromático
• Valide transparência/margens em temas claro/escuro em dispositivos reais

2) Manifestos localizados por localidade

• Em cada localidade (ex.: /pt-BR/manifest.webmanifest) traduza name/short_name/description
• Garanta que start_url e scope apontem para a raiz da localidade (em /pt-BR, não /en)
• No layout HTML, referencie <link rel="manifest" href="/pt-BR/manifest.webmanifest">

3) Cores de tema e consistência

• Alinhe theme_color do manifesto com <meta name="theme-color"> no HTML
• Revise legibilidade em claro/escuro (ícone não deve sumir no fundo)
• Forneça apple-touch-icon de 180px mínimo; valide o arredondamento

4) Sinais de SEO e cabeamento HTTP

• Evite caminhos de ícone 404 (paths divergem entre Dev/Prod)
• Não bloqueie ícones/manifestos em robots.txt
• Content-Type deve ser application/manifest+json

Automatize com ferramentas

• Geração em massa de ícones: Gerador de favicon
  • Gera 16/32/192/512 a partir do logo; pré-visualize margens
• Montagem de manifestos por localidade: Pacote de Favicon + Manifest
  • Preenche name/short_name e valida start_url/scope

Armadilhas operacionais

• Apenas o manifest.webmanifest da raiz é referenciado → localização não efetiva
• Em SPAs, start_url pode retornar 200 mas ficar fora do escopo do Service Worker
• Origens diferentes (staging/prod): OGP relativo → 404 (confira também o sitemap)

5) Fluxo de verificação pré‑produção

1. Revise artefatos (/icons/ e manifest.webmanifest por localidade)
2. Rode Lighthouse para PWA/Best Practices (detecta lacunas/referências cedo)
3. Em iOS/Safari, teste “Adicionar à Tela de Início” (bordas/margens do apple-touch-icon)
4. Em Android/Chrome, verifique instalação (cor do splash, nome)
5. Valide 404/Content‑Type no Network do DevTools

6) Service Worker e cache

• Em produção é ativo; no desenvolvimento prefira desativado/não registrado
• Padronize a política de skipWaiting (manual vs. prompt de atualização)
• Documente limpeza de caches antigos (convenções/versões)

Nota: Neste site, em desenvolvimento, o SW antigo é desregistrado automaticamente. Em operação, “prompt de atualização → consentimento do usuário” é mais seguro.

7) Monitoramento e regressão

• Em CI, verifique existência/hash de artefatos (faltas/referências antigas)
• Compare diferenças de campos do manifesto por localidade (name/short_name/description/start_url/scope)
• Monitore bloqueios/omissões via robots/sitemap (Search Console/Lighthouse)

8) FAQ

• P. Precisamos de tamanhos além de 16/32/192/512?
  • R. Não é obrigatório, mas Windows/Android antigos usam 48/96/144. Comece pelo mínimo e expanda conforme o produto.
• P. E favicon SVG?
  • R. Suporte crescente; mantenha PNG/ICO para compatibilidade. SVG monocromático separado para Safari pinned tab.
• P. Localização do manifesto segue a de textos de UI?
  • R. Sim, mas limites de comprimento de name/short_name variam por plataforma; defina política de abreviação.

9) Workflow prático (E2E)

1. Defina diretrizes do logo (margens, tamanho mínimo, temas)
2. Gere 16/32/192/512 com Gerador de favicon
3. Monte manifestos com Pacote de Favicon + Manifest
4. No layout, referencie <link rel="icon"> e <link rel="manifest"> por localidade
5. Revise legibilidade em claro/escuro; adicione contorno se necessário
6. Em CI, verifique existência/Content‑Type/links; meça PWA no Lighthouse
7. Após o deploy, monitore com Search Console e logs

Torne essa ordem um template e anexe ao PR para manter a qualidade sem dependência de indivíduos.