Converter WebP para ICO

Quase todo mundo nesta página está trabalhando de trás para frente. Os arquivos de design ficaram com uma agência que não responde mais, numa conta do Figma fechada, ou num notebook que foi trocado há dois empregos, e a única cópia sobrevivente da logo é a que o site serve — como WebP, porque uma etapa de build ou um CDN de imagens converteu ela na saída.

Esse é um ponto de partida razoável e produz um favicon perfeitamente utilizável. Vale trinta segundos procurando algo melhor primeiro, porque uma origem melhor produz um ícone melhor, e as alternativas costumam estar bem ali: tente /favicon.svg no domínio, busque na fonte da página por ".svg", ou confira se o mesmo ativo é servido como PNG num elemento picture de fallback. Se algum desses existir, as páginas SVG para ICO ou PNG para ICO vão render melhor que esta.

O ICO gravado aqui tem teto de 256 pixels na maior dimensão — esse é o limite do próprio formato, porque o diretório guarda cada dimensão num único byte, e 256 é registrado como zero. Na maioria das páginas de ícone, esse teto é o evento principal, porque a origem é um arquivo de impressão ou uma foto de câmera com milhares de pixels.

Aqui normalmente não é. Sites servem logo no tamanho que o layout precisa, muitas vezes por um serviço de redimensionamento, e 240 a 400 pixels de largura é totalmente normal para uma marca de cabeçalho — confortavelmente mais que os 48 em que o conjunto padrão termina. O risco corre na outra direção, e só morde se você pedir tamanhos que a origem não consegue fornecer: uma logo de 120 pixels convertida com "Todos os tamanhos comuns" é ampliada para preencher as entradas de 256 e 128, o que adiciona bytes e nenhum detalhe. Antes de converter, tente pedir a mesma URL com um parâmetro de largura maior, ou procure um ativo @2x.

O WebP vem em dois tipos, e a extensão não diz qual. Um WebP sem perdas de uma logo plana é tão limpo quanto um PNG. Um com perdas passou por uma transformação que suaviza áreas planas e cria halo ao redor de bordas duras, e enquanto isso é invisível a 400 pixels, não é invisível depois de o ícone ser reduzido para 32 e desenhado ao lado de um título de página.

O sintoma é um halo cinza fraco abraçando a marca e uma leve turvação onde deveria ser um preenchimento sólido. Nada nesta página remove isso, porque a informação já foi perdida. O que ajuda é começar maior — uma origem com perdas de 400 pixels reduzida para 256 tira uma média que dilui parte do halo, onde uma de 128 pixels não tem nada para diluir — e recortar até o símbolo, para que o detalhe restante seja gasto em algo que se lê.

O ICO produzido aqui contém um PNG, não um bitmap cru. Essa é a convenção moderna, todo Windows desde o Vista lê ela, e o arquivo é uma fração do tamanho da alternativa em bitmap cru. Mais importante, isso traz um canal alfa de 8 bits de verdade, e o WebP também tem um, então uma logo recortada chega recortada, com bordas suaves anti-serrilhadas.

Um favicon precisa disso mais que a maioria das imagens. Ele fica na aba do navegador, que tem cor diferente entre temas claro e escuro, e diferente ainda entre navegadores; uma marca gravada num quadrado branco opaco parece um bug no modo escuro e um adesivo no modo claro. Se o WebP não tem fundo transparente mas a logo fica sobre um branco chapado, remover esse fundo antes de converter é a edição de maior valor disponível.

O WebP pode guardar uma animação, e o decodificador usado aqui lê só imagens paradas. Um arquivo animado é rejeitado com uma mensagem legível em vez de silenciosamente reduzido ao primeiro quadro — a falha mais educada das duas, e consistente com como o resto deste site trata a mesma situação.

Também não é uma perda neste caso específico. Navegadores não animam favicons ICO, então uma origem animada nunca ia produzir um ícone animado. Se você quer um quadro dela, abra o arquivo num navegador, pause, tire um print do quadro e converta esse. Se a animação importa para outro propósito, WebP para GIF é a página que mantém ela.

Este é um problema de design, não de conversão, e ele decide a maior parte do resultado. Um favicon é visto a 16 ou 32 pixels na prática, e nesse tamanho um slogan é uma mancha cinza, uma tipografia com contorno se preenche, uma linha fina desaparece, e uma marca com mais de uns três elementos distintos vira uma mancha só.

Recorte o WebP até o símbolo sozinho antes de converter: tire o logotipo em texto, tire a margem, tire qualquer coisa mais fina que um quarentavo da largura. Se a marca é um logotipo sem símbolo, uma letra única na tipografia da marca é o que quase todo site conhecido faz, e ela se lê a 16 pixels onde o nome completo não se lê. Cinco minutos em qualquer editor de imagem vencem toda opção desta página.

O contêiner ICO foi desenhado para guardar vários tamanhos da mesma arte de uma vez, o que explica a tabela de comparação desta página relatar ele como multi-imagem, e é isso que ele grava: uma entrada de diretório por tamanho, três por padrão em 48, 32 e 16 pixels. Um navegador desenhando uma aba lê o 16 em vez de reduzir um 256 com o próprio filtro, que é a diferença pela qual o formato existe. O que nada disso faz é redesenhar a marca — um ícone de 32 pixels desenhado de propósito ainda é mais nítido que um 32 reduzido da sua logo.

Metadado não viaja. Toda conversão de imagem aqui decodifica para pixels crus e recodifica, então qualquer EXIF, XMP ou perfil ICC no WebP é descartado, e isso acontece independentemente do que você faça — não é algo que a página ofereça desligar. Para um favicon, isso é totalmente bem-vindo: o arquivo acaba com um ou dois kilobytes de PNG atrás de um diretório de algumas dezenas de bytes — e o padrão de três tamanhos normalmente é menor que o único de 256, já que três PNGs pequenos de uma marca plana custam menos que um grande.

Coloque o arquivo na raiz do site como /favicon.ico. Navegadores pedem esse caminho exato por conta própria, esteja ou não mencionado no HTML, o que explica o 404 aparecer no log mesmo em sites que já declaram um ícone no head. Adicionar um elemento link também deixa a intenção explícita e permite apontar para um arquivo diferente se você quiser.

Depois espere, e limpe o cache antes de concluir qualquer coisa. Favicons são cacheados agressivamente por todo navegador e por proxies intermediários, e um novo rotineiramente leva um dia ou uma recarga forçada para aparecer. Navegadores modernos também aceitam um PNG ou um SVG por um elemento link, então o ICO é estritamente necessário só para o pedido puro de /favicon.ico e para atalhos do Windows — o que ainda é motivo suficiente para ter um.

O libwebp compilado para WebAssembly decodifica o arquivo, a imagem é escalada e codificada como PNG com oxipng aplicado uma vez por tamanho, e o cabeçalho do ICO e seu diretório são gravados ao redor dos resultados. Tudo isso roda no seu navegador: nada é enviado, não há conta e não há cota diária.

Nesta página vale dizer isso em vez de presumir, porque o arquivo é uma logo que pertence a alguém — bem possivelmente de um cliente, bem possivelmente uma que ainda não é pública. O limite gratuito é 100 MB por arquivo, que nenhuma logo vai chegar perto de alcançar. Lotes funcionam se um projeto tem várias marcas: solte uma pasta, receba um ZIP, e o codec baixa uma vez para a execução inteira.