Um favicon fica borrado numa aba porque o espaço tem cerca de 16 pixels de largura, ou seja, 256 pixels no total, e um logo desenhado numa tela grande tem mais detalhe do que cabe ali. Exportar mais nítido não adianta. O que adianta é desenhar menos: uma letra ou um símbolo, traços grossos em relação ao ícone e olhar o resultado no tamanho real antes de publicar. Quais arquivos e tamanhos publicar é assunto de o guia de tamanhos de favicon; esta página trata do que vai dentro deles.
Por que um favicon fica borrado na aba?
Acontecem duas coisas, e só uma é culpa do design.
A primeira é aritmética. Uma linha de um pixel de largura em 16 pixels é um dezesseis avos do ícone. Se cair exatamente sobre a grade de pixels, fica nítida; se cair entre duas linhas, como costuma acontecer com uma linha reduzida de um desenho maior, ela se espalha pelas duas com metade da intensidade e parece uma mancha cinza. Curvas e diagonais têm o mesmo problema ao longo de todo o percurso.
A segunda é o redimensionamento. O navegador escolhe uma imagem entre os arquivos que você fornece e a ajusta ao espaço disponível. A MDN descreve a escolha como baseada em media, type e sizes dos candidatos, então qual entrada você recebe é decisão do navegador, não sua. Numa tela de alta densidade, um espaço de 16 pixels costuma ser de 32 pixels do dispositivo, de modo que um arquivo que só contém uma imagem de 16 pixels é esticado e suavizado. Um favicon.ico que também guarda uma imagem de 32 pixels dá ao navegador um ponto de partida melhor, e é por isso que o gerador de favicon escreve imagens de 16, 32 e 48 pixels num único arquivo. Uma escala de tela fracionária, como 125 ou 150 por cento num sistema operacional, pode forçar uma reamostragem mesmo com os tamanhos certos, então um pouco de suavidade em algumas telas nem sempre dá para corrigir.
O que sobrevive a 16 pixels?
São regras práticas que vêm de como os pixels se comportam, não um padrão:
- Uma forma ou um caractere. Duas ou três formas simples são o teto antes de o ícone virar textura.
- Traços de pelo menos um nono da largura, ou seja, dois pixels ou mais em 16. Qualquer coisa mais fina depende de cair exatamente na grade.
- Uma forma preenchida em vez de um contorno. Um quadrado ou círculo sólido mantém as bordas quando tudo o que há dentro de um contorno já se dissolveu.
- Duas cores, com uma diferença forte entre elas. Degradês e sombras suaves viram faixas.
- Um pouco de espaço nas bordas. A própria dica do gerador diz que respiro ajuda um logo carregado a 16 pixels e que demais o faz sumir, então é uma troca e não uma regra.
Um teste rápido antes de qualquer programa: semicerre os olhos olhando o logo à distância de um braço, ou reduza-o na tela até virar uma miniatura. O que ainda dá para reconhecer é o favicon. O que sumiu era decoração e não deveria estar no ícone.
Por que uma marca escrita falha onde uma forma única funciona?
Uma marca escrita gasta a largura em letras. Quatro letras em 16 pixels deixam cerca de quatro pixels para cada uma, e os vazios dentro de um e ou de um a, as contraformas, têm no máximo um pixel, então se preenchem e as letras se fundem na mesma mancha. Uma forma única recebe os 16 pixels inteiros e pode ser sólida.
A resposta habitual é pegar a primeira letra, ou o símbolo do logo, e usar só isso. O modo de letra do gerador segue a mesma lógica: coloca um caractere a 62 por cento do tamanho do ícone, dois a 50 por cento e três a 40 por cento, e a própria dica dele chama três caracteres de mancha a 16 pixels. Se o nome da sua marca começa com uma letra parecida com muitas outras, um símbolo geométrico simples servirá melhor que uma letra.
O contraste importa tanto quanto a forma, porque você não controla a barra de abas atrás do ícone. Um glifo escuro sobre fundo transparente some num tema escuro do navegador. Um fundo de cor sólida dentro do ícone protege disso. O verificador de contraste mede duas cores uma contra a outra; o 3:1 da WCAG para objetos gráficos é uma referência razoável para a forma contra o preenchimento, embora esse critério tenha sido escrito para o conteúdo da página, não para a moldura do navegador. O guia da razão de contraste explica de onde vem o número.
Como testar um ícone no tamanho real?
- Olhe o arquivo de 16 pixels, não a prévia grande. O gerador lista o PNG de 16 por 16 com a imagem em tamanho real. Julgue por essa linha, não pela versão de 512 pixels, que sempre vai parecer boa.
- Confira os dois temas do navegador. Abra uma janela privada com um tema claro e outra com um escuro. Um ícone que some em qualquer um dos dois precisa de fundo.
- Coloque numa aba de verdade. Suba os arquivos, abra a página e olhe a aba ao lado das de outros sites. Os favicons ficam num cache separado do da página, então use uma janela privada para ver o que o servidor envia agora; o checklist de favicon percorre isso passo a passo.
- Tente uma segunda tela. Um celular ou notebook com outra densidade de pixels mostra a versão redimensionada que seu monitor principal pode esconder.
- Peça para alguém achar. Abra cinco abas e peça a um colega que aponte a sua. Se ele hesitar, a forma não é distinta o bastante.
O que o gerador pode e não pode resolver
O gerador pega uma única fonte, uma imagem ou uma letra, e a redimensiona para todos os tamanhos. Com uma imagem, ele a reduz pela metade repetidamente até chegar perto do tamanho final e dá o último passo a partir dali, o que mantém as bordas melhor que um único redimensionamento, e oferece margem interna e fundo sólido. É só isso que ele faz com a arte.
Ele não simplifica um logo por você e não desenha uma versão separada de 16 pixels. Se o ícone importa, redesenhar o tamanho pequeno à mão, com os traços alinhados à grade, vence qualquer redução automática; a ferramenta não consegue fazer isso, e um .ico feito à mão teria de ser publicado como arquivo seu. No modo de letra, os PNGs usam uma fonte de sistema em negrito do seu aparelho, então o desenho das letras depende do que o seu computador tem, e o SVG opcional nomeia uma fonte em vez de embuti-la, podendo aparecer diferente em outro equipamento. Nada no .ico se adapta a um tema escuro; só um ícone SVG com uma regra de esquema de cores consegue isso, e a ferramenta não escreve nenhum. Os arquivos são montados no seu navegador, então o logo não é enviado a lugar nenhum.
Para ver como a sua própria marca se sai, coloque-a no gerador de favicon e olhe primeiro a linha de 16 pixels. Se ela se lê ali, os tamanhos maiores se resolvem sozinhos.
Uma fonte vetorial facilita a simplificação, porque você pode redimensionar e editar sem perder nada; por que um logo deveria ser um SVG explica o motivo.
Perguntas frequentes
Por que meu favicon fica borrado na aba do navegador?
O espaço da aba tem cerca de 16 pixels de largura, então linhas finas, texto pequeno e detalhes de um logo maior não podem ser desenhados com limpeza. Em telas de alta densidade, além disso, um arquivo que só contém uma imagem de 16 pixels é esticado. Simplifique a arte para uma forma sólida e inclua uma imagem de 32 pixels no .ico.
O que um favicon deve conter: meu logo inteiro ou só uma parte?
Só uma parte, normalmente uma letra ou um símbolo. Um logo inteiro com texto tem mais detalhe do que cabe em 256 pixels, então as letras se fundem numa mancha. Escolha o único elemento que as pessoas já reconhecem e deixe-o preencher o ícone.
Qual deve ser a espessura das linhas de um favicon?
Não existe um padrão, mas como regra prática mantenha os traços em cerca de dois pixels ou mais num ícone de 16 pixels. Uma linha de um pixel só fica nítida se cair exatamente na grade, e uma linha reduzida de um desenho maior raramente cai. Formas preenchidas evitam o problema.
Por que meu favicon some num tema escuro do navegador?
Um ícone escuro sobre fundo transparente quase não tem contraste com uma barra de abas escura, e um .ico comum não muda com o tema. Dê ao ícone uma forma de fundo sólida numa cor que se destaque tanto em barras claras quanto escuras, e confira em cada tema.
Última atualização 2 de novembro de 2026
