Gerador de favicon
Não publique com o ícone padrão da aba. Envie uma imagem e exporte o pacote de favicon esperado por navegadores, iOS, Android e PWAs.
Enviar uma imagem
PNG, JPG e SVG são aceitos. Uma origem de 512x512 ou maior funciona melhor.
Prévia ao vivo
Snippet HTML
<!-- Add inside <head> --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Boas práticas de favicon
Por que vários tamanhos importam
Navegadores, favoritos, abas fixadas, prompts de instalação e atalhos mobile solicitam tamanhos diferentes. Um conjunto completo mantém o ícone nítido em vez de deixar plataformas ampliarem um arquivo pequeno.
PNG vs ICO
Navegadores modernos lidam bem com ícones PNG. ICO ainda ajuda em compatibilidade legada, enquanto PNG normalmente oferece transparência mais limpa e manuseio de assets mais simples.
Desenhe para tamanhos mínimos
Um favicon costuma aparecer em 16x16. Formas simples, contraste forte e menos detalhe geralmente sobrevivem melhor do que um logo completo comprimido em uma aba.
Guia de ícones por plataforma
Navegador desktop
Usado em abas, favoritos e listas de histórico do navegador.
iOS / iPhone
Usado quando o site é adicionado à tela inicial. Arte opaca costuma funcionar melhor.
Android Chrome
Usado junto com um web manifest para prompts de instalação, telas de abertura e alternador de tarefas.
Guia rápido de instalação
Baixe e extraia
Use o botão de download para exportar um zip com assets PNG, arquivos de manifest e o snippet do head.
Envie para a raiz pública
Coloque os arquivos extraídos em um local publicamente acessível, como o diretório public do site.
Adicione o markup no head
Copie o snippet gerado para o head do documento e limpe o cache do navegador para verificar os novos ícones.
Perguntas frequentes
O que vem no arquivo zip?
O zip contém PNGs comuns de favicon para navegadores, ícones Apple touch, tamanhos para Android e um arquivo site.webmanifest.
O que é site.webmanifest?
É um manifest JSON que informa aos navegadores como o site deve se comportar quando instalado na tela inicial ou aberto como app.
Como uso esses ícones?
Envie os arquivos gerados para a raiz pública e inclua o markup de head gerado nas páginas que devem expor o favicon.
Por que meu favicon antigo ainda aparece?
Navegadores guardam favicons em cache de forma agressiva. Tente atualizar sem cache, limpar dados do site, trocar a URL do ícone ou testar em um perfil novo do navegador.
O favicon deve ser exatamente igual ao ícone do app?
Ele deve parecer relacionado, mas não precisa ser idêntico. Muitas marcas usam uma marca simplificada para favicon e um ícone mais rico para app instalado.