Quais 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 de 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. Tiles do Windows e 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 uso e erros comuns a evitar.

O cenário dos favicons já foi bagunçado: cada navegador e sistema operacional pedia 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 ícone de boa qualidade, o iOS quer um só tamanho e o Android lê o manifesto. Este artigo separa o que é realmente necessário do que é apenas desejável.

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 feed 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.
• Tiles 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 parecerá 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 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 mais antigos ainda solicitam exatamente essa URL; tê-la 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 precisar analisar o ICO. Na prática, o 32x32 cobre abas em telas de alta densidade, e o 16x16 é quase redundante hoje. 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 marcante e simples, 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 oferecem suporte a ele. O suporte do Safari historicamente foi limitado, então nunca dependa apenas do SVG: mantenha as alternativas em ICO e PNG.

A maior vantagem é a personalização por 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 seletor de tema no seu próprio site.

Uma peculiaridade conhecida: quando um ICO e um SVG estã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 do iPadOS, o Safari usa o apple-touch-icon. Hoje, um único PNG de 180x180 px é suficiente: o iOS o reduz para dispositivos mais antigos e iPads. Nomeie-o como 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 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ê oferecer 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 180x180 sozinho basta. A configuração de máxima compatibilidade abaixo inclui alguns deles, para ficar completa.

Ícones 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 (raio igual 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 não apareçam lacunas após a aplicação da 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.

Tiles do Windows e browserconfig.xml

O Windows 8.1 e o 10 permitem que os usuários fixem um site no menu Iniciar, e o IE11 e o Edge legado leem as imagens dos tiles em 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 normais, portanto este é um recurso legado. Inclua-o apenas 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ço ou na barra de título. Ela não é um favicon, mas pertence ao 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. máxima compatibilidade

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

Cinco arquivos cobrem mais de 99% do uso no mundo real: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) e os dois ícones do manifesto (192 e 512). Adicione o PNG de 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 máxima compatibilidade

Escolha esta opção quando atender um público amplo ou corporativo, ou quando quiser cobrir todos os clientes possíveis. Ela adiciona tamanhos PNG explícitos, tamanhos legados da Apple, tiles 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 relativamente à 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 garanta que corresponda às dimensões reais em pixels. Um arquivo marcado como 32x32 que na verdade tem 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 mudança de marca, o ícone antigo pode persistir por dias. Altere 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 recebe barras de forma imprevisível. Crie uma marca quadrada dedicada, como uma inicial ou um símbolo, em vez de reduzir um logotipo horizontal.

5. Apple touch icons transparentes que ficam 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 os ícones para rastreadores

Se o robots.txt proibir o caminho do seu favicon, o Google não consegue buscá-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 de vez em quando, então as mudanças podem levar dias ou semanas para aparecer.

8. Esquecer o link do manifesto ou os purposes

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 de desenvolvedor do 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, tiles 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 formato 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. Garanta que os caminhos sejam relativos à raiz e retornem 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 divergentes.
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 feed, clientes de e-mail e navegadores mais 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 do favicon para o Google Search?

O Google exige um favicon quadrado cujo tamanho seja múltiplo de 48 px, no mínimo 48x48. Um PNG de 96x96 é uma escolha segura, e o SVG também é aceito. 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 (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 os formatos de ícone adaptável do Android. Seu conteúdo importante fica dentro de um círculo de 80% de diâmetro no centro, 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 de eu alterá-lo?

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. Os mecanismos de busca podem demorar mais para atualizar a própria cópia.