Como utilizar Favicon

O favicon deixa o site profissional, fácil de reconhecer e melhora a experiência do usuário.

O que é um Favicon?

A palavra favicon vem da junção de duas palavras em inglês: "favorite" e "icon" (ícone favorito) — aposto que não sabia dessa. É uma pequena imagem que representa o site na aba dos navegadores, nos favoritos e em outras partes do sistema. Ele ajuda os usuários a identificar seu site visualmente.

Criando o Favicon

Apresentarei uma versão simplificada sobre o uso de favicon, mas caso queira se aprofundar, disponibilizarei o link do artigo completo.

Dimensões Recomendadas

O tamanho padrão para favicon nos navegadores é 16x16 pixels, mas recomendo criar versões maiores:

  • 16x16 pixels - O tamanho padrão para a maioria dos navegadores.
  • 32x32 pixels - Melhor qualidade para a maioria dos navegadores.
  • 48x48 pixels - Alguns nagevadores fazem uso desse tamanho, mas é opcional.
  • 192x192 pixels - Recomendado para o Chrome no Android.
  • 152x152, 167x167, 180x180 pixels - Recomendado para dispositivos Apple.

Formatos de Arquivo

Os formatos mais comuns são:

  • ICO - formato tradicional para ícones, com ele é possível empacotar vários tamanhos personalizados.
  • PNG - suportado pela maioria dos navegadores modernos.
  • SVG - formato vetorial escalável que adequa em todos tamanhos.

Implementação no Site

Para facilitar o processo deixarei o código abaixo com todas as tags que considero relevante, então é só inserir na seção <head> do seu documento HTML:

index.html
<!-- Favicon padrão -->
<link rel="icon" href="favicon.ico" /><!-- 16x16 | 32x32 | 48x48 -->
 
<!-- Para browsers modernos -->
<link rel="icon" href="icon.svg" type="image/svg+xml" />
 
<!-- Para o chrome no android -->
<link rel="icon" sizes="192x192" href="android-chrome-192×192.png" />
 
<!-- Para dispositivos apple -->
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-ipad-retina.png" />
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />

Bônus

O formato ICO tem algumas vantagens específicas para favicon, principalmente devido à sua compatibilidade e flexibilidade. Aqui estão os principais benefícios:

  • Compatibilidade – O ICO é o formato padrão para ícones no Windows e é suportado pela maioria dos navegadores, garantindo que o ícone seja exibido corretamente.
  • Múltiplos tamanhos em um único arquivo – Diferente de PNG, o ICO pode conter várias versões da imagem (ex.: 16x16, 32x32, 48x48) no mesmo arquivo. Isso permite que o navegador escolha automaticamente o tamanho mais adequado.
  • Carregamento automático – Se o navegador não encontrar um <link rel="icon"> no documento HTML, ele realiza um busca na raiz do site /favicon.ico.

Portanto, ao criar o arquivo ICO, incluo os tamanhos 16x16, 32x32 e 48x48 empacotados em um único arquivo. Dessa forma, o navegador seleciona automaticamente o tamanho mais adequado para renderização. Como referência, disponibilizo aqui o arquivo favicon.xcf, criado no GIMP. Nele, é possível verificar como foi criado o ICO.

Ferramentas

Algumas ferramentas que recomendo para a criação do favicon, ambas gratuitas:

  • Figma - ferramenta para criar o ícone.
  • GIMP - para criação do ICO.

Conclusão

Um favicon bem projetado é um detalhe pequeno, mas importante para a identidade visual e experiência do usuário no seu site.

Referências

EVIL MARTIANS. How to favicon in 2021: Six files that fit most needs. 2021. Disponível em: https://evilmartians.com. Acesso em: 03 mar. 2025.

APPLE DEVELOPER. Configuring Web Applications. Apple Developer Library, [s.d.]. Disponível em: https://developer.apple.com. Acesso em: 03 mar. 2025.

GOOGLE. favicon in Search. Google Developers, [s.d.]. Disponível em: https://developers.google.com. Acesso em: 03 mar. 2025.