O que é um Favicon?
Um favicon (favor icon) é o pequeno ícone que aparece na aba do navegador, ao lado do título da página. Além da aba, ele aparece nos favoritos, na barra de endereços, em abas abertas e até como ícone quando alguém salva o site na tela inicial do celular. Um favicon profissional transmite credibilidade e facilita que o usuário identifique rapidamente sua aba entre várias abertas.
Os tamanhos essenciaispara um favicon completo são: 16x16px(aba do navegador), 32x32px(favoritos em alta resolução), 48x48px(atalho no Windows), 192x192px(ícone Android/PWA) e 512x512px(splash screen em dispositivos móveis). Cada plataforma solicita um tamanho diferente, por isso é importante gerar múltiplas versões.
O formato ICOé o clássico para navegadores desktop (principalmente Internet Explorer/Edge legado), enquanto PNGé amplamente suportado por todos os navegadores modernos. O Apple Touch Icon(180x180px) é necessário para quando o site é adicionado à tela inicial no iOS. Para sites PWA, o arquivo manifest.jsonreferencia os ícones de diferentes resoluções para instalação como aplicativo.
Dicas para Criar um Bom Favicon
- Use imagens quadradas para evitar distorção — 512x512px é o tamanho ideal de origem.
- Adote cores de alto contraste — favicons pequenos precisam ser legíveis em tamanhos reduzidos.
- Evite texto em favicons — em 16x16px, letras ficam ilegíveis. Use símbolos ou iniciais simples.
- Inclua o arquivo apple-touch-icon.html no head do site para suporte a dispositivos Apple.
- O manifest.json deve referenciar os ícones 192x192 e 512x512 para funcionar como PWA.
- Teste o favicon em múltiplas abas do navegador para garantir legibilidade em diferentes contextos.
Perguntas Frequentes
Qual a diferença entre ICO e PNG para favicon?
ICO é o formato tradicional que suporta múltiplos tamanhos em um único arquivo, necessário para IE/Edge legado. PNG é mais moderno, suporta transparência e é aceito por todos os navegadores atuais. A maioria dos sites usa PNG sem problemas.
Como adicionar o favicon ao meu site?
No head do HTML, adicione: <link rel="icon" href="/favicon-32.png" sizes="32x32">. Para Apple: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Para PWA, configure no manifest.json.
Por que preciso de tantos tamanhos?
Cada dispositivo e navegador solicita um tamanho específico. 16x16 para abas, 32x32 para favoritos, 192x192 para Android e 512x512 para splash screens. Ter todas as versões garante que o ícone apareça nítido em qualquer contexto.
O que é o manifest.json?
O manifest.json é um arquivo de configuração para Progressive Web Apps (PWA) que define ícones, cores, nome e comportamento do app quando instalado no dispositivo. Ele referencia os favicons de alta resolução para diferentes densidades de tela.
A geração é feita localmente no navegador. Para sites em produção, considere usar ferramentas como RealFaviconGenerator para gerar todas as versões necessárias automaticamente.