Favicons: que tamanhos precisa realmente em 2026

Comece pelos consumidores, não pela lista de ficheiros

Um ícone de sítio acaba em exatamente cinco lugares, e cada um lê uma coisa concreta. O separador e a barra de favoritos leem o que o head declara como rel="icon", preferindo um vetorial se o oferecer. Tudo o que adivinha — navegadores antigos, leitores de feeds, geradores de pré-visualização de ligações, uma quantidade surpreendente de ferramentas internas — pede /favicon.ico na raiz do sítio, sem qualquer marcação. O ecrã inicial de iOS e iPadOS lê apple-touch-icon.png. O ecrã inicial Android e o aviso de instalação do Chrome leem o array icons do manifesto de aplicação web. É a lista completa de consumidores, e não cresceu há anos.

Releia essa lista e repare no que falta. Não há consumidor nenhum que queira 57 píxeis, nem 70, nem 114, nem 144, nem 310. Esses números vêm de uma matriz histórica concreta: os mosaicos de sítios afixados do Internet Explorer, uma década de aparelhos iOS anteriores a o sistema saber reduzir um só ficheiro, e uma geração de lançadores Android anterior ao manifesto. Esses três consumidores desapareceram. Deles resta saída de gerador — uns vinte e tal PNG e um browserconfig.xml — pousada na raiz de sítios cujos donos não fazem ideia de qual desses ficheiros ainda é lido por alguma coisa.

O conjunto mínimo, e o que custa o máximo

Construímos os dois, a partir de uma só marca de 512 × 512, e pesámo-los. O conjunto mínimo é favicon.ico com 1 664 bytes, icon.svg com 254 bytes, apple-touch-icon.png a 180 × 180 e 13 573 bytes, icon-192.png com 14 510 bytes e icon-512.png com 27 390 bytes: cinco ficheiros, 57 391 bytes. A matriz herdada — a mesma marca exportada a 16, 24, 32, 36, 48, 57, 60, 70, 72, 76, 96, 114, 120, 128, 144, 150, 152, 167, 180, 192, 196, 228, 256, 310, 384 e 512 — são 26 ficheiros e 272 192 bytes, antes do ICO e dos dois ficheiros de configuração. São 4,7 vezes os bytes e cinco vezes os ficheiros para exatamente zero cobertura adicional.

O total em bytes é o menos interessante, porque um visitante nunca descarrega tudo. Numa visita normal o navegador pede o ícone do separador e mais nada: o nosso ICO mais o nosso SVG são 1 918 bytes, e um navegador que leve o SVG pede 254. O apple-touch-icon e os ícones do manifesto só são pedidos quando alguém instala mesmo o sítio ou o junta a um ecrã inicial. O que o número de ficheiros custa a sério é manutenção: 26 ficheiros matriciais para regenerar, de forma coerente, sempre que a marca muda, e que ninguém irá verificar.

SVG no separador: quase em todo o lado agora, ainda não em todo o lado

Um ícone de separador vetorial é a melhor mudança que pode fazer, porque elimina toda a questão de que tamanhos matriciais publicar: o navegador pede o que precisa e o motor de renderização produz. Chrome e Edge leem SVG em rel="icon" desde a versão 80, Firefox desde a 41. O Safari foi o retardatário — durante anos suportou apenas o seu formato monocromático de separador afixado — e o Safari 26 é a primeira versão a desenhar um favicon SVG comum em separadores e favoritos. As tabelas de suporte colocam o valor combinado em cerca de 89 % do tráfego mundial, e sobe à medida que as instalações de Safari se atualizam.

Esses últimos 11 % são a razão para manter o ICO. Não está lá para o separador; está porque /favicon.ico é um caminho pedido sem qualquer marcação, por navegadores demasiado antigos para SVG e por toda a ferramenta não-navegador que quer um ícone de sítio e não analisa HTML. Basta uma entrada de 32 × 32. Mantenha-o na raiz, não numa pasta de recursos, porque os clientes que o pedem por convenção não vão ler o seu elemento link para saber para onde o mudou.

O que faz sizes="any" e porque esse conselho mudou

No padrão HTML o atributo sizes é uma pista: uma lista de valores largura por altura separados por espaços que diz ao navegador o que a recurso contém, mais a palavra-chave única any, que declara que o recurso é escalável — um vetorial. O navegador é livre de a usar ou ignorar. Não é uma instrução de renderização, e pôr sizes numa imagem não redimensiona nada.

O conselho que encontrará por todo o lado — pôr sizes="any" no ICO — nunca teve a ver com essa definição. Era um contorno a um comportamento do Chrome: perante um ICO e um SVG, o Chrome descarregava os dois e usava o ICO, pelo que se declarava o ICO como «any» para o empurrar para o SVG. Funcionava, mas afirma algo falso sobre o ficheiro. A recomendação atual das mesmas pessoas que popularizaram o truque é declarar o ICO honestamente como sizes="32x32": resolve o mesmo descarregamento duplo e não mente sobre o que está no ficheiro. Se copiou um excerto de favicon antes de cerca de 2023, é esta a linha a atualizar.

Um ícone de 16 píxeis não é um ícone de 512 reduzido

É aqui que a lista de ficheiros não ajuda. Uma tela de 512 × 512 tem 262 144 píxeis. Uma de 16 × 16 tem 256 — um milésimo vigésimo quarto. Cada traço da sua marca tem de sobreviver a ser promediado dentro desse orçamento, e promediar é exatamente o que o antisserrilhado faz: um filete mais fino do que um píxel de saída não se torna uma linha fina, torna-se um tom ténue espalhado pelos píxeis que cobre em parte.

Medimo-lo numa marca: uma letra a negrito, um logótipo composto a 52 píxeis, uma assinatura a 24 e um anel branco de 8 píxeis, tudo numa tela de 512. A marca contém 407 cores distintas a 512 e 85 a 16. Medindo o contraste de luminância que resta a cada traço — a diferença entre o píxel mais claro e o mais escuro —, a letra a negrito passa de 199,4 níveis a 512 para 188,0 a 16: sobrevive, com 94 % do contraste. O logótipo passa de 199,4 para 86,4 — 57 % perdidos. A assinatura passa de 199,4 para 29,1 — 85 % perdidos. A essa altura já não é texto pequeno, é uma barra cinzenta.

O anel é o caso mais nítido, porque podemos seguir uma só linha de varrimento através dele. No original de 512 o traço do anel dá branco puro, luminância 255 sobre um fundo de 56 — um contraste de 199. A 192 continua em 255. A 48, onde o traço de 8 píxeis desce a 0,75 de um píxel de saída, o seu ponto mais claro só chega a 159. A 32 chega a 121. A 16, onde o traço tem um quarto de píxel, o ponto mais claro de todo o anel está em 99 sobre um fundo de 52: um contraste de 47, contra 199. Três quartos da presença do anel desapareceram, e nenhuma nitidez na caixa de exportação os traz de volta — a informação está abaixo da grelha de amostragem.

A consequência prática é uma regra de desenho, não de ficheiros: a 16 píxeis uma marca aguenta uma forma grossa e mais nada. Se o seu logótipo é uma palavra composta, o favicon é a primeira letra ou o símbolo, não a palavra. Se tem um filete, engrosse-o ou tire-o. Desenhe uma versão simplificada à parte para os tamanhos pequenos se lhe importa o separador — e, se sim, esse é o único caso em que desenhar à mão um raster de 16 e de 32 píxeis vence a decisão de um redutor.

Os dois ficheiros que não são favicons de todo

O apple-touch-icon e os ícones do manifesto acabam metidos nas listas de favicons, mas são ícones de aplicação e comportam-se como tal. O apple-touch-icon tem 180 × 180, que é o ícone iOS de 60 pontos a densidade 3×, e o iOS reduz esse ficheiro único para todos os outros aparelhos — a velha escada de 57, 72, 76, 114, 120, 144 e 152 é desnecessária. Duas coisas importam: o iOS aplica a sua própria máscara de retângulo arredondado, pelo que uma marca ao corte perde os cantos; e o iOS não mantém a transparência aqui, pelo que um fundo transparente é achatado por si, e não necessariamente na cor que teria escolhido.

Os ícones do manifesto são o que o Chrome verifica antes de propor a instalação: quer uma entrada de 192 e outra de 512 píxeis, e sem ambas o aviso de instalação simplesmente nunca aparece, sem erro em lado nenhum. Acrescente uma terceira entrada de 512 × 512 com purpose em maskable se quiser que os lançadores Android recortem o ícone em círculo ou em squircle sem cortar o seu desenho — a zona segura é então um círculo central de 409 píxeis na tela de 512, cerca de 80 % da largura, e tudo o que ficar fora pode ser mascarado.

Perguntas frequentes

Ainda preciso de um favicon.ico se publicar um SVG?

Sim, e custa quase nada — 1 664 bytes para uma só entrada de 32 × 32 no nosso teste. A sua função não é o separador. A sua função são os pedidos que chegam sem marcação: navegadores anteriores ao Chrome 80 ou ao Safari 26, leitores de feeds, geradores de pré-visualização e ferramentas internas que pedem /favicon.ico por convenção. Ponha-o na raiz do sítio, porque esses clientes não vão ler o seu elemento link para o encontrar noutro lado.

O meu ICO deve conter versões de 16, 32 e 48 píxeis?

Não de forma útil. Construímos os dois: uma só entrada de 32 × 32 deu 1 664 bytes, e juntar 16, 32 e 48 num ficheiro deu 5 188 — mais do triplo. Os clientes que ainda leem o ICO são os menos propensos a serem exigentes com a entrada que recebem, e a redução moderna de 32 para 16 é boa. Invista antes o esforço no desenho a 16 píxeis, que é o que de facto se vê.

Um favicon SVG pode mudar de cor em modo escuro?

Pode, e é uma das verdadeiras vantagens do ficheiro vetorial. Um favicon SVG pode conter um bloco de estilo, e uma consulta de media prefers-color-scheme lá dentro será respeitada pelos navegadores que desenham o SVG, pelo que um separador em modo escuro pode receber uma marca mais clara sem um segundo ficheiro. Mas não construa nada essencial em cima disso: o recurso ICO não o consegue fazer, nem o apple-touch-icon nem os ícones do manifesto.

Porque é que o Chrome nunca propõe instalar o meu sítio?

A causa mais frequente é um manifesto sem um ícone de 192 e outro de 512 píxeis. O Chrome verifica esses dois tamanhos nos seus critérios de instalabilidade, e quando falta um não avisa — o botão de instalação simplesmente nunca aparece. Veja o painel de aplicação das ferramentas de programação: lista o manifesto tal como foi analisado e diz que requisito falhou.

Posso simplesmente exportar o ficheiro de 512 em todos os tamanhos menores e ficar por aí?

Pode, e para os ficheiros de 180, 192 e 512 píxeis é exatamente o correto: são suficientemente grandes para conter tudo. É no extremo dos 16 e 32 píxeis que a redução automática deixa de chegar. Na nossa marca de teste a pequena assinatura perdeu 85 % do contraste a 16 píxeis e o anel fino perdeu 76 %, pelo que o ícone que chega ao separador é um borrão das formas pretendidas. Ou simplifica o desenho para esses tamanhos, ou aceita que o separador mostra uma só forma grossa.