Gerador de favicon
Envie seu logotipo e receba em um único ZIP os ícones de que seu site precisa: um favicon.ico com imagens de 16, 32 e 48 pixels, um PNG de 48 pixels para o Google, um Apple Touch Icon com fundo opaco para o iPhone, ícones de 192 e 512 pixels para o Android, um ícone adaptável com a zona segura já calculada e um site.webmanifest. Se você enviar um SVG, o icon.svg também vai junto. Você vê as pré-visualizações da aba, do resultado do Google e da tela inicial e copia o código <head> pronto; tudo roda no seu navegador.
- Grátis e sem cadastro
- Seu arquivo não sai do seu dispositivo
- Até 50 MB por arquivo
Adicione a imagem do seu logotipo ou ícone para começar. PNG, SVG, JPG e WebP funcionam; para o melhor resultado, use uma imagem quadrada com pelo menos 512 × 512 pixels.
Seu arquivo não sai do seu dispositivo; as imagens são processadas no seu navegador. Dados EXIF e de localização não são adicionados ao resultado.
Como criar um favicon
Adicione seu logotipo
Envie um logotipo em PNG, SVG, JPG ou WebP. Para o melhor resultado, use uma imagem quadrada de pelo menos 512 × 512 pixels; um SVG também serve.
Defina o nome, as cores e a margem
Digite o nome do site e o nome curto, escolha as cores do tema e do fundo e adicione margem interna se precisar. As pré-visualizações mostram como o ícone fica na aba, no Google e na tela inicial.
Baixe o pacote e instale
Baixe o ZIP, envie os arquivos para a pasta raiz do seu site e adicione às suas páginas o trecho <head> exibido.
O que é preservado?
Mantido
- As proporções do seu logotipo: uma imagem não quadrada é encaixada dentro de um quadrado, nunca esticada
- A transparência (nos ícones padrão; se você escolher uma cor de fundo, ela é preenchida)
- Se você enviar um SVG, o icon.svg vai como está
Alterado
- Cada ícone é reamostrado para o próprio tamanho, em alta qualidade
- O Apple Touch Icon e o ícone adaptável sempre têm fundo opaco: a cor que você escolher, ou branco quando “Transparente” está selecionado
- No ícone adaptável, o conteúdo fica na zona segura de 80%
Não levado
- Nenhum vetor (SVG) é gerado a partir de um PNG ou JPG; o icon.svg só existe quando a entrada é um SVG
- Dados EXIF e outros metadados não são adicionados aos ícones
Quando usar
Um conjunto completo de ícones para um site novo
Um único favicon.ico não basta mais: a tela inicial do iPhone, o Android e os resultados do Google esperam arquivos diferentes. Com um envio só, você recebe todos eles, com os nomes e tamanhos corretos.
Fazer seu ícone aparecer no Google
O Google mostra o ícone do seu site nos resultados a partir de um arquivo quadrado cujo tamanho seja múltiplo de 48 pixels, e esse arquivo precisa poder ser rastreado. O pacote inclui esse arquivo e o link dele para o <head>.
Um site que pode ser adicionado como um aplicativo (PWA)
Se você quer que seu site possa ser adicionado à tela inicial, precisa de um manifesto e de ícones de 192 e 512 pixels. O ícone adaptável evita que seu logotipo seja cortado quando o Android recorta o ícone em círculo ou quadrado arredondado.
Limitações que vale conhecer
- Para o melhor resultado, use uma imagem quadrada de pelo menos 512 × 512 pixels; ícones grandes feitos a partir de origens menores ficam borrados.
- Linhas finas e textos pequenos ficam ilegíveis em ícones de 16 e 32 pixels; logotipos fortes e de alto contraste funcionam melhor.
- A cor do tema só vale na barra de endereços dos navegadores de celular e depende das configurações do navegador.
- O Google pode levar dias ou até semanas para atualizar o ícone nos resultados de busca, e os navegadores também guardam ícones em cache.
Perguntas frequentes
De quais arquivos de favicon um site precisa?
A abordagem atual: favicon.ico na pasta raiz, um PNG de 48 pixels para o Google, icon.svg se possível, um apple-touch-icon.png de 180 pixels para o iPhone, ícones de 192 e 512 pixels para o Android e um site.webmanifest. O gerador cria todos e entrega os links para o <head>.
O que é um ícone adaptável?
Um ícone adaptável mantém o conteúdo dentro de uma zona segura e tem o fundo totalmente preenchido, para que o Android possa recortá-lo em círculo, quadrado arredondado ou outra forma, conforme o aparelho. Aqui, o conteúdo fica na área central de 80% da imagem de 512 pixels.
Por que o Apple Touch Icon é opaco e de cantos retos?
O iOS mostra áreas transparentes em preto e arredonda os cantos sozinho. Por isso o ícone é gerado totalmente preenchido e sem cantos arredondados, na cor de fundo que você escolher (branco quando Transparente está selecionado).
Por que meu ícone não aparece nos resultados do Google?
O arquivo do ícone não pode estar bloqueado pelo robots.txt, precisa ser indicado no <head> da página inicial e ser um quadrado com tamanho múltiplo de 48 pixels. Depois de corrigir, você pode pedir a reindexação da página inicial no Search Console; a atualização ainda pode levar dias ou semanas.
O que acontece se eu enviar uma imagem que não é quadrada?
Os ícones são encaixados dentro de um quadrado sem distorção e deixam espaço vazio nas laterais. Se quiser que o quadro preencha o quadrado, recorte antes a imagem em 1:1 com a ferramenta de recorte.
Ele cria um favicon SVG a partir de um PNG?
Não. Converter pixels em vetor automaticamente poderia mudar o visual do ícone sem você perceber; por isso o icon.svg só é incluído quando você mesmo envia um SVG.
Esta ferramenta é grátis?
Sim, totalmente grátis. Não há conta, assinatura nem marca d'água.
Meus arquivos são enviados para algum lugar?
Não. As imagens são processadas no seu navegador e não saem do seu dispositivo. Dados EXIF e de localização não são adicionados ao resultado.