Converter PNG para ICO

Quase todo mundo que converte PNG em ICO está fazendo um favicon. Faz quase trinta anos que o navegador pede `/favicon.ico` na raiz de qualquer site, e ele continua pedindo independentemente do que o seu HTML declare — ter o arquivo lá corta uma fileira de 404 no log e cobre as ferramentas que não procuram em outro lugar.

A marcação moderna também aponta para um PNG ou um SVG, e a maioria dos sites publica os dois. O ICO é o que funciona sem precisar ser declarado.

Uma embalagem, não um formato de compressão — por isso esta conversão não perde nada que importe. A sua imagem fica guardada lá dentro como PNG, uma por tamanho, com o canal alfa inteiro, então um logotipo arredondado ou uma marca com os cantos vazados continua exatamente assim.

É também por isso que o arquivo continua pequeno. Nada é recalculado: na frente das imagens entra um índice que diz quais tamanhos estão ali.

Uma restrição vem do formato e é rígida: um ícone para em 256 pixels, e o que for maior é reduzido. O byte que guarda o tamanho em cada entrada do índice do ICO é um só, e 256 é escrito como zero justamente por não caber nele.

Abaixo desse teto quem escolhe é você. O controle "Tamanhos de ícone" decide o que entra no índice, e o padrão grava três entradas — 48, 32 e 16 pixels, da maior para a menor —, cada uma guardada como o seu próprio PNG. É o arranjo que um favicon sempre pediu: o navegador lê o índice e pega a entrada mais próxima do tamanho que está prestes a desenhar, em vez de encolher uma imagem grande na hora com um filtro de uso geral.

Toda entrada gravada aqui é quadrada, porque ícone é quadrado. Uma imagem fora do quadrado não é recortada nem esticada: ela é centralizada no quadrado no maior tamanho que couber, e o resto fica transparente. Nada se deforma, mas um logotipo deitado passa a ocupar metade do quadro e parece menor que os vizinhos numa fileira de abas.

Então deixe quadrado na ferramenta que o gerou, com 256 pixels ou mais, e faça a marca preencher uns noventa por cento do quadro. É um ajuste só na origem, e decide mais sobre como o ícone se lê do que qualquer outra coisa nesta página.

Na prática valem 16 e 32 pixels: 16 para a aba e a lista de favoritos, 32 para a barra de tarefas e quase todo contexto da área de trabalho. O Windows ainda desenha a 48 e a 256 em algumas telas.

São exatamente os três que o padrão grava, e por isso ele é o padrão. Mesmo assim, comece grande: cada entrada é reduzida a partir da imagem que você solta aqui. Uma origem de 256 pixels rende um 48, um 32 e um 16 limpos; uma de 32 pixels ampliada para 256 fica exatamente tão ruim quanto parece.

O que pega não é o formato, é a conta. A 16 pixels uma letra tem cerca de dez pixels de altura, o que não dá para um nome escrito, para um slogan nem para qualquer traço mais fino que os outros.

Funciona uma forma só, contraste alto, poucas cores: a inicial em vez do nome, o símbolo em vez do conjunto completo. Teste reduzindo o PNG para 16 pixels antes de converter — se você não reconhece o que é, nenhum formato salva.

Na raiz do site, com o nome favicon.ico. Só esse lugar já cobre o navegador que pede direto, leitores de feed e ferramentas antigas que não olham em outro canto.

Vale declarar no `head` também, ao lado de um PNG para os navegadores atuais e de um apple-touch-icon para a tela de início do iOS. O ICO é o piso, não a estratégia inteira.

Quase sempre é cache, e favicon fica em cache de um jeito especialmente teimoso — no navegador, em qualquer CDN na frente do site e às vezes no próprio sistema.

Abra a URL do ícone direto para confirmar que o arquivo novo está sendo servido; depois limpe os dados daquele site específico, não do navegador inteiro. Se houver uma CDN na frente, faça o purge lá também. Confirmado que o arquivo está certo, o resto é paciência.

Solte quantos PNG quiser. Cada um vira o seu ICO e todos voltam juntos num ZIP, o que serve para um aplicativo ou para um conjunto de sites que precisam de um ícone cada.

A conversão roda no seu navegador, então não há envio, nem fila, nem limite além da sua própria máquina. Ícone é pequeno o bastante para isso nunca ser o gargalo.