O que a ferramenta faz
O gerador de favicon cria ícones PNG, favicon.ico, site.webmanifest e um snippet HTML para vincular os recursos. Você pode escolher fundo, preenchimento e modo de corte.
Como usar
- Envie um logotipo quadrado ou quase quadrado.
- Defina fundo, preenchimento, modo de corte e nome do app.
- Baixe o ZIP e coloque os arquivos na raiz do seu site.
O que vem no pacote favicon
O ZIP contém favicon.ico para navegadores clássicos, ícones PNG de 16, 32, 48, 180, 192 e 512 pixels, um arquivo site.webmanifest e um trecho HTML para vincular os arquivos. O conjunto cobre abas do navegador, favoritos, ícone do iOS e ícones Android/PWA.
O favicon.ico é criado com vários tamanhos PNG para que navegadores antigos e modernos escolham a versão adequada. O PNG 180x180 é usado como apple-touch-icon, enquanto 192 e 512 pixels entram no manifest para ícones instaláveis.
Preparando o logo de origem
Um logo quadrado ou quase quadrado com espaço ao redor do símbolo funciona melhor. Se a marca for muito larga ou alta, use fundo e padding para que ela não encoste nas bordas dos ícones pequenos.
Fundo transparente é útil para marcas simples, mas algumas plataformas podem renderizá-lo de forma diferente. Para uma aparência estável, escolha uma cor de fundo e confira as prévias de 192, 48 e 32 pixels antes de baixar.
Instalando os arquivos no site
Na maioria dos projetos, os arquivos do ZIP vão para a raiz do site junto de /favicon.ico, e o trecho HTML entra no head do template. Se o site usa um framework, coloque os arquivos na pasta pública copiada sem renomear.
Depois de trocar o favicon, navegadores e buscadores podem continuar mostrando o ícone antigo do cache. Teste em uma janela privada, atualize o cache e aguarde nova indexação se o ícone já estava publicado.