Sobre Favicons
Favicons são pequenos ícones que aparecem na aba do navegador, favoritos, histórico e na tela inicial de dispositivos móveis. Um site moderno precisa de múltiplos tamanhos de favicon para funcionar corretamente em diferentes plataformas e contextos.
Tamanhos Necessários
16×16: Ícone padrão na aba do navegador
32×32: Aba do navegador em telas Retina
180×180: Apple Touch Icon para iOS
192×192: Ícone para Android e PWA
512×512: Tela de splash para PWA
Como Implementar
Coloque todos os arquivos gerados na raiz do seu site. Adicione as tags HTML no head do seu documento. Para PWAs, crie também o arquivo site.webmanifest com as referências aos ícones Android.
Dicas de Design
Use uma imagem quadrada simples e reconhecível. Evite detalhes pequenos que não serão visíveis em 16×16 pixels. Cores sólidas e formas simples funcionam melhor. Teste seu favicon em diferentes fundos (claro e escuro) para garantir boa visibilidade.