Voltar aos tutoriais

O que é favicon?

Um guia para entender o que é um favicon, para que serve e como ele reforça a marca e a navegação do seu site. Veja também como criar o ícone do seu site.

Definição de favicon

Um favicon, abreviação de "favorite icon", é um ícone pequeno que representa um site ou uma página. Ele aparece em vários lugares nos navegadores e dispositivos: nas abas, ao lado do título da página; nos favoritos; no histórico; e na tela inicial do celular quando o site é salvo como atalho.

Em geral são imagens quadradas de 16x16, 32x32 ou 48x48 pixels. Implementações atuais também usam tamanhos maiores, até 512x512 pixels, para telas de alta resolução e dispositivos móveis.

Onde o favicon aparece

O favicon aparece em vários lugares para ajudar as pessoas a reconhecer e abrir o seu site:

  • Abas do navegador: O lugar mais visível: ao lado do título da página na aba do navegador
  • Favoritos: Ao lado do nome do favorito na lista de favoritos
  • Histórico do navegador: No menu de histórico do navegador
  • Barra de endereços: Alguns navegadores mostram o favicon na barra de endereços
  • Tela inicial do celular: Quando alguém adiciona o site à tela inicial, o favicon vira o ícone do atalho
  • Resultados de busca: Alguns buscadores exibem o favicon ao lado dos resultados
Exemplos de favicon nas abas do navegador, nos favoritos e na barra de endereços

Exemplo: favicons nas abas e nos favoritos do navegador

Por que o favicon importa

O favicon pesa na marca do site e na forma como as pessoas navegam:

Reconhecimento da marca

Um favicon bem desenhado ajuda a achar o seu site no meio de várias abas abertas. Ele reforça a identidade e deixa o site mais fácil de lembrar.

Aparência profissional

Um favicon próprio dá um acabamento profissional. Sem ele, o navegador mostra um ícone genérico, e o site parece incompleto.

Experiência de uso

O favicon facilita achar o site nos favoritos, no histórico e entre várias abas. Isso importa ainda mais para quem volta com frequência.

Uso no celular

No celular, o favicon vira o ícone do atalho na tela inicial. Um desenho claro e reconhecível melhora essa experiência.

Formatos e tamanhos de favicon

Sites atuais devem oferecer favicons em vários formatos e tamanhos para funcionar em todos os navegadores e dispositivos:

Formato ICO

O formato tradicional favicon.ico, em geral 16x16 ou 32x32 pixels. É o mais compatível e funciona em todos os navegadores.

Formato PNG

Favicons PNG são usados em vários tamanhos, inclusive 16x16, 32x32, 48x48, 96x96, 180x180, 192x192 e 512x512 pixels. Têm melhor qualidade e suporte a transparência do que arquivos ICO.

Formato SVG

Favicons em SVG (Scalable Vector Graphics) não dependem de resolução e ficam nítidos em qualquer tamanho. Navegadores modernos aceitam SVG, o que os torna ideais para telas de alta resolução.

Apple Touch Icon

Dispositivos Apple usam apple-touch-icon.png, em geral 180x180 pixels, como ícone da tela inicial. Assim o site fica profissional quando é salvo no iOS.

Exemplos de tamanho de favicon

Exemplo de favicon 16x16 pixels16×16
Exemplo de favicon 32x32 pixels32×32
Exemplo de favicon 48x48 pixels48×48
Exemplo de favicon 96x96 pixels96×96

Exemplo: o mesmo favicon em tamanhos diferentes

Boas práticas de design de favicon

Ao criar um favicon, vale ter estes princípios em mente:

  • Simplicidade: O favicon é pequeno, então desenhos simples funcionam melhor. Evite detalhes finos que somem em tamanho reduzido
  • Alto contraste: Use cores com bom contraste para o ícone continuar visível em fundos diferentes do navegador
  • Consistência da marca: O favicon deve refletir a identidade da marca e ser reconhecível no conjunto visual do site
  • Escalabilidade: Desenhe o favicon para funcionar bem em vários tamanhos, de 16x16 a 512x512 pixels
  • Testes: Teste o favicon em navegadores e dispositivos diferentes para confirmar que ele aparece corretamente
Exemplos de favicons simples e com alto contraste

Bons exemplos: favicons simples e com alto contraste

Exemplos de favicons excessivamente complexos ou com baixo contraste

Evite: desenhos excessivamente complexos ou com baixo contraste

Como criar um favicon

Criar um favicon ficou mais simples com as ferramentas atuais. Dá para partir do zero ou aproveitar um desenho que você já tem:

Usar um gerador online

Ferramentas como logo87.com geram o pacote rápido: você digita o texto, escolhe cores e fontes e baixa todos os tamanhos e formatos necessários. É o caminho mais fácil se você não tem experiência em design.

Converter uma imagem existente

Se você já tem um logo ou uma imagem, use o SVG para PNG para gerar os formatos e tamanhos de favicon alinhados à sua marca.

Desenhar do zero

Quem trabalha com design gráfico pode criar o favicon em um software profissional, com controle pixel a pixel em todos os tamanhos necessários.

Conclusão

O favicon é um detalhe pequeno, mas faz parte da identidade do site. Ajuda as pessoas a reconhecerem a página, reforça a marca e melhora a navegação. Oferecer vários formatos e tamanhos deixa o site com cara profissional e funcionando em navegadores e dispositivos diferentes.

Seja com um gerador online, a partir de uma imagem ou desenhado do zero, investir nesse ícone é investir na percepção do site. Saber montar o pacote certo fortalece a identidade da marca na web.