Boas práticas de favicon

Comprimento do texto

Um único caractere funciona melhor. O favicon aparece bem pequeno (16×16 a 32×32 pixels), então uma ou duas letras continuam legíveis. Texto longo vira um emaranhado ilegível.

Escolha da fonte

Prefira fontes que continuem legíveis em tamanho pequeno:

• Fontes negrito: Funcionam melhor do que pesos finos ou light
• Fontes sans-serif: Em geral mais legíveis em tamanho pequeno
• Evite fontes decorativas ou script, que ficam ilegíveis reduzidas
• Teste a visibilidade: Sempre visualize o favicon no tamanho real (16×16 pixels) antes de fechar o desenho

Contraste de cor

Use alto contraste entre texto e fundo. O favicon aparece sobre fundos claros, escuros e coloridos do navegador, então o desenho precisa funcionar em todos. Evite cores parecidas, que se misturam no tamanho pequeno.

Simplicidade

Mantenha o desenho simples e limpo. Detalhes complexos desaparecem no tamanho pequeno. Foque em um elemento visual claro que represente a marca ou o site.

Escolha de formato

Tamanhos necessários

Ofereça o favicon em vários tamanhos para uma boa exibição em dispositivos e contextos diferentes:

• 16×16 pixels: Tamanho padrão da aba do navegador
• 32×32 pixels: Telas de alta DPI e alguns contextos de navegador
• 180×180 pixels: Apple touch icon para a tela inicial do iOS
• 192×192 e 512×512 pixels: Ícones da tela inicial no Android e suporte a PWA

Nota: desenhe sempre no maior tamanho (512×512) e reduza, em vez de ampliar a partir de um arquivo pequeno. Assim a qualidade se mantém em todos os tamanhos.

Compatibilidade de navegadores

Teste o favicon em navegadores diferentes (Chrome, Firefox, Safari, Edge) e em desktop, celular e tablet. Cada um trata o ícone um pouco diferente; testar evita surpresa na aparência.

Usar o logo completo

Evite o logo inteiro da empresa, a menos que ele seja extremamente simples. A maior parte dos logos tem detalhe demais para 16×16 pixels. Prefira uma versão simplificada, um monograma ou um símbolo-chave da marca.

Baixo contraste

Desenhos com pouco contraste entre os elementos somem no tamanho pequeno. Garanta contraste suficiente para temas e fundos diferentes do navegador.

Arquivo no lugar errado

Coloque os arquivos no diretório certo (em geral public ou static) e faça as tags link do HTML apontarem para esses caminhos.

Faltar tamanhos

Um único tamanho limita a compatibilidade. Inclua 16×16, 32×32, 180×180, 192×192 e 512×512 para cobrir dispositivos e contextos.

Não testar

Teste o favicon em vários navegadores e dispositivos antes de publicar. O que fica bom em um pode falhar em outro. Use as ferramentas de desenvolvedor para confirmar o carregamento.