Como fazer um favicon que não fica borrado em telas Retina

Um único favicon.ico pequeno já bastou para a web inteira. Faz anos que não basta mais, e tratá-lo como suficiente é o motivo de tantos ícones parecerem borrados.

Por PulsarKit · Publicado em 8 de setembro de 2026 · Atualizado em 16 de outubro de 2026

Um único arquivo de ícone pequeno nunca daria conta de todas as telas

Uma aba do navegador, um atalho na tela inicial do celular e o ícone de um aplicativo na tela de alta densidade de um notebook pedem, cada um, um tamanho diferente em pixels. Um único ícone pequeno esticado para caber em todos eles fica nítido em um desses lugares e sem nitidez em todos os outros. O tradicional favicon.ico, que os navegadores ainda pedem na raiz do site, continua fazendo parte da resposta. Só que ele foi criado para uma web em que as telas tinham uma resolução muito menor que a de hoje, e nunca foi pensado para ser o único arquivo envolvido.

Por que um conjunto completo de ícones tem tantos arquivos separados

Um conjunto bem-feito, como o que o Gerador de favicon cria a partir de uma única imagem de origem, atende a vários usos ao mesmo tempo, e não só a vários tamanhos de um mesmo uso. Há arquivos PNG de 16 e 32 pixels para as abas do navegador em densidade de pixels normal e alta, um ícone de 180 pixels para quando alguém adiciona o site à tela inicial do iPhone, e ícones de 192 e 512 pixels que o manifesto de um app web progressivo precisa referenciar antes que o app possa sequer ser instalado. Cada tamanho está ali porque algo pede exatamente esse tamanho. Não é redundância por capricho. Pule um deles e aquele lugar específico passa a mostrar um substituto mais borrado, ou nada.

O único arquivo que, de propósito, não pode ficar transparente

Quando alguém adiciona um site à tela inicial do celular, o iOS não coloca o ícone transparente sobre um fundo que faça sentido. Ele preenche cada área transparente com preto sólido, e um logotipo limpo sobre fundo transparente vira um quadrado escuro e feio no instante em que chega à tela inicial. O ícone destinado a esse lugar precisa ter a transparência trocada por uma cor de fundo real com antecedência, de propósito, em vez de ficar transparente como os outros tamanhos do conjunto. Todos os outros ícones podem manter a transparência onde a imagem de origem a tiver, porque uma aba do navegador ou um atalho na área de trabalho a exibe corretamente.

Por que um original vetorial gera um ícone de 16 pixels mais nítido

Um logotipo feito em SVG (um logotipo simples em bitmap pode ser vetorizado com PNG para SVG) pode ser renderizado do zero em cada tamanho final a partir das formas vetoriais, em vez de ser gerado uma vez em tamanho grande e depois reduzido repetidamente para cada variante menor. A diferença aparece mais no menor tamanho do conjunto. Um logotipo reduzido a partir de um único bitmap mestre grande tende a virar uma mancha disforme em 16 pixels, e os traços finos e os detalhes delicados desaparecem. Uma versão renderizada a partir dos caminhos vetoriais nesse mesmo tamanho pequeno mantém os traços nítidos, porque nunca foi uma imagem maior sendo encolhida. Ela foi desenhada nesse tamanho desde o início, e é também por isso que um ícone avulso renderizado manualmente passa pelo SVG para PNG, com as dimensões exatas em pixels, e não por um redimensionador de imagens. Em um logotipo com letras finas ou um contorno delicado, essa é a diferença entre um ícone que você reconhece na barra de abas e uma mancha cinza.

O ícone “maskable” existe porque o Android não respeita o formato do ícone

O Android recorta o ícone de um app instalado no formato que o aparelho ou o launcher escolheu: um círculo, um quadrado arredondado, um “squircle”. Faz isso sem levar em conta o formato com que o ícone foi desenhado, e um ícone quadrado comum pode perder conteúdo importante bem nas bordas, dependendo só do formato que calhou de ser aplicado. Um ícone maskable evita esse problema mantendo todo o conteúdo que importa dentro de mais ou menos os oitenta por cento centrais da imagem. Isso deixa uma margem de segurança em volta de cada borda, que qualquer formato pode cortar sem perder nada que importava no design.

Erros comuns: um original pequeno e um conjunto que a página nunca referencia

Um conjunto de ícones borrado raramente nasce no gerador. Todos os tamanhos saem de uma imagem mestre de 512 pixels, então qualquer original menor é esticado até chegar lá, e um com menos de uns 260 pixels precisa ser ampliado para o dobro do tamanho ou mais, o que deixa os tamanhos grandes sem nitidez. Comece de pelo menos 512 por 512 ou, melhor ainda, de um SVG; um original com menos de 32 pixels é recusado de cara. A segunda decisão é como um logotipo que não é quadrado vira quadrado: recortar a partir do centro mantém a marca grande, mas pode cortar um logotipo largo com texto; já encaixar a imagem inteira e preencher as laterais com uma cor deixa tudo visível, ao custo de uma marca menor. Para um logotipo muito mais largo do que alto, uma versão quadrada só com o símbolo costuma ser um original melhor que o logotipo completo, com símbolo e nome. O terceiro erro acontece depois de gerar. Os oito arquivos, nove com o ícone maskable, vão na raiz do site, e as tags de head-snippet.html vão no head de cada página; se os arquivos ficarem em uma subpasta, edite os valores href do trecho para que batam, senão as tags apontam para arquivos que não estão lá. Por fim, confira o ícone de 16 pixels em uma aba de navegador de verdade, e não em um visualizador de imagens: nesse tamanho, um contorno fino ou um logotipo de texto vira uma mancha cinza, e a solução é uma marca mais simples, não uma exportação mais nítida.

Ferramentas usadas neste artigo

Gerador de faviconTransforme um logo no conjunto completo de favicons: PNG em todos os tamanhos, um ICO com vários tamanhos, o manifest.json e as tags HTML para o head.

PNG para SVGVetorize um PNG em um SVG escalável no seu navegador. Serve para logotipos e ícones chapados com poucas cores, não para fotografias.

SVG para PNGConverta arquivos SVG para PNG em qualquer escala ou em um tamanho exato em pixels, no seu navegador. Scripts e links externos são removidos antes de o desenho começar.