Favicons em diferentes navegadores — guia de otimização

Como os favicons evoluíram

O favicon deixou de ser apenas um arquivo ICO de 16×16 pixels. Hoje, navegadores e sistemas operacionais usam formatos e tamanhos diferentes para abas, favoritos, atalhos, telas iniciais e aplicativos instalados. Uma implementação moderna precisa combinar arquivos em vez de depender de uma única imagem.

Compatibilidade dos navegadores atuais

Chrome e Edge

• SVG, PNG e ICO
• Variações para modo escuro em SVG
• Ícones de manifest para PWAs instalados
• Favicons animados com suporte limitado e comportamento variável

Firefox

• SVG, PNG e ICO
• Variações para modo escuro
• Arquivos ICO com várias resoluções

Safari

• SVG em versões atuais, além de PNG e ICO
• apple-touch-icon para a tela inicial do iPhone e iPad
• mask-icon para versões do Safari que usam ícones monocromáticos em abas fixadas

Navegadores antigos

Para compatibilidade com navegadores e atalhos antigos, mantenha um favicon.ico com imagens de 16×16, 32×32 e 48×48 pixels.

A combinação recomendada

1. SVG para navegadores modernos

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

O SVG continua nítido em qualquer densidade de tela e pode responder ao esquema de cores do sistema:

<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="..." />
</svg>

2. PNG como alternativa previsível

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Use 16×16 e 32×32 para abas e favoritos. Para outras plataformas, prepare arquivos próprios: 180×180 para Apple Touch Icon e, em uma PWA, pelo menos 192×192 e 512×512 no manifest.

3. ICO como fallback

<link rel="icon" href="/favicon.ico" sizes="any">

Um único ICO pode reunir várias resoluções. Colocá-lo na raiz pública também atende clientes que ainda procuram /favicon.ico automaticamente.

Ajustes por plataforma

Apple

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

O Apple Touch Icon deve ser um PNG quadrado e, de preferência, opaco. Não desenhe cantos arredondados no arquivo: o sistema aplica a máscara no momento da exibição.

Android e PWA

Declare os ícones no manifest.json e separe as versões comuns das versões maskable:

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

Mantenha a parte essencial do desenho dentro da zona segura do ícone maskable. O launcher pode recortar o arquivo em círculo, squircle, quadrado arredondado ou outro formato.

Windows

O ICO continua sendo o fallback mais amplo para atalhos. Se o projeto ainda usa tiles específicos do Windows, você também pode fornecer browserconfig.xml, mas não é necessário adicioná-lo a todos os sites.

Desempenho e cache

• Comprima PNGs sem alterar suas dimensões.
• Remova metadados desnecessários do SVG e do PNG.
• Não coloque dezenas de tamanhos no HTML; declare apenas os arquivos realmente usados.
• Use nomes e URLs estáveis. Trocar o caminho pode ajudar durante uma migração, mas mudanças frequentes dificultam o diagnóstico de cache.
• O preload raramente é necessário para favicon. O navegador já descobre os ícones cedo no head.

Modo escuro

O SVG com prefers-color-scheme é a opção mais simples quando o símbolo precisa mudar de cor. Outra possibilidade é declarar dois arquivos SVG usando o atributo media:

<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">

Sempre teste as duas versões sobre fundos claros e escuros. Um desenho que funciona no cabeçalho do site pode perder contraste em uma aba do navegador.

Problemas comuns

O favicon está borrado

Confira se o navegador está recebendo uma imagem adequada ao tamanho exibido. Não amplie um PNG de 16×16 para usos maiores; parta do SVG ou de um raster com resolução suficiente.

O ícone antigo continua aparecendo

Abra a URL do arquivo diretamente e confirme se o servidor entrega a nova imagem. Depois, verifique cache do navegador e CDN, Service Worker e referências duplicadas no HTML ou nos metadados do framework.

O ícone desaparece em abas claras ou escuras

Evite detalhes finos e contraste baixo. Para SVG, prepare cores responsivas ao tema; para PNG e ICO, escolha uma combinação que continue legível nos dois fundos.

As cores mudam entre dispositivos

Exporte imagens raster em sRGB e teste em aparelhos reais. Sistemas e telas podem interpretar perfis de cor de maneiras diferentes.

Checklist de teste

1. Abra o site no Chrome, Firefox, Safari e Edge.
2. Confira abas normais e fixadas, favoritos e histórico.
3. Alterne entre modo claro e escuro.
4. Adicione o site à tela inicial no iOS e no Android.
5. Instale a PWA, quando aplicável, e confira os recortes do launcher.
6. Teste uma janela anônima ou um perfil limpo para separar problemas de cache.

Exemplo completo para o head

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<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">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Não existe um único arquivo ideal para todos os contextos. A combinação prática é SVG para navegadores modernos, PNGs para tamanhos explícitos, ICO como fallback e arquivos específicos para Apple Touch Icon e PWA.

Use o Gerador de Favicon para criar o pacote e o Favicon Checker para conferir a configuração publicada.