Gerador de favicon (ICO e PNG) grátis, direto no navegador

O que é um gerador de favicon?

Um gerador de favicon transforma uma imagem, ou uma letra e emoji, no conjunto de arquivos que um site precisa para aparecer com um ícone próprio na aba do navegador, nos atalhos da tela inicial e no manifest de aplicativo web. Esta ferramenta oferece duas formas de começar: suba uma imagem existente, ou digite um caractere curto e escolha as cores de fundo e do texto para deixar o ícone ser desenhado na hora, num formato quadrado, arredondado ou circular. Uma prévia ao vivo mostra o resultado em 16, 32, 48 e 180 pixels — os tamanhos reais que o navegador, o sistema operacional e o iOS usam — para você ver o que sobra do desenho antes de baixar qualquer coisa.

A saída inclui um favicon.ico de verdade, com as versões de 16, 32 e 48 pixels dentro de um único arquivo, mais PNGs separados nos tamanhos 16, 32, 180 (já nomeado apple-touch-icon.png), 192 e 512. Um campo com o nome do site alimenta o site.webmanifest, e dois botões copiam prontos o trecho HTML para o head da página e o JSON do manifest. Todo o processamento acontece no navegador: nenhuma imagem é enviada a um servidor.

Como usar

1. Escolha o ponto de partida. suba uma imagem ou selecione digitar uma letra ou emoji; no modo texto, defina o texto curto, a cor de fundo, a cor do texto e o formato — quadrado, arredondado ou círculo.
2. Confira a prévia e preencha o nome do site. observe como o ícone se comporta em 16, 32, 48 e 180 pixels, e digite o nome do site que vai para o site.webmanifest.
3. Baixe os arquivos e copie o código. baixe o favicon.ico e os PNGs separados, depois copie as tags HTML e o JSON do manifest para colar no head da sua página.

O que existe de fato dentro de um arquivo .ico

Um arquivo ICO não é bem um formato de imagem, é um pequeno arquivo contêiner. A estrutura é simples: seis bytes de cabeçalho, depois uma entrada de diretório de dezesseis bytes para cada imagem incluída, e depois as imagens propriamente ditas, uma atrás da outra. É por isso que um favicon carrega vários tamanhos ao mesmo tempo dentro de um arquivo só: o navegador escolhe o que precisa, então o ícone de 16 pixels da aba e o de 48 do atalho podem ser desenhos diferentes em vez do mesmo desenho espremido para caber.

Cada entrada do diretório guarda a largura e a altura em um único byte cada, o que limita o valor máximo a 255 — então o tamanho 256 é escrito como zero. Não é uma curiosidade de manual: aparece em arquivos reais, inclusive no favicon.ico que este próprio site usa, lido e verificado diretamente para escrever este texto. Ele tem quatro entradas, de 16, 32, 48 e 256 pixels, e mistura cargas em bitmap com cargas em PNG dentro do mesmo arquivo.

Desde o Windows Vista, a carga de uma entrada pode ser um arquivo PNG inteiro em vez de um bitmap cru, e é isso que torna possível escrever um ICO inteiramente no navegador: um canvas já produz PNG, então a ferramenta só precisa indexá-los corretamente na estrutura do contêiner. O tamanho declarado na entrada do diretório e as dimensões reais em pixels da carga são campos separados, e nada no formato obriga que sejam iguais; esta ferramenta desenha cada carga exatamente no tamanho que a entrada declara.

A saída foi conferida com dois leitores independentes do macOS: o file(1) identifica o arquivo como MS Windows icon resource, com o número certo de ícones e os tamanhos escritos, e o sips reconhece o formato sem erro. Ao todo foram 41 verificações automatizadas, entre elas que cada PNG embutido volta idêntico byte a byte depois de ser escrito e lido de novo, que as entradas ficam ordenadas do menor para o maior, e que uma entrada de 256 sobrevive à ida e volta pelo truque do byte zero.

Limitações honestas

Um ícone de 16 por 16 pixels tem 256 pixels no total, e detalhe fino simplesmente não sobrevive a isso. O conselho honesto é simplificar a marca antes de gerar o favicon — reduzir o número de formas, engrossar traços finos — em vez de só encolher o logotipo inteiro e torcer para que continue legível; é por isso que a prévia mostra o tamanho de 16 pixels lado a lado com os maiores, e não apenas uma versão ampliada e bonita.

Esta ferramenta escreve ICO com cargas em PNG, o padrão desde o Windows Vista. Software realmente antigo, anterior a isso, pode esperar bitmaps crus dentro do arquivo — na prática isso raramente afeta navegadores ou sistemas atuais, mas é um limite real do formato de saída. Reduzir uma imagem também não é o mesmo que projetar um ícone: a ferramenta redesenha no tamanho pedido o que você forneceu, mas não tem como saber com o que o seu logotipo deveria se parecer no tamanho de uma aba.

A transparência do arquivo original é preservada nos PNGs e no ICO gerados, mas o que cada plataforma faz com esse canal alfa depois — arredondar cantos, compor sobre um fundo colorido — é decisão de cada sistema, e fica fora do controle do arquivo em si. Por fim, recodificar uma imagem através de um canvas apaga qualquer metadado que o arquivo de origem carregasse, a mesma troca que o conversor de imagens faz.

Por que é grátis?

Esta ferramenta é grátis porque roda inteiramente no aparelho de quem usa: o desenho, a codificação PNG e a montagem do arquivo ICO acontecem no navegador, então não há custo de servidor por geração que justifique cobrar. Não existe conta para criar, marca d'água para remover ou limite de downloads escondido atrás de um plano pago.

Nenhuma imagem enviada, letra digitada ou nome de site sai do seu navegador — não há upload porque não há necessidade de um servidor no meio do processo. O FreeToGenerate.com reúne ferramentas assim, cada uma na sua própria página, priorizando mostrar como o formato de arquivo funciona por dentro em vez de esconder isso atrás de um botão mágico.