Favicons em diferentes navegadores — guia de otimização

Como os favicons evoluíram

Abas, favoritos, resultados do Google e atalhos na tela inicial podem usar declarações diferentes. Ver o ícone em uma aba não comprova os demais contextos. Comece pelos arquivos exportados e teste os locais de exibição necessários ao seu site.

Compatibilidade dos navegadores atuais

As notas do Safari 26.0 do WebKit registram a inclusão de ícones SVG. A afirmação antiga sobre favicon SVG comum desde o Safari 16.4 não deve orientar a compatibilidade. Ícones comuns, máscaras de abas fixadas e imagens da página são recursos distintos. A tabela é um plano de teste, não uma garantia para todas as versões.

Chrome e Edge

Confira aba, favoritos e app instalado separadamente. Comece com ICO/PNG pequenos e acrescente SVG ou manifest conforme o contexto atendido.

Firefox

Teste formato, tamanho e tema nas versões usadas pelo projeto; mantenha raster quando necessário.

Safari

As notas do WebKit registram ícones SVG no Safari 26.0. Não use a antiga afirmação de Safari 16.4 para favicons comuns; teste a versão e o contexto reais.

Navegadores antigos

Use ICO/PNG conforme os ambientes que o projeto precisa atender, sem prometer compatibilidade idêntica em toda versão.

A combinação recomendada

Declare somente arquivos que você realmente publicou.

1. SVG para navegadores modernos

Use SVG Favicon para configurar cores claras e escuras em uma arte vetorial. Mantenha PNG ou ICO quando os navegadores e contextos atendidos precisarem. Suporte a imagens SVG em uma página não comprova suporte a favicons SVG. Favicons comuns também são diferentes dos ícones de abas fixadas do Safari.

Teste as versões atendidas pelo seu projeto antes de afirmar suporte a um formato ou animação. Mesmo um vetor nítido pode ter detalhes ilegíveis em 16 px.

2. PNG como alternativa previsível

O Favicon Generator exporta ICO com vários tamanhos, PNGs pequenos e Apple Touch de 180 px. O ZIP do exemplo usa o mesmo fluxo e pode ser aberto sem conta. Neste exemplo, os arquivos ficam na raiz do site:

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Se você usar /icons/, altere as URLs. O ICO desta ferramenta contém imagens de 16, 32 e 48 px; cada PNG tem um tamanho. Apple Touch é um ícone de atalho do site, não um catálogo de assets de app iOS.

3. ICO como fallback

O ICO do exemplo contém quadros PNG de 16, 32 e 48 px. Confira o arquivo real; renomear PNG para .ico não converte o formato.

Ajustes por plataforma

Verifique cada contexto no ambiente de destino.

Apple

Mantenha apple-touch-icon para o fluxo de tela inicial atendido, com fundo opaco intencional, deixando o aparelho aplicar a forma externa. Assets iOS nativos são outra tarefa. Para uma máscara de aba fixada do Safari, prepare arte monocromática apropriada, sem apenas renomear um favicon SVG colorido.

Android e PWA

Declare as imagens do launcher em icons do manifest. Um PNG de 192 ou 512 px apenas em rel="icon" não substitui essa configuração. Artes padrão e maskable têm composições distintas; o guia PWA explica tamanhos e círculo seguro.

Windows

Confira aba, favoritos e atalho do app instalado separadamente. Adicione arquivos antigos de blocos ou browserconfig.xml somente se o projeto realmente atender esse recurso e tiver os arquivos. Eles não são obrigatórios para todo ambiente atual do Edge.

Desempenho e cache

Simplifique a arte e confira a rasterização pequena antes de reduzir o arquivo. PNG não tem uma configuração universal de qualidade de “70–80%”, e SVG com fotografia incorporada pode ser maior que PNG simples. Preserve o original e compare cópias otimizadas em 16 e 32 px.

Confira cabeçalhos, cache de CDN e service worker. Use URL estável para o favicon de busca, sem renomear repetidamente para tentar forçar rastreamento. Ao trocar a versão do ícone do navegador, publique declarações e arquivos juntos e mantenha os arquivos antigos enquanto houver páginas em cache. Não pré-carregue todos os ícones sem uma necessidade medida.

Modo escuro

Um SVG autocontido pode usar prefers-color-scheme. Salve este exemplo original como favicon.svg e publique o arquivo, ou configure cores no SVG Favicon. O ZIP de exemplo do gerador de imagens fornece raster; adicionar uma declaração SVG não cria o arquivo.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .background { fill: #ffffff; }
    .mark { fill: #172554; }
    @media (prefers-color-scheme: dark) {
      .background { fill: #172554; }
      .mark { fill: #ffffff; }
    }
  </style>
  <rect class="background" width="100" height="100" rx="20" />
  <circle class="mark" cx="50" cy="50" r="25" />
</svg>

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.svg">

Esses arquivos não definem uma ordem obrigatória de fallback. O navegador escolhe entre candidatos conforme os atributos; veja a referência de links de ícone. Confira a URL escolhida, os dois temas e a legibilidade do raster. Uma simulação escura não comprova que o navegador carregou a variante SVG.

Problemas comuns

Confira a imagem escolhida e a resposta pública antes de refazer a arte.

O favicon está borrado

Identifique o arquivo escolhido e confira os pixels reais. Ofereça tamanhos pequenos apropriados e simplifique linhas finas: aumentar dimensões não recupera detalhes do original nem torna um desenho complexo legível em uma aba pequena.

O ícone antigo continua aparecendo

1. Abra a URL declarada e confira status, tipo de conteúdo e se a resposta é uma imagem, não HTML.
2. Inspecione o HTML final por declarações duplicadas ou ícones de arquivo do framework substituindo sua configuração.
3. Compare o arquivo publicado com a exportação local.
4. Confira caches de CDN, service worker e navegador; compare com um perfil novo. Janela privada e atualização forçada são diagnósticos, não uma limpeza garantida do cache de favicon.
5. Use Favicon Checker para o site público e confirme a exibição nos navegadores atendidos.

Para instalar, veja os guias de Next.js e WordPress. Envie correções pela página Sobre e contato.

O ícone desaparece em abas claras ou escuras

Compare fundos claros e escuros e abas ativas e inativas. Ajuste a arte ou use SVG com tema testado. Uma prévia grande não representa o ícone final pequeno.

As cores mudam entre dispositivos

Converta para sRGB quando o editor permitir, guarde o original e compare o arquivo publicado em telas relevantes. Remover o perfil sem converter os pixels não é uma correção universal.

Checklist de teste

Teste Chrome, Firefox, Safari e Edge nas versões usadas pelo seu público; registre versão, URL escolhida, tema e contexto. Inclua a tela inicial do celular quando necessário. Favicon Checker ajuda a conferir arquivos e declarações públicos; navegador e aparelho confirmam o contexto real de exibição.

Exemplo completo para o head

O Favicon Generator exporta ICO com vários tamanhos, PNGs pequenos e Apple Touch de 180 px. O ZIP do exemplo usa o mesmo fluxo e pode ser aberto sem conta. Neste exemplo, os arquivos ficam na raiz do site:

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Se você usar /icons/, altere as URLs. O ICO desta ferramenta contém imagens de 16, 32 e 48 px; cada PNG tem um tamanho. Apple Touch é um ícone de atalho do site, não um catálogo de assets de app iOS.

Ao usar o manifest exportado, publique também site.webmanifest e suas imagens:

<link rel="manifest" href="/site.webmanifest">

Para o Google, confira a declaração na página inicial e se os arquivos podem ser rastreados, seguindo a documentação atual de favicon. A exibição não é garantida nem imediata. Evite renomear arquivos repetidamente para tentar forçar uma atualização na busca.

Ícones PWA são declarados no manifest. A arte maskable exige uma área segura circular, explicada no guia de PWA. Um PNG de 512 px não torna o site uma PWA completa e instalável.

Veja os guias de Next.js e WordPress. Correções: Sobre e contato.