Bhinish Dhiman3 de outubro de 2026

Tamanhos de favicon: de quais arquivos você realmente precisa e como criá-los

Traduzido do original em inglês. Ler o original

Você precisa de um favicon.ico com imagens de 16, 32 e 48 pixels, PNGs de 180 pixels para a tela inicial do iOS e de 192 e 512 pixels para o Android, via web manifest, e quatro linhas no head. Gere tudo a partir de um original de pelo menos 512 pixels e depois confira a versão de 16 pixels: ela tem 256 pixels no total, então um logotipo escrito ou traços finos não vão sobreviver.

Os geradores de favicon mais antigos entregam uns vinte e poucos arquivos. A maioria serve para imagens de bloco do Windows e tamanhos antigos da Apple que nada atual lê. O conjunto que ainda importa é pequeno, e a pergunta difícil não é quais tamanhos exportar, mas se a sua marca sobrevive ao menor deles.

Duas definições

Favicon é o pequeno ícone que o navegador mostra na aba, nos favoritos e na tela inicial. Entre os ativos de marca, ele é incomum por ser desenhado em 512 pixels e visto, quase sempre, em 16.

PNG-in-ICO é um arquivo .ico cujas imagens são guardadas como dados PNG, e não como bitmaps. Isso é válido desde o Windows Vista e mantém o arquivo pequeno.

Os arquivos, e o que lê cada um

Este é o conjunto que a ferramenta gera, com o nome que cada arquivo tem no download:

Arquivo	Tamanho em pixels	Quem usa
`favicon.ico`	16, 32 e 48, dentro de um único arquivo	Solicitado por padrão na raiz do site, e por vários crawlers e leitores de feed
`icon-16.png`	16	A aba do navegador, o tamanho que quase todo mundo de fato vê
`icon-32.png`	32	Uma aba em tela de alta densidade, e a barra de tarefas do Windows
`icon-48.png`	48	Atalhos de sites no Windows
`apple-touch-icon.png`	180	Um favorito na tela inicial do iOS
`icon-192.png`	192	A tela inicial do Android, via web manifest
`icon-512.png`	512	A tela de abertura e o aviso de instalação, via web manifest
`site.webmanifest`	Nenhum	Lista os ícones de 192 e 512 com o nome do seu site
`head.html`	Nenhum	As quatro linhas para o head da sua página

Vale a pena incluir o ICO, mesmo que os navegadores modernos usem um PNG declarado numa tag link. Um favicon.ico na raiz continua sendo solicitado por padrão, então deixá-lo de fora gera um fluxo constante de erros 404.

Mantenha os tamanhos pequenos em PNG. Converter um ícone de 16 pixels para WebP o deixou maior, não menor, nas nossas medições: 332 bytes em PNG, 718 bytes em WebP, um aumento de 116.3%, porque o custo fixo do contêiner WebP não tem como se pagar em 256 pixels. Os detalhes estão em quanto se economiza convertendo PNG para WebP, medido.

O trecho do head

Estas são as quatro linhas que a ferramenta escreve, exatamente:

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

Todos os caminhos começam com barra, então os arquivos vão na raiz do site, ao lado da página inicial. Os PNGs de 16, 32 e 48 pixels não aparecem na lista: as imagens deles são o que o ICO contém, e eles vêm no download como arquivos separados caso você precise.

O manifest que a ferramenta escreve, com o nome de site padrão, é este:

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

Gere o conjunto com a ferramenta

Abra o Favicon generator e solte a sua marca na caixa, ou clique nela para escolher um arquivo. Ele aceita PNG, JPEG ou SVG, de 512 pixels ou mais, de preferência quadrado. Um original que não é quadrado é encaixado dentro do quadrado, não cortado.
Leia a verificação antes de qualquer outra coisa. Ela mostra três números: Detail kept at 16px (detalhe mantido em 16px), On a light tab (numa aba clara) e On a dark tab (numa aba escura). Logo abaixo, o ícone de 16 pixels aparece em tamanho real sobre uma aba de cor clara e sobre uma escura.
Leia os avisos em vermelho embaixo dos números, se houver. Se não houver nenhum, o painel diz que o ícone se sustenta em 16 pixels e aparece bem nas duas faixas de abas.
Percorra a lista de tamanhos. Cada linha mostra o ícone, o tamanho, para que ele serve e o tamanho do arquivo.
Digite o nome do seu site em Site name, for the manifest (nome do site, para o manifest).
Pressione Download everything as .zip para baixar os nove arquivos, e Copy the markup para copiar o trecho do head.

O que 16 pixels fazem com um logo

A aritmética não perdoa. Um ícone de 16 pixels tem 16 × 16 = 256 pixels no total. Um original de 512 pixels tem 512 × 512 = 262 144. Cada pixel da aba representa 262 144 ÷ 256 = 1 024 pixels da sua arte. Um logotipo de três letras fica com cerca de 85 pixels por letra depois de descontados os espaços entre elas, o que não basta para desenhar uma letra.

O número de detalhe mede quanto disso sobrevive. A ferramenta desenha a sua marca em 128 pixels e em 16, conta quantos níveis distintos de brilho aparecem em cada versão (ignorando pixels transparentes) e informa a contagem de 16 pixels como porcentagem da de 128. Abaixo de 45%, ela avisa que o ícone vai ser lido como uma forma colorida, e não como a sua marca. Não julgue isso só pela prévia: em 16 pixels, o seu olho completa o que sabe que está lá.

Se o número despencar, mude a marca, não a exportação. Uma única letra, um fragmento recortado do logo ou uma silhueta simplificada sobrevivem onde o logo completo não sobrevive. Nenhuma configuração de exportação recupera detalhe a partir de 256 pixels.

Há mais um aviso para observar. Se o seu original tiver menos de 512 pixels, o arquivo de 512 pixels é ampliado a partir dele e vai parecer borrado. Use pelo menos 512 pixels, ou um SVG.

A armadilha da aba escura

Uma marca que aparece perfeitamente num navegador claro pode sumir no modo escuro. A ferramenta calcula a cor média dos pixels visíveis da sua marca, mede essa cor contra uma faixa de abas clara (#F2F2F2) e uma escura (#202124) e avisa se alguma das duas ficar abaixo de 1.6:1.

Uma marca preta mostra o problema por inteiro. O preto tem luminância relativa 0; a da faixa clara é 0.8879 e a da faixa escura, 0.0152. Contra a faixa clara, isso dá (0.8879 + 0.05) ÷ (0 + 0.05) = 18.76:1, o máximo de nitidez possível. Contra a faixa escura, dá (0.0152 + 0.05) ÷ 0.05 = 1.30:1, abaixo da linha de aviso, e o ícone praticamente desaparece.

Ver os dois números lado a lado é o que torna o problema visível antes de ir para o ar. Dar à marca um quadrado de fundo sólido próprio é uma forma de impedir que ela dependa da cor da aba; mude o original e solte-o de novo para ver os números mudarem.

Outras formas de fazer

Não existe gerador de favicon nativo no macOS nem no Windows. No Mac, o menu Tools → Adjust Size (Ferramentas → Ajustar Tamanho) do Preview redimensiona uma imagem, então você pode criar cada tamanho de PNG a partir de uma cópia do original, um de cada vez. Isso deixa o ICO, o manifest e o markup do head para outra ferramenta, e não oferece nenhuma verificação em 16 pixels.

Como confirmar que nada foi enviado

Cada tamanho é desenhado num canvas no seu navegador, e o zip é montado ali mesmo. O código que monta o zip é buscado na primeira vez que você pressiona o botão de download, o que aparece no painel Network das ferramentas de desenvolvedor como um script chegando; nada sai com a sua imagem. Você também pode carregar a página, se desconectar e soltar a sua marca: a verificação e as prévias continuam aparecendo.

Próximo passo

Solte a sua marca no Favicon generator e leia o número de detalhe antes da prévia. Se o seu original for um SVG saído direto de uma ferramenta de design, passe-o antes pelo SVG optimiser.