Configuração moderna de favicon e ícones PWA
Gere favicon, Apple touch icon e tamanhos PNG PWA localmente e conecte tags HTML link e ícones do manifest sem enviar o logo.
Publicar um site ou PWA ainda exige um conjunto de ícones que navegadores e telas iniciais reconhecem. Você pode gerar esses PNG localmente e copiar snippets HTML / manifest que os referenciam.
O que você normalmente precisa
| Ativo | Tamanho comum | Nome do arquivo |
|---|---|---|
| Favicon | 16 / 32 / 48 | favicon-16x16.png, etc. |
| Apple touch | 180×180 | apple-touch-icon.png |
| PWA | 192 / 512 | icon-192.png, icon-512.png |
Navegadores modernos aceitam favicons PNG via <link rel="icon" type="image/png" …>. Um .ico legado único é opcional quando links PNG estão presentes.
Fluxo local
- Comece com um logo PNG quadrado ou em alta resolução.
- Abra o Gerador de favicon.
- Escolha Cover para marcas full-bleed ou Contain para logos largos com padding.
- Ative cor de fundo apenas para preencher padding ou achatar transparência.
- Clique em Gerar ícones e baixe o zip (inclui
manifest.webmanifest). - Copie o snippet HTML link para
<head>e coleiconsno manifest PWA.
Cover vs contain
- Cover recorta para quadrado — bom quando a marca deve preencher o tile.
- Contain mantém o logo inteiro com padding — bom para wordmarks largos.
Não é para gráficos de loja de apps
Capturas da App Store e Google Play usam presets diferentes. Use o Redimensionador para lojas de apps para assets de loja; o gerador de favicon é para site / PWA.
Ferramentas relacionadas
- Gerador de imagens responsivas — imagens multi-largura e snippets
srcset. - Recortador de imagem — ajuste o enquadramento antes de exportar ícones.