Que tamanhos de favicon você precisa em 2026? O conjunto ideal

Em 2026, o conjunto ideal de favicon é: um favicon.ico contendo imagens de 16, 32 e 48 px, um PNG 96x96 (para o Google Search), um favicon SVG opcional, um apple-touch-icon.png de 180x180 e PNGs de 192x192 e 512x512 (mais um 512 maskable) declarados em um manifesto de aplicativo web. Os blocos do Windows e os tamanhos antigos da Apple só são necessários se você precisar oferecer suporte a dispositivos muito antigos. Tudo abaixo explica o porquê, com uma tabela de tamanhos, HTML pronto para usar e erros comuns a evitar.

O cenário dos favicons já foi bagunçado: cada navegador e sistema operacional pedia o seu próprio tamanho, o que gerou os infames blocos de 20 linhas no <head>. Hoje, quase tudo isso está obsoleto. Os navegadores modernos redimensionam um único bom ícone, o iOS quer um só tamanho e o Android lê o manifesto. Este artigo separa o que é realmente necessário do que é apenas bom ter.

A resposta curta: o conjunto ideal de arquivos de favicon

• favicon.ico (16, 32, 48 px em um único arquivo) na raiz do site. Navegadores, leitores de feeds e muitas ferramentas ainda solicitam /favicon.ico automaticamente.
• favicon.svg (opcional, mas recomendado) para uma renderização nítida em qualquer tamanho e suporte ao modo escuro.
• PNG 16x16, 32x32 e 96x96 como alternativas explícitas. A versão de 96 px ajuda no Google Search, que exige um múltiplo de 48 px.
• apple-touch-icon.png em 180x180, opaco, sem transparência.
• PNG 192x192 e 512x512 no manifest.json, mais um ícone maskable 512x512 para Android.
• Meta tag theme-color para colorir a interface do navegador no celular.
• Blocos do Windows (70, 150, 310 px) com browserconfig.xml apenas para o Windows antigo e sites fixados no IE11.

Tabela de tamanhos de favicon: finalidade, nomes de arquivo e prioridade

Use esta tabela como checklist. "Obrigatório" significa que um site normal ficará quebrado ou inacabado sem ele; "Recomendado" significa um ganho claro de qualidade; "Opcional" significa uso de nicho ou legado.

favicon.ico: 16, 32 e 48 px em um único arquivo

Um arquivo ICO é um contêiner que guarda vários bitmaps. Um bom favicon.ico inclui imagens de 16x16, 32x32 e 48x48 para que o navegador ou o sistema operacional escolha a correspondência mais próxima. Coloque-o na raiz do seu domínio (https://example.com/favicon.ico). Mesmo que o seu HTML aponte para outro lugar, muitos rastreadores, leitores de RSS e navegadores antigos ainda solicitam exatamente essa URL, e tê-lo evita ruído de erros 404 nos seus logs.

Não basta renomear um PNG para .ico. A maioria dos navegadores tolera isso, mas algumas ferramentas o rejeitam e você perde o benefício de várias resoluções. Exporte um ICO de verdade.

Favicons PNG: 16, 32 e 96 px

Links PNG com sizes explícito permitem que o navegador escolha o melhor bitmap sem analisar o ICO. Na prática, 32x32 cobre as abas de alta densidade, e 16x16 hoje é quase redundante. Vale a pena adicionar o tamanho 96x96, porque o Google Search exibe favicons ao lado dos resultados e exige um ícone quadrado cujo tamanho seja múltiplo de 48 px (48x48, 96x96, 144x144 e assim por diante). Um arquivo de 96 px dá ao Google uma fonte mais nítida do que um de 48 px quando ele reduz a imagem para resultados no celular.

Dica de design: em 16 px, os detalhes finos desaparecem. Use uma forma simples e marcante, alto contraste e pouco ou nenhum texto. Você pode ajustar e visualizar seu ícone no editor do MakeFav antes de exportar.

Favicon SVG e modo escuro

Um favicon SVG é um único arquivo minúsculo que permanece nítido em qualquer densidade de tela. Navegadores baseados em Chromium e o Firefox o suportam. O suporte do Safari historicamente foi limitado, então nunca dependa apenas do SVG: mantenha as alternativas ICO e PNG.

A maior vantagem é a adaptação de tema. Como um SVG pode conter CSS, você pode adaptar o ícone ao esquema de cores do usuário com prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Observe que a media query reflete o tema do navegador ou do sistema operacional, que é o que a barra de abas usa. Ela não acompanha um botão de alternância de tema no seu próprio site.

Uma peculiaridade conhecida: quando um ICO e um SVG são listados juntos, o Chrome pode escolher o ICO. Declarar o ICO com sizes="32x32" e listar o SVG depois faz o Chrome preferir o SVG, como mostrado no código abaixo.

Apple touch icon: 180x180 e os tamanhos legados

Quando um usuário adiciona seu site à tela inicial do iOS ou iPadOS, o Safari usa o apple-touch-icon. Hoje, um único PNG de 180x180 px basta: o iOS o reduz para dispositivos mais antigos e iPads. Nomeie-o apple-touch-icon.png e coloque-o na raiz; o iOS até procura esse arquivo por padrão se não houver nenhuma tag link.

Regras para o ícone da Apple:

• Sem transparência. O iOS preenche os pixels transparentes com preto, então um logotipo transparente muitas vezes vira uma mancha preta. Adicione uma cor de fundo sólida.
• Sem cantos arredondados. O iOS aplica sua própria máscara arredondada. Forneça um quadrado completo.
• Mantenha o conteúdo principal longe das bordas, já que os cantos são cortados.

Quando você precisa dos tamanhos legados (57, 72, 76, 114, 120, 144, 152, 167)? Somente se você der suporte ao iOS 6 ou anterior, ou quiser controle exato de pixels por dispositivo para o iPad Pro (167 px) e o iPad (152 px). Para quase todos os sites em 2026, o arquivo de 180x180 sozinho é suficiente. A configuração de compatibilidade máxima abaixo inclui alguns por completude.

Ícones para Android e PWA: 192, 512 e maskable

O Chrome no Android e outros navegadores compatíveis com PWA leem os ícones do manifesto de aplicativo web, e não de <link rel="icon">. Para que o app seja instalável, você precisa de pelo menos um PNG de 192x192 e um de 512x512. O ícone de 192 px é usado na tela inicial e no lançador de apps; o de 512 px aparece nas telas de abertura e nos diálogos de instalação.

Ícones maskable e a zona segura

Os ícones adaptáveis do Android podem ser recortados em círculo, squircle ou outra forma, dependendo do dispositivo. Um ícone maskable é projetado para ser recortado com segurança: o conteúdo importante deve ficar dentro da zona segura, um círculo centralizado com diâmetro de 80% da imagem (o raio equivale a 40% do lado). Para um arquivo de 512x512, isso significa manter seu logotipo dentro de um círculo de cerca de 410 px de diâmetro e estender a cor de fundo até as quatro bordas, para que nenhuma lacuna apareça após a máscara.

Declare o ícone maskable como uma entrada própria, com "purpose": "maskable". Evite "any maskable" em um único arquivo: o espaçamento necessário para a máscara parece pequeno demais quando o ícone é exibido sem máscara.

Exemplo de manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Sirva o arquivo como application/manifest+json (ou application/json) e vincule-o em todas as páginas com <link rel="manifest" href="/manifest.json">. Alguns projetos o chamam de site.webmanifest; o nome não importa, o link sim.

Blocos do Windows e browserconfig.xml

O Windows 8.1 e o 10 permitem fixar um site no menu Iniciar, e o IE11 e o Edge legado leem as imagens dos blocos no browserconfig.xml. Os tamanhos usuais são 70x70 (pequeno), 150x150 (médio), 310x150 (largo) e 310x310 (grande). O Edge baseado em Chromium usa o manifesto e os favicons comuns, então este é um recurso legado. Inclua-o somente se o seu público ainda tiver configurações antigas do Windows, por exemplo em ambientes corporativos.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: colorindo a interface do navegador

A meta tag theme-color informa aos navegadores móveis (e a alguns de desktop) qual cor usar na barra de endereços ou na barra de título. Ela não é um favicon, mas faz parte do mesmo conjunto de identidade visual. Você pode fornecer valores separados para os modos claro e escuro:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Configuração moderna mínima vs. compatibilidade máxima

Configuração moderna mínima (recomendada para a maioria dos sites)

Cinco arquivos cobrem mais de 99% do uso real: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) e os dois ícones do manifesto (192 e 512). Adicione o PNG 96x96 se a visibilidade no Google Search for importante, e um ícone maskable se você publicar um PWA.

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

Configuração de compatibilidade máxima

Escolha esta opção quando você atende um público amplo ou corporativo, ou quando quer cobrir todos os clientes possíveis. Ela adiciona tamanhos PNG explícitos, tamanhos legados da Apple, blocos do Windows e cores de tema.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Observe os caminhos relativos à raiz, começando com /. Eles funcionam em qualquer profundidade de página, o que nos leva aos erros mais comuns.

Erros comuns com favicons e como corrigi-los

1. Caminhos errados

Um link como href="favicon.ico" é resolvido em relação à URL atual, então funciona em /, mas quebra em /blog/post/. Use URLs relativas à raiz (/favicon.ico) ou absolutas. Verifique também se os arquivos realmente existem: abra cada URL diretamente no navegador e confirme que ela retorna HTTP 200, e não um redirecionamento para uma página 404 ou uma tela de login.

2. Atributo sizes ausente ou incorreto

Sem sizes, os navegadores precisam baixar os ícones para inspecioná-los e podem escolher o errado. Sempre declare sizes nos links PNG e certifique-se de que corresponde às dimensões reais em pixels. Um arquivo marcado como 32x32 que na verdade é 64x64 causa resultados inconsistentes.

3. Cache agressivo

Os navegadores guardam favicons em cache por muito tempo, muitas vezes independentemente do cache da página. Após uma reformulação de marca, o ícone antigo pode persistir por dias. Mude o nome do arquivo ou adicione uma query string de versão (/favicon.ico?v=2) e atualize as tags link. Recarregamentos forçados muitas vezes não atualizam o ícone da aba; abrir a URL do ícone diretamente e recarregá-la geralmente funciona.

4. Imagens não quadradas

Favicons devem ser quadrados. Um logotipo retangular é esticado, cortado ou exibido com faixas de forma imprevisível. Crie uma marca quadrada dedicada, como uma inicial ou um símbolo, em vez de reduzir um logotipo largo com texto.

5. Apple touch icons transparentes ficando pretos

O iOS preenche a transparência com preto. Dê ao ícone de 180x180 um fundo opaco e não arredonde os cantos previamente.

6. Ícones maskable sem zona segura

Se o logotipo tocar as bordas de um ícone maskable, o Android o cortará. Mantenha-o dentro do círculo central de 80% e preencha toda a tela com a cor de fundo.

7. Bloquear ícones para rastreadores

Se o robots.txt proibir o caminho do seu favicon, o Google não consegue obtê-lo e mostrará um ícone genérico de globo nos resultados de busca. Lembre-se também de que o Google precisa do favicon no mesmo host da página e só o atualiza ocasionalmente, então as mudanças podem levar dias ou semanas para aparecer.

8. Esquecer o link do manifesto ou as finalidades

Um manifesto que não está vinculado, ou que não tem ícones de 192 e 512 px, impede o prompt de instalação no Chrome. Valide-o nas ferramentas do desenvolvedor do seu navegador, na aba Application.

Gere o conjunto completo com um clique

Criar uma dúzia de arquivos manualmente em um editor de imagens, depois converter para ICO e escrever o manifesto, é trabalhoso e propenso a erros. O MakeFav gera todos os arquivos acima a partir de uma única imagem, texto ou emoji: favicon.ico com vários tamanhos, PNGs, SVG, Apple touch icon, PNGs de 192/512, um ícone maskable, blocos do Windows, manifest.json e browserconfig.xml, além de um trecho de HTML pronto para colar, tudo em um único download ZIP. Você pode ajustar fundo, margem interna e forma no editor, verificar um site existente com o verificador de favicon e automatizar a geração por meio dos recursos para desenvolvedores.

Checklist de implantação

1. Envie todos os arquivos para a raiz do seu site.
2. Cole o trecho de HTML no <head> de todas as páginas (ou no seu layout compartilhado).
3. Certifique-se de que os caminhos são relativos à raiz e retornam HTTP 200.
4. Verifique os modos claro e escuro, uma instalação na tela inicial do iOS e uma instalação no Android.
5. Execute o verificador para detectar tamanhos ausentes ou incompatíveis.
6. Limpe os caches com uma string de versão se você substituiu um ícone antigo.

Perguntas frequentes

Ainda preciso do favicon.ico em 2026?

Sim. Embora os navegadores modernos aceitem PNG e SVG, muitos rastreadores, leitores de feeds, clientes de e-mail e navegadores antigos ainda solicitam /favicon.ico diretamente. Um ICO com vários tamanhos, com imagens de 16, 32 e 48 px, é um arquivo pequeno que evita ícones ausentes e erros 404.

Qual deve ser o tamanho de um favicon para o Google Search?

O Google exige um favicon quadrado cujo tamanho seja múltiplo de 48 px, com no mínimo 48x48. Um PNG 96x96 é uma escolha segura, e um SVG também é suportado. O Google também precisa que o arquivo possa ser rastreado, então não o bloqueie no robots.txt. As atualizações podem levar dias ou semanas para aparecer.

180x180 é suficiente para o Apple touch icon?

Para quase todos os sites, sim. O iOS e o iPadOS reduzem um PNG de 180x180 para todos os dispositivos atuais. Os tamanhos mais antigos (de 57 a 152 px) só importam para versões muito antigas do iOS. Lembre-se de usar um fundo opaco para que o ícone não fique preto.

O que é um ícone maskable e preciso de um?

Um ícone maskable é um PNG de 512x512 projetado para as formas de ícone adaptável do Android. Seu conteúdo importante fica dentro de um círculo central com 80% de diâmetro, e o fundo preenche todo o quadrado. Você só precisa dele se oferecer um PWA instalável, mas ele faz o ícone parecer nativo em vez de ficar dentro de um círculo branco.

Por que meu favicon antigo ainda aparece depois que o troquei?

Os navegadores guardam favicons em cache separadamente e por muito tempo. Renomeie o arquivo ou adicione uma query string de versão, como ?v=2, atualize as tags link e depois abra a URL do ícone diretamente e recarregue-a. Os mecanismos de busca podem demorar mais para atualizar a própria cópia.