Converter SVG para ICO

A maioria das conversões de ícone parte de algo já renderizado uma vez — uma exportação em PNG, uma captura de tela, um JPEG que alguém achou. Cada um desses carrega a resolução e os artefatos de quem quer que o tenha produzido, e reduzir isso para o tamanho de ícone acumula tudo. Um SVG não carrega nada disso: é instrução, então o renderizador desenha a marca do zero exatamente no tamanho que o ícone precisa.

Isso significa que as bordas são suavizadas uma vez, não duas, curvas são calculadas em vez de reamostradas, e não há halo suave de uma exportação anterior. Se você tem o vetor, use ele. Esta é uma das poucas conversões em que a escolha da origem realmente aparece no resultado.

Um ICO é um contêiner construído para guardar a mesma marca em vários tamanhos, para o Windows mostrar uma versão nítida de 16 pixels na barra de tarefas e uma versão nítida de 256 pixels na área de trabalho sem escalar nenhuma delas. É o que o arquivo gerado aqui faz: o controle «Tamanhos do ícone» decide o conjunto, o padrão é 16, 32 e 48, e cada um é um PNG separado com o canal alfa intacto. Escolha «Todos os tamanhos comuns» e 64, 128 e 256 se juntam; escolha «Só 256 px» e você recebe a entrada grande única.

Duzentos e cinquenta e seis é o teto do próprio formato, não uma escolha feita aqui. Uma entrada registra a largura num único byte, que para em 255, então a especificação reserva o valor zero para significar 256 — e é esse o byte gravado para um ícone de tamanho cheio. Nada em lugar nenhum guarda um maior. As entradas são escritas do maior para o menor, porque um decodificador que ignora o diretório costuma pegar a que encontra primeiro, e a maior é a menos ruim de entregar.

Com o conjunto padrão, ele não escala nada: lê o diretório, encontra uma entrada que já tem 16 pixels, e desenha ela. É a diferença para a qual o contêiner foi inventado, e é visível — uma imagem de 256 pixels reduzida na hora por um filtro de propósito geral do navegador perde todo o alinhamento que deixava a marca nítida, enquanto uma entrada de 16 pixels foi reduzida uma vez, numa passagem filtrada, antes de o arquivo ser escrito. Escolha «Só 256 px» e o navegador volta a fazer a redução sozinho.

O que nenhum dos dois arranjos consegue fazer é redesenhar a marca. A entrada de 16 pixels aqui é a renderização de 256 pixels reduzida, não o SVG renderizado de novo em 16 com os traços encaixados na grade de pixel, então um traço de um pixel ainda amolece e o vão dentro de uma letra ainda se preenche. Para uma forma sólida, uma letra única e grossa ou uma silhueta forte isso está bem. Para detalhe fino não está, motivo de conjuntos de ícone sérios ainda conterem um 16 desenhado à mão — GIMP e IcoFX deixam acrescentar um ao arquivo que esta página entrega.

A restrição é brutal, e vale desenhar em torno dela em vez de brigar com ela. Dezesseis por dezesseis são 256 pixels no total, menos que os caracteres desta frase. Qualquer coisa que precise de mais de umas três formas distintas para ser lida não vai ser lida.

Os movimentos de sempre: descarte a marca-palavra por completo e mantenha só o símbolo, engrosse os traços para caírem em pixels inteiros, aumente o contraste contra fundo claro e escuro, e remova qualquer detalhe menor que um décimo da largura. Como você está partindo de um vetor, fazer essa variante simplificada é só esconder algumas camadas e exportar um segundo SVG.

A imagem dentro do ícone é um PNG, então o canal alfa atravessa a cadeia inteira: o resvg desenha o traçado sobre o nada, os pixels mantêm a transparência, e o PNG guarda isso. Uma marca arredondada mantém os cantos arredondados em vez de ganhar um quadrado branco.

Isso importa mais do que costumava importar. Navegadores hoje desenham a fileira de abas em tema claro ou escuro dependendo do sistema operacional, e um favicon com fundo branco embutido se denuncia num tema escuro. Deixe o fundo de fora do desenho e deixe o alfa fazer o trabalho.

Navegadores modernos aceitam um favicon SVG diretamente, e é estritamente melhor onde tem suporte: um arquivo pequeno, nítido em qualquer tamanho, e capaz de responder a um esquema de cor escuro com uma media query dentro do próprio desenho. O arranjo comum hoje é um SVG declarado na marcação e um ICO na raiz para o resto.

Isso não é motivo para pular o ícone. O pedido por /favicon.ico é feito por navegador independentemente do que o HTML diz, e por uma cauda longa de leitor de feed, gerador de prévia de link e rastreador que não analisa HTML nenhum. Os dois arquivos, poucos kilobytes juntos, e a questão nunca mais volta.

Coloque o arquivo na raiz como favicon.ico. Essa colocação única satisfaz o pedido automático e não exige marcação nenhuma — o motivo de ter sobrevivido a trinta anos da web mudando ao redor dela.

Depois declare o resto explicitamente: um elemento link com rel="icon" e type="image/svg+xml" para o SVG, e um apple-touch-icon PNG a 180 pixels para iOS, que ignora os outros dois. Três arquivos cobrem todo cliente atual, e o ícone é o único que não precisa de declaração.

Favicon é guardado em cache com uma persistência incomum, num armazenamento separado do cache comum de página, e um recarregamento forçado frequentemente não limpa isso. Isso produz uns minutos confiáveis de acreditar que a conversão falhou quando o arquivo no servidor está perfeitamente correto.

Confira o arquivo diretamente abrindo a URL dele numa aba, o que ignora o cache do ícone por completo. Se a imagem correta aparece ali, o deploy funcionou. Para forçar a aba a atualizar, abra o site numa janela privada, ou acrescente uma string de consulta ao elemento link por um deploy.

Nada nesta conversão recorta. O desenho é renderizado nas próprias proporções, e cada entrada de ícone é feita centralizando ele numa tela quadrada na maior escala que couber — então um viewBox largo ganha preenchimento transparente acima e abaixo em vez de ser esticado. O ícone nunca é distorcido, o padrão certo, mas uma marca três vezes mais larga que alta acaba ocupando um terço do quadrado e lê como um logotipo pequeno flutuando numa aba grande.

Corrija isso no SVG. Ajuste o viewBox para um quadrado e posicione a marca dentro com a margem que parecer certa, lembrando que ícone costuma ser exibido de ponta a ponta sem margem própria. Um símbolo que preenche uns noventa por cento do quadrado lê bem em qualquer tamanho, e a 16 pixels a diferença entre preencher o quadro e preencher um terço dele é a diferença entre quatro pixels legíveis de traço e um.

Solte o conjunto inteiro. Cada desenho é renderizado e embrulhado separadamente, e os resultados voltam num ZIP, o formato comum desse trabalho para quem administra vários sites ou vários produtos de um mesmo sistema de marca — uma marca por propriedade, todas precisando do mesmo tratamento na mesma tarde.

Todo arquivo recebe o mesmo tratamento e o mesmo conjunto de tamanhos, então o lote volta consistente. O que não é consistente é o quanto cada marca preenche do próprio quadrado: um desenho com viewBox largo fica centralizado com espaço transparente dos lados, e ao lado de um irmão devidamente quadrado vai parecer um tamanho menor. Ajustar os viewBox na origem uma vez vale mais do que notar isso depois, espalhado por uma dúzia de sites.