Converter HEIC para ICO

Esse passo decide se o resultado parece proposital. Nada nesta conversão recorta a imagem: ela mantém as proporções e fica centralizada num quadrado na maior escala que cabe, então uma foto comum de iPhone (4032 por 3024) chega como uma imagem 4:3 com um quarto do ícone vazio acima e abaixo. Nada é esticado, mas um favicon tem 16 pixels de altura e você acabou de abrir mão de quatro deles.

Abra a foto no aplicativo Fotos, toque em Editar, escolha a ferramenta de corte com proporção quadrada e centralize no que realmente importa — a letra do letreiro, o símbolo, o objeto único. Salve, compartilhe a cópia cortada e converta essa. Trinta segundos de recorte valem mais que qualquer ajuste desta página.

Um favicon é desenhado a 16 pixels CSS. Numa tela de alta densidade o navegador pode escolher 32 pixels físicos, e uma barra de favoritos pode chegar um pouco maior, mas 16 por 16 é o tamanho para projetar. São 256 pixels no total, menos que as palavras nesta frase.

O que sobrevive nesse tamanho é uma forma e uma ou duas cores. O que não sobrevive é texto de qualquer tipo com menos de quatro caracteres, linhas finas, gradientes, sombras e qualquer coisa com fundo atrás. Uma foto de fachada vira uma mancha marrom. Uma foto de uma única letra pintada na parede, bem enquadrada, vira um ícone reconhecível.

O arquivo é um cabeçalho de seis bytes, seguido de uma entrada de dezesseis bytes por tamanho, e depois um PNG para cada — três deles nas configurações padrão, a 48, 32 e 16 pixels, listados do maior para o menor. O formato também permite um bitmap bruto, mas toda versão do Windows desde o Vista lê um PNG dentro de um ícone e o arquivo sai numa fração do tamanho, então é isso que é escrito.

Um detalhe curioso aparece num editor hexadecimal: os campos de largura e altura no diretório têm um byte cada, então 256 não cabe e a convenção do formato é escrever zero no lugar. Um ícone cuja entrada diz ter tamanho 0 por 0 é a especificação funcionando como esperado, não um arquivo corrompido.

O que quer que você envie, nada no arquivo passa de 256 pixels — o teto é aplicado no caminho e não há configuração que aumente isso. Uma foto de 12 megapixels é reduzida por um fator de cerca de dezesseis em cada direção para chegar lá, e uma de 48 megapixels por mais de trinta.

Cada uma dessas reduções é feita com suavização de alta qualidade num canvas, o que é o jeito certo de fazer: encolher uma foto grande faz a média de muitos pixels em cada pixel de saída e esconde ruído em vez de exibi-lo. O resultado é uma imagem pequena e limpa de algo que nunca foi pensado para ser pequeno.

Ícones ficam melhores com fundo transparente, para se encaixarem sobre uma interface clara ou escura sem uma caixa visível ao redor. O contêiner aqui suporta isso, porque o conteúdo interno é um PNG e um PNG carrega canal alfa.

Uma foto de câmera não tem transparência nenhuma, então o resultado é um quadrado totalmente opaco. Se o símbolo fotografado é escuro sobre uma parede clara, essa parede vira o fundo do ícone e aparece como um retângulo contra um tema escuro do navegador. Remover esse fundo é trabalho de edição antes da conversão.

Se você vai fotografar algo especificamente para isso, faça de frente, o mais plano e próximo que a lente permitir: só o símbolo, preenchendo o quadro, em luz uniforme sem sombra atravessando. Evite a fachada inteira, a placa toda, o produto completo. Um motivo só, uma cor dominante, bordas duras.

Também vale fotografar o símbolo contra um fundo liso que dê para recortar depois — uma folha de papel, uma parede lisa — porque isso abre a opção de um ícone transparente sem reconstruir bordas na mão. Se a empresa tem uma logo de verdade em algum e-mail de designer, esse é um ponto de partida melhor que qualquer foto.

A imagem é decodificada e recodificada no caminho até o PNG interno, então nada dos metadados do HEIC chega ao ícone: sem data de captura, sem modelo de aparelho, sem coordenada de GPS. Isso é inequivocamente bom aqui, já que um favicon é servido a todo visitante do site.

O perfil Display P3 que um iPhone anexa também não atravessa, então cores saturadas ficam um pouco mais discretas do que no celular. A 16 pixels ninguém percebe isso, e remove uma variável de como o ícone aparece entre navegadores.

Duas coisas valem a pena fazer com o resultado. Envie para onde o construtor de site pediu, e também garanta que uma cópia fique na raiz do domínio como favicon.ico, porque navegadores e rastreadores pedem esse caminho por iniciativa própria.

Depois confira numa aba de verdade, no tamanho real, em tema claro e escuro. O cache de favicon é agressivo — um recarregamento forçado ou uma janela anônima costuma ser necessário antes de o novo aparecer.