Sobre a ferramenta: Gerador de favicon
O favicon é o pequeno ícone do site que aparece na aba do navegador, nos favoritos, nos resultados de busca e na tela inicial do celular. Sem ele, a aba mostra um ícone vazio, o site parece inacabado e o Google exibe um globo genérico nos resultados.
Esta ferramenta cria, a partir de um logotipo ou de uma única letra ou emoji, o conjunto completo de favicons nos tamanhos que cada aparelho precisa. Tamanhos muito pequenos como 16 px são desenhados diretamente nesse tamanho, em vez de reduzir uma imagem grande, e ficam mais nítidos. Tudo acontece no navegador.
Como usar
- Escolha Letra ou emoji ou Imagem. Uma ou duas letras, ou um logotipo quadrado, funcionam melhor.
- Ajuste a cor de fundo (ou “Sem” para fundo transparente), os cantos arredondados e a margem interna. A prévia à direita (no celular, abaixo) mostra o tamanho real da aba.
- Toque em Baixar tudo (ZIP), descompacte e envie os arquivos para a pasta raiz do seu site.
- Copie o código HTML abaixo e cole dentro do
<head>de todas as páginas.
Arquivos dentro do ZIP
| Arquivo | Tamanho | Uso |
|---|---|---|
| favicon.ico | 16·32·48 | Padrão de todos os navegadores, resultados do Google |
| favicon-16x16.png | 16 | Aba do navegador |
| favicon-32x32.png | 32 | Abas em alta resolução, barra de tarefas |
| favicon-48x48.png | 48 | Atalhos do Windows, resultados de busca |
| apple-touch-icon.png | 180 | Tela inicial do iPhone e iPad |
| android-chrome-192x192.png | 192 | Tela inicial do Android |
| android-chrome-512x512.png | 512 | Tela de abertura de app instalado (PWA) |
| site.webmanifest | - | Ícones e nome para o Android |
O ícone da tela inicial do iPhone não aceita fundo transparente e fica preto; por isso, mesmo com o “Sem” fundo marcado, só o apple-touch-icon.png é salvo com fundo branco.
Favicon legível mesmo em tamanho pequeno
- Numa aba de 16 px, linhas finas e letras pequenas viram borrão. Um símbolo ou a primeira letra funciona melhor que o logotipo inteiro.
- Use bastante contraste entre fundo e letra. Um fundo colorido é mais seguro que transparente para aparecer também em abas no modo escuro.
- Se você trocou o favicon e ele não mudou, é o cache do navegador. Recarregue com Ctrl+Shift+R ou acrescente
?v=2ao nome do arquivo.
Perguntas frequentes
Só o arquivo ICO não basta?
Para navegadores de computador, o favicon.ico já basta, mas para adicionar o site à tela inicial do iPhone e do Android são necessários PNGs de 180, 192 e 512 px. Envie todos os arquivos do ZIP e adicione o código HTML para funcionar em qualquer aparelho.
O favicon não aparece nos resultados do Google.
O Google recomenda favicons em múltiplos de 48 px, e a atualização pode levar de alguns dias a algumas semanas. Confira também se o arquivo do favicon não está bloqueado no robots.txt.
Funciona no WordPress, Wix ou Shopify?
Sim. A maioria dos criadores de sites permite enviar a imagem do favicon nas configurações. Normalmente basta enviar o PNG de 512 px ou o favicon.ico.
O logotipo enviado fica salvo em algum servidor?
Não. O favicon é criado no navegador e a imagem não é enviada para lugar nenhum.