Formatos de favicon explicados: ICO, PNG, SVG e o que os navegadores precisam

Porque os favicons continuam estranhamente complicados

Um favicon parece uma pequena imagem, mas fica na interseção entre a interface do navegador, marcadores, separadores, atalhos fixados, resultados de pesquisa, ecrãs iniciais móveis e instalações de aplicações web progressivas. Cada contexto tem expectativas ligeiramente diferentes.

É por isso que os conselhos sobre favicons muitas vezes parecem confusos. Algumas equipas disponibilizam apenas um único favicon.ico porque isso costumava ser suficiente. Outras geram uma dúzia de ficheiros sem saber quais estão realmente a ser usados. O meio-termo sensato é mais pequeno: compreender o que ICO, PNG e SVG fazem bem, depois disponibilizar um conjunto compacto que cubra os navegadores atuais e os contextos comuns de dispositivos.

Favicons não são o lugar para exibir uma pipeline de imagens. São o lugar para ser simples, explícito e compatível.

ICO: o formato antigo que se recusa a morrer

ICO é o contentor clássico de ícones do Windows. Pode conter várias imagens bitmap em tamanhos diferentes, normalmente 16×16, 32×32 e 48×48 píxeis. Isso importa porque um favicon pode ser renderizado muito pequeno num separador do navegador, maior numa lista de marcadores e de forma diferente outra vez em atalhos do Windows.

O detalhe importante é que ICO é um contentor, não simplesmente uma imagem. Um bom favicon.ico normalmente contém vários tamanhos raster para que o navegador ou o sistema operativo possa escolher a correspondência mais próxima em vez de escalar um único bitmap minúsculo.

ICO continua a ser útil por três motivos:

• Os navegadores podem pedir /favicon.ico automaticamente, mesmo que não o ligue no seu HTML.
• Alguns navegadores e integrações mais antigos esperam encontrá-lo.
• É uma alternativa segura quando declarações de ícones mais recentes são ignoradas.

Isso não significa que ICO deva ser o seu único ícone. É pouco prático de editar, não é especialmente amigável para fluxos de trabalho modernos e é fraco como fonte de verdade para uma marca. Trate-o como a alternativa de compatibilidade.

Na prática, coloque um /favicon.ico real na raiz do site. Não sirva um 404 ali, a menos que goste de logs ruidosos e novas tentativas desnecessárias dos navegadores.

PNG: o cavalo de batalha fiável

PNG continua a ser o formato raster mais previsível para favicons e ícones táteis. Suporta transparência, é amplamente suportado e comporta-se de forma consistente entre navegadores e plataformas.

Para favicons, PNG é útil quando quer ícones com tamanhos de píxel explícitos, como 32×32 ou 48×48. Para ícones de ecrã inicial móvel, PNG é praticamente obrigatório em alguns ambientes. Os Apple touch icons, por exemplo, são baseados em PNG no uso normal em produção.

Algumas regras práticas ajudam:

• Exporte a partir de uma fonte vetorial, não de um bitmap já pequeno.
• Torne o ícone legível a 16×16 antes de se preocupar com tamanhos maiores.
• Adicione margem suficiente para que a marca não pareça cortada em contextos arredondados ou mascarados.
• Evite texto fino, linhas finas e ilustrações detalhadas.

Normalmente, não vale a pena ficar obcecado com a compressão PNG para favicons, porque os ficheiros são minúsculos. Ainda assim, não disponibilize um ícone tátil de 500 KB só porque saiu diretamente de uma exportação de design. Se já está a rever escolhas de imagem mais amplas, o mesmo raciocínio disciplinado de decisões sobre formatos de imagem na web moderna também se aplica aqui: escolha o formato para a função, não porque está na moda.

SVG: a opção moderna e flexível

Favicons SVG são atrativos porque são independentes da resolução. Um único ficheiro pequeno pode renderizar-se com nitidez em muitos tamanhos, e pode ser editado diretamente em código ou exportado a partir de software de design.

Versões modernas do Chromium, Firefox e Safari suportam favicons SVG. Isso torna SVG um bom formato primário de favicon para muitos sites, especialmente quando o ícone é um logótipo simples, um glifo ou uma marca geométrica.

Mas favicons SVG têm ressalvas.

Primeiro, o SVG deve ser autónomo. Não dependa de fontes externas, imagens remotas ou scripts. Os navegadores aplicam restrições a SVG usado como imagem e, mesmo quando algo funciona num navegador, pode falhar noutro.

Segundo, mantenha-o visualmente simples. SVG não resolve magicamente o problema dos 16 píxeis. Uma ilustração vetorial detalhada continua a ser uma mancha quando comprimida para um separador.

Terceiro, tenha cuidado com estilos dinâmicos. Algumas equipas usam prefers-color-scheme dentro de um favicon SVG para que o ícone se adapte a temas escuros e claros do navegador. Isto pode funcionar, mas o comportamento dos navegadores e a cache podem ser irregulares. Se o reconhecimento da marca for importante, um único ícone robusto costuma vencer um ícone adaptativo engenhoso.

SVG é uma boa fonte e um bom formato moderno de entrega. Não é uma razão para dispensar ficheiros de fallback.

O que os navegadores realmente procuram

Os navegadores descobrem favicons de duas formas principais: links HTML explícitos e pedidos implícitos à raiz.

O comportamento implícito é o antigo: se o navegador quiser um ícone e não tiver encontrado nenhum, pode pedir /favicon.ico. É por isso que o ficheiro ICO na raiz continua a ser útil, mesmo em sites modernos.

O comportamento explícito usa elementos <link> no head do documento. Uma configuração moderna compacta fica assim:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

O manifest pode então apontar para ícones PNG maiores usados por aplicações web instaláveis:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Esta não é a única configuração válida, mas é uma boa base. Dá aos navegadores modernos um SVG, fornece um fallback ICO convencional, cobre gravações no ecrã inicial do iOS e suporta contextos de instalação de aplicações.

O conjunto de favicons que a maioria dos sites deve disponibilizar

Para um site normal de marketing, documentação, aplicação SaaS ou publicação, este conjunto é suficiente:

• /favicon.ico contendo 16×16 e 32×32, opcionalmente 48×48.
• /icon.svg como o favicon escalável moderno.
• /apple-touch-icon.png a 180×180.
• /icon-192.png e /icon-512.png se tiver um manifest de aplicação web.

Pode adicionar mais tamanhos se uma plataforma tiver um requisito específico, mas não gere dez ficheiros por hábito. Cada ficheiro extra é mais uma coisa para armazenar em cache, esquecer, nomear incorretamente ou deixar desatualizada depois de um rebranding.

Se o seu site não é instalável e não tem manifest, talvez não precise dos ícones de 192 e 512 píxeis. Se o seu site se comporta como uma aplicação, provavelmente precisa.

Modos de falha comuns

Os bugs mais comuns de favicon não são artísticos. São problemas de entrega.

Um deles é a cache agressiva. Os navegadores agarram-se teimosamente aos favicons. Durante os testes, um ícone alterado pode não aparecer até fazer um hard refresh, limpar os dados do site, usar um novo nome de ficheiro ou testar num perfil novo. Para rebrandings em produção, alterar /icon.svg?v=2 pode ajudar no HTML, mas a raiz /favicon.ico é mais difícil porque os navegadores a pedem diretamente. Substituir o ficheiro e esperar que as caches expirem costuma fazer parte do trabalho.

Outro problema comum é o tipo MIME errado. SVG deve ser servido como image/svg+xml, PNG como image/png e ICO normalmente como image/x-icon ou image/vnd.microsoft.icon. Muitos navegadores são tolerantes, mas nem todos os contextos são. Se algo falhar apenas num navegador, inspecione a resposta de rede antes de redesenhar o ícone. Os mesmos hábitos usados ao depurar redirecionamentos e cabeçalhos HTTP em produção aplicam-se aqui: olhe para a resposta real, não para o que o CMS afirma estar a servir.

Um terceiro problema é a densidade do design. Logótipos que funcionam lindamente no cabeçalho de um site muitas vezes falham como favicons. O ícone do separador é um teste brutal. Remova palavras, simplifique formas, aumente o contraste e teste em tamanhos reais. Se o ícone for conteúdo significativo dentro da página, então preocupações de acessibilidade como texto alternativo importam; para o favicon em si, é decoração da interface do navegador, não conteúdo da página. Para esta distinção, veja o nosso guia pragmático de texto alternativo para imagens.

<!-- tool-cta:start -->

💡 Experimente isto: Gere de uma só vez as variantes ICO, PNG e SVG esperadas pelos navegadores modernos com Ultimate Favicon Generator.

<!-- tool-cta:end -->

Uma lista de verificação simples de implementação

Use esta lista de verificação antes de publicar:

1. Comece com um ficheiro mestre vetorial limpo.
2. Teste a marca a 16×16 e 32×32.
3. Exporte um favicon SVG autónomo.
4. Gere um fallback ICO com vários tamanhos.
5. Exporte um Apple touch icon de 180×180.
6. Adicione PNGs de 192×192 e 512×512 se usar um manifest.
7. Coloque /favicon.ico na raiz do site.
8. Verifique códigos de estado, tipos MIME e cabeçalhos de cache.
9. Teste em pelo menos um navegador Chromium, no Firefox e no Safari se o seu público incluir dispositivos Apple.

Favicons são pequenos, mas também são muito visíveis. Um favicon quebrado faz um site parecer inacabado. Um favicon bem feito desaparece na interface, que é exatamente o objetivo.