O favicon é a pequena imagem mostrada na aba do navegador, nos favoritos e em alguns atalhos do sistema. Apesar do tamanho reduzido, ele influencia reconhecimento de marca e ajuda o usuário a localizar rapidamente uma página entre várias abas abertas.
Um favicon confiável não depende de um único arquivo. O conjunto ideal combina um arquivo ICO compatível com navegadores antigos, versões PNG nítidas e um ícone maior para atalhos em dispositivos móveis.
Prepare uma imagem simples e legível
Use uma composição quadrada, com contraste forte e poucos detalhes. Linhas finas, sombras delicadas e textos longos desaparecem quando a imagem é reduzida para 16 × 16 pixels. O símbolo principal deve ocupar a maior parte da área, mas precisa manter uma margem para não parecer cortado.
Se a marca tiver uma versão reduzida, prefira essa alternativa. Um monograma com uma ou duas letras também costuma funcionar melhor do que o logotipo completo.
- Trabalhe inicialmente em pelo menos 512 × 512 pixels.
- Use fundo transparente quando o símbolo funcionar em temas claros e escuros.
- Teste o resultado em 16, 32 e 48 pixels antes de publicar.
Gere os formatos e tamanhos essenciais
O arquivo favicon.ico deve reunir várias resoluções internas. Neste projeto, a exportação ICO inclui 16, 32, 48, 64, 128 e 256 pixels. Para navegadores modernos, também é útil publicar PNGs separados em 16 e 32 pixels e um Apple Touch Icon com 180 pixels.
O SVG pode ser usado como favicon em navegadores modernos, mas ainda vale manter o ICO como fallback. Para máxima previsibilidade, não use animações no favicon principal.
Adicione as referências no HTML
As tags devem ficar dentro de <head>. Use caminhos absolutos a partir da raiz para evitar que o ícone deixe de carregar em rotas internas.
<link rel="icon" href="/favicon.ico" sizes="any" />
<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" />Evite problemas de cache
Favicons são armazenados de forma agressiva pelos navegadores. Depois de uma alteração, faça um recarregamento forçado, abra o site em uma janela anônima e teste em outro dispositivo. Durante o desenvolvimento, você pode acrescentar temporariamente uma versão ao caminho, como /favicon.ico?v=2.
Em produção, prefira manter o nome definitivo e publicar cabeçalhos de cache coerentes. Mudanças frequentes no favicon devem ser raras, pois afetam reconhecimento visual e podem levar tempo para aparecer em mecanismos de pesquisa.
Valide antes de considerar concluído
Abra diretamente cada arquivo no navegador e confirme o tipo de conteúdo retornado. Depois, confira a aba do site, os favoritos e um atalho salvo na tela inicial do celular. Verifique também se a imagem continua distinguível no modo escuro.
- Nenhum arquivo retorna 404.
- O ICO contém mais de uma resolução.
- As tags estão presentes no HTML renderizado.
- O símbolo permanece reconhecível em 16 × 16 pixels.