Cinco tamanhos cobrem tudo o que está em uso real: 16, 32 e 48 px empacotados dentro de um único favicon.ico, um apple-touch-icon.png de 180 px para a tela inicial do iOS, e PNGs de 192 e 512 px para Android. Essa é a lista inteira. Se um gerador te entrega vinte arquivos e dezoito linhas de markup, a maior parte disso mira navegadores e plataformas que deixaram de importar anos atrás.
Os tamanhos, e para que serve cada um
| Tamanho | Onde fica | O que usa |
|---|---|---|
| 16 px | dentro do favicon.ico | a aba do navegador, desenhada em tamanho real |
| 32 px | dentro do favicon.ico | abas em telas de alta densidade, a barra de favoritos, os ícones fixados na barra de tarefas |
| 48 px | dentro do favicon.ico | atalhos da área de trabalho do Windows, e o tamanho em torno do qual a orientação do Google foi construída |
| 180 px | apple-touch-icon.png | a tela inicial do iOS |
| 192 px | icon-192.png, via manifest | a tela inicial do Android |
| 512 px | icon-512.png, via manifest | telas de abertura do Android e avisos de instalação |
Seis tamanhos, quatro arquivos, porque os três primeiros dividem um mesmo contêiner. Algumas configurações ainda entregam PNGs avulsos de 16 e 32 px junto do .ico. São inofensivos e pesam uns dois kilobytes cada, mas nada quebra sem eles.
Por que um único .ico guarda três imagens
ICO não é um formato de imagem, é um contêiner. Seis bytes de cabeçalho, depois uma entrada de diretório de dezesseis bytes por imagem dizendo qual é o tamanho dela e em que ponto do arquivo ela começa, e depois os dados da imagem. Desde o Windows Vista essas entradas podem ser arquivos PNG completos em vez de bitmaps crus, que é como um .ico de três tamanhos fica na casa dos poucos kilobytes.
O navegador escolhe o tamanho embutido que servir melhor para o espaço em que está desenhando, então um arquivo só cobre tanto o ícone de 16 px da aba quanto o atalho de 48 px da área de trabalho. Uma esquisitice do formato explica a divisão entre .ico e PNG: cada dimensão é guardada em um único byte, e 256 é escrito como zero. 256 px é o teto absoluto, e é por isso que os ícones da Apple e do Android são arquivos PNG separados em vez de mais entradas no mesmo contêiner.
Mantenha o .ico mesmo que você também publique um SVG. Os navegadores pedem /favicon.ico na raiz do site por conta própria, sem nenhuma tag link mandando, então ele continua funcionando quando o seu markup está faltando, foi cacheado de um jeito estranho ou foi removido por alguma coisa no caminho.
Por que a Apple quer 180 e o Android quer 192 e 512
180 px são 60 pontos na densidade 3×, que é o espaço do ícone na tela inicial de um iPhone. Versões antigas do iOS pediam um leque de tamanhos — 57, 72, 76, 114, 120 e 152 — mas o iOS reduz a partir do maior que encontrar, então um único arquivo de 180 px cobre todos eles. Desenhe até as bordas do quadrado: o iOS aplica a própria máscara arredondada, e um quadrado com os cantos já arredondados acaba arredondado duas vezes.
O Android lê os ícones do manifest do web app em vez das tags link. 192 px é o ícone da tela inicial; 512 px é usado nas telas de abertura e no aviso de instalação. Os dois são obrigatórios se você quiser que o site seja instalável.
Tem uma pegadinha aqui que a maioria dos geradores pula. O Android consegue recortar um ícone instalado em um círculo ou em um squircle, e só faz isso com ícones marcados como "purpose": "maskable" no manifest, com a arte mantida dentro dos 80% centrais para que o corte não a coma. Um ícone sem essa marca é colocado sobre um fundo liso em vez de preencher a forma. Se isso importa para você, adicione margem à imagem de origem e edite o manifest na mão: nenhum gerador consegue adivinhar que parte do seu logo é descartável.
Os tamanhos que você pode parar de gerar
A cola de vinte arquivos de favicon já foi um conselho de verdade. A maior parte dela envelheceu mal:
- O zoológico de apple-touch-icon — 57, 72, 76, 114, 120 e 152 px, cada um com seu gêmeo
-precomposed. Um único arquivo de 180 px substitui os doze. - O conjunto de blocos do Windows —
mstile-*.pngmais umbrowserconfig.xml, para os blocos fixados na tela inicial do Windows 8 e 10. Essa interface acabou. - O PNG de 96 px, que as colas listavam para o Google TV. Também acabou.
- O ícone de máscara monocromático do Safari para abas fixadas, um SVG de uma cor só com a própria tag
mask-icon. O Safari moderno usa o seu ícone normal.
Apagar isso não te custa nada mensurável. Manter te custa um diretório cheio de arquivos que você vai esquecer de atualizar na próxima vez que o logo mudar, que é a falha de verdade.
O que o Google quer para o ícone nos resultados de busca
A orientação do Google é que o favicon seja um quadrado cujas dimensões sejam múltiplos de 48 px, servido a partir de uma URL estável que ele consiga rastrear. A imagem de 48 px dentro do .ico atende a isso, e é a principal razão para se dar ao trabalho de incluí-la.
O Google reduz a escala do ícone para a linha do resultado, então o que decide se ele ajuda é se ele sobrevive em tamanho de miniatura. O Google também se reserva o direito de ignorar o seu ícone e mostrar um globo genérico: é uma dica, não uma garantia.
Seu logo não vai sobreviver a 16 pixels
Esta é a parte que tamanho nenhum resolve. Um ícone de 16 × 16 tem 256 pixels no total. Uma marca escrita vira textura, um contorno de um pixel some por completo, e qualquer coisa com mais de duas ou três formas vira lama. Os logos que funcionam como favicon já eram simples antes de alguém reduzi-los: uma letra, um símbolo, uma silhueta.
A técnica de reamostragem devolve parte disso. Os navegadores reduzem em um único passo, o que é rápido e produz bordas moles e com aliasing; cortar pela metade várias vezes e dar o último passo de perto segura as bordas de um jeito bem melhor. O gerador de favicon daqui faz essa redução pela metade repetida e escreve o .ico byte a byte no seu navegador, então você tira os seis tamanhos mais o markup de uma única imagem de origem sem subir nada. Ainda assim não vai igualar um ícone de 16 px desenhado à mão com os traços alinhados à grade de pixels. Se o seu favicon importa de verdade, desenhe o pequeno você mesmo e gere o resto.
O outro problema comum é que logos são largos e ícones são quadrados. Alguma coisa tem que ceder: cortar as laterais fora, ou encolher tudo para o meio até virar um borrão. Normalmente a resposta é tirar o símbolo da marca escrita, o que significa cortar para um quadrado antes, para que você controle que parte sobrevive em vez de deixar o modo de ajuste decidir.
Fundo transparente ou sólido?
Transparência parece mais limpa até o exato momento em que o tema do navegador combina com a sua arte. Um logo escuro em fundo transparente some contra uma barra de abas escura, e os navegadores não vão trocar ícones por você.
Duas soluções honestas. Dê ao ícone um fundo sólido para que ele nunca possa se misturar ao fundo da aba — um pouco menos elegante, nunca invisível. Ou publique um favicon SVG com uma media query prefers-color-scheme dentro dele, que os navegadores de desktop atuais respeitam. O suporte a favicons SVG é bom nas versões atuais de Chrome, Edge e Firefox e mais irregular no resto, e navegadores antigos ignoram a tag por completo, então o .ico fica de qualquer jeito como plano B. PNG e ICO lidam com transparência do mesmo jeito que um PNG lida em qualquer lugar, que é a razão de ícones nunca serem JPEG: sem canal alfa, e cor chapada é exatamente o caso que o JPEG trata pior.
Por que o favicon novo não está aparecendo
Porque está cacheado, quase sempre. Os navegadores cacheiam favicons de forma agressiva e em um depósito separado do cache normal da página, então um reload forçado da página muitas vezes deixa o ícone velho ali parado. Abra /favicon.ico direto em uma aba e recarregue isso, ou confira em uma janela anônima, para confirmar que o arquivo novo está mesmo sendo servido.
Se o ícone velho continua lá em uma janela anônima, o problema é o servidor, não o cache. Verifique se os arquivos estão na raiz do site e não em uma pasta de assets, e se os caminhos nas suas tags link começam com barra: um caminho relativo é resolvido de outro jeito em uma página aninhada, que é o tipo de bug que só aparece em uma seção do site.
Se você quer os arquivos e não a explicação, o gerador de favicon transforma uma imagem, ou uma letra e duas cores, no .ico e nos PNGs de todos os tamanhos acima, mais o markup e o manifest para colar. Ele roda no seu navegador, então o logo que você ainda não quer publicar nunca sai da sua máquina.
Ícones são o único lugar onde a regra de sempre, a de servir menos imagens e maiores, vai por água abaixo. Se você está dimensionando o resto da página, as larguras em pixels e as metas de tamanho de arquivo para imagens da web cobre imagens hero, imagens de artigo e miniaturas, onde a aritmética funciona no sentido oposto.
Perguntas frequentes
De quais tamanhos de favicon eu preciso?
Seis tamanhos em quatro arquivos: 16, 32 e 48 px dentro do favicon.ico, um apple-touch-icon.png de 180 px para iOS, e PNGs de 192 e 512 px referenciados por um manifest de web app para Android. Qualquer coisa além disso mira plataformas que não estão mais em uso.
16x16 ou 32x32 é melhor para um favicon?
Nenhum substitui o outro, e é por isso que um favicon.ico guarda os dois. 16 px é o que uma aba do navegador desenha em uma tela padrão e 32 px é o que ela usa em tela de alta densidade, na barra de favoritos e nos ícones fixados da barra de tarefas. Publique um arquivo só com os dois e o navegador escolhe.
Posso usar um PNG em vez de um favicon.ico?
Pode, todo navegador atual aceita um favicon PNG por uma tag link. Mantenha o .ico mesmo assim: os navegadores pedem /favicon.ico na raiz do site sem ninguém mandar, então ele continua funcionando quando o markup está faltando ou quando a página é renderizada por algo que remove as tags do head.
Por que meu favicon parece borrado?
Normalmente porque uma imagem grande foi reduzida direto para 16 px em um único passo, o que amolece todas as bordas. A outra causa é detalhe que não cabe nesse tamanho: um ícone de 16 px tem 256 pixels no total, então traços finos e texto pequeno viram um mingau cinza por mais cuidadoso que seja o redimensionamento.
Favicon afeta o SEO?
Só indiretamente. O Google pode mostrar um favicon ao lado do seu resultado no celular, e a orientação dele pede um quadrado múltiplo de 48 px em uma URL rastreável. Não é um fator de ranqueamento, e o Google pode colocar um ícone genérico no lugar se o seu estiver faltando ou não servir.
Última atualização 19 de setembro de 2026
