Tamanhos e formatos de favicon que realmente funcionam

Por que isso ainda é confuso

O favicon tem uma das histórias mais longas e confusas entre os recursos da web. Ele surgiu em 1999 como um único arquivo .ico de 16×16 que o Internet Explorer procurava em /favicon.ico, sem precisar de uma tag HTML. Todas as plataformas que vieram depois — ícones da tela inicial do iOS, ícones adaptativos do Android, blocos fixados do Windows, manifestos de PWA — acrescentaram suas próprias convenções em vez de substituir a antiga, porque alterar o comportamento original quebraria todos os sites existentes. O resultado é uma especificação que nunca foi reorganizada, apenas ampliada, e a maioria das listas de tamanhos que circulam na web foi copiada de uma época em que mais dessas extensões realmente importavam.

Os navegadores modernos também ficaram muito melhores em trabalhar com o que você fornece. Chrome, Firefox e Safari conseguem usar um único ícone escalável e gerar a renderização pequena da aba a partir dele. A longa lista de verificação é uma proteção para casos legados, não uma exigência atual, e a maior parte pode ser ignorada com segurança em um site típico.

O conjunto que realmente atende ao uso real

Três arquivos, na prática, atendem à grande maioria dos navegadores e dispositivos:

• favicon.ico, contendo uma imagem de 32×32 — ainda é a alternativa que todo navegador verifica na raiz do site por padrão, mesmo sem <link> tag presente. O formato de contêiner .ico pode tecnicamente conter várias resoluções, mas uma única imagem de 32px dentro dele basta para o uso dos navegadores hoje.
• Um PNG de 180×180 como apple-touch-icon — o que o iOS usa quando alguém adiciona seu site à tela inicial. O iOS não lê favicon.ico para essa finalidade; sem esse arquivo, faz uma captura da página, que fica visivelmente pior como ícone da tela inicial.
• Um favicon SVG — redimensiona sem distorções para qualquer tamanho de aba e densidade de pixels e aceita a media query de modo escuro abordada abaixo. Navegadores modernos o preferem quando SVG e .ico são declarados.

No head do documento, isso é:

Tudo além desses três — o ícone de PWA de 512px, as variantes de ícones adaptativos do Android, as metatags de blocos do Windows — só importa se você está criando uma PWA instalável ou atendendo especificamente a blocos fixados do Windows. Adicione-os quando essa necessidade existir, não antecipadamente.

Produzir manualmente a parte raster desse conjunto significa exportar a mesma arte em vários tamanhos e empacotar um .ico. Nosso Gerador de favicons faz isso a partir de uma imagem de origem: o favicon.ico, o apple-touch-icon de 180px e os PNGs de 192 e 512 para quando você quiser o manifesto. O SVG ainda precisa vir da sua ferramenta vetorial.

O que cada plataforma realmente solicita

• Abas de navegadores de computador renderizam o ícone em aproximadamente 16×16 pixels CSS, ampliados para telas de alto DPI. Por isso um SVG ou um pequeno PNG bem desenhado importa mais aqui que uma imagem de origem grande — a aba é a menor e mais vista renderização do ícone.
• tela inicial do iOS solicita o apple-touch-icon em 180×180 (isso atende aos iPhones atuais de maior densidade; o iOS reduz para dispositivos mais antigos). O iOS também aplica automaticamente cantos arredondados e, em algumas versões, um brilho sutil — não arredonde previamente os cantos na imagem de origem, ou haverá arredondamento duplo.
• Tela inicial do Android / PWA lê tamanhos de site.webmanifest em vez de uma tag link, normalmente 192×192 e 512×512, e aceita uma variante "maskable" com preenchimento de área segura para que formatos adaptativos de ícones (círculo, quadrado arredondado, gota) não recortem seu design.
• Resultados da busca (o Google, especificamente) exibirá um pequeno favicon ao lado do seu resultado, obtido da mesma forma que o ícone da aba do navegador e renderizado em um tamanho igualmente pequeno.

site.webmanifest: para que serve

A site.webmanifest arquivo é um pequeno documento JSON que descreve seu site como um aplicativo instalável — nome, cor do tema, cor de fundo e uma lista de ícones com tamanhos declarados. É isso que transforma "Adicionar à tela inicial" de um atalho de favorito em algo que parece e inicia como um ícone real de aplicativo no Android. Se você não está criando uma PWA e não precisa dessa possibilidade de instalação, pode dispensá-lo; um site comum com apenas os três arquivos acima funciona bem sem ele. Se adicioná-lo, vincule-o com <link rel="manifest" href="/site.webmanifest"> e faça referência aos ícones por caminho absoluto dentro do JSON.

Criando para ter legibilidade a 16px

O ícone de uma aba de navegador é minúsculo, e a maioria dos favicons falha não por causa do formato do arquivo, mas porque a arte original nunca foi conferida no tamanho real de exibição. Detalhes claros a 512px — um logotipo tipográfico, traços finos, um gradiente com várias faixas visíveis — viram uma mancha cinza a 16px.

• Simplifique para uma forma ou letra dominante. Um único glifo marcante ou uma silhueta de ícone resiste à redução; um logotipo detalhado com vários elementos não.
• Aumente o contraste e simplifique as cores. Duas ou três cores planas têm mais legibilidade em tamanhos minúsculos do que um gradiente, que tende a se misturar em um único tom médio.
• Engrosse os traços finos. Uma linha muito fina que parece boa em tamanho completo pode desaparecer totalmente ao ser reduzida com antisserrilhamento a uma grade de 16px.
• Teste reduzindo de verdade a exportação para 16px e olhando para ela, não avaliando a arte em tamanho completo e presumindo que continuará boa. É a etapa mais ignorada no design de favicons.

Modo escuro

As barras de abas do navegador e os elementos da interface do sistema operacional podem ser escuros ou claros conforme o tema do sistema, e um favicon criado apenas para fundo claro pode desaparecer em uma barra de abas escura (ou vice-versa). Um favicon SVG pode responder a isso diretamente com uma prefers-color-scheme media query dentro do bloco de estilos embutido no próprio SVG, trocando as cores de preenchimento conforme o tema do usuário. Favicons PNG e ICO não fazem isso — são imagens estáticas —, então, se o suporte a modo escuro importa, o favicon SVG não é opcional: é o único formato capaz disso.

Sem isso, escolher um favicon com contraste suficiente tanto sobre um fundo branco quanto sobre um quase preto — normalmente acrescentando um contorno fino ou uma cor de tom médio, em vez de depender de preenchimentos totalmente pretos ou brancos — atende razoavelmente bem à maioria dos casos, sem complexidade adicional.

Por que o favicon não atualiza e como corrigir

Favicons são armazenados em cache de forma especialmente agressiva — os navegadores os tratam como praticamente estáticos e continuam mostrando um ícone antigo por dias ou semanas, mesmo após uma atualização forçada da página, porque a solicitação do favicon não está vinculada à invalidação normal do cache da página como um script ou uma folha de estilos. Três medidas resolvem isso de forma confiável:

1. Altere o nome do arquivo ou adicione uma string de consulta de versão — /favicon.ico?v=2 ou renomear para /favicon-v2.ico força uma nova requisição porque a própria URL mudou.
2. Limpe o cache específico de favicons do navegador, que no Chrome é separado da limpeza geral do cache (chrome://favicon-internals ou a limpeza dos dados de navegação com "imagens e arquivos em cache" selecionados).
3. Dê tempo. Mesmo com uma URL alterada, alguns navegadores e mecanismos de busca rastreiam novamente e atualizam o cache dos favicons no próprio ritmo, e o favicon de um resultado de busca, em especial, pode ficar dias atrás do site publicado.

Perguntas frequentes