Gerador de favicon

O que é um gerador de favicon?#

Um favicon é o ícone minúsculo que aparece numa aba do navegador, numa lista de favoritos, na pré-visualização de “adicionar à tela inicial” num celular e num bloco do Windows. A parte chata é que “um favicon” não é um arquivo — plataformas diferentes esperam tamanhos diferentes e nomes de arquivo diferentes. Um navegador de desktop quer um clássico favicon.ico, o iOS quer um apple-touch-icon.png de 180×180, uma PWA instalável quer 192 e 512 num site.webmanifest, e navegadores modernos também pegam PNGs autônomos. Gerar tudo isso à mão, além das tags de <head> que os conectam, é exatamente o tipo de tarefa tediosa que você nunca deveria fazer duas vezes à mão.

Esta página produz o conjunto completo a partir de uma única origem: seja uma imagem que você fornece, seja uma letra sobre um fundo sólido (útil para uma marca rápida de “primeira letra”). Escolha os tamanhos que precisa, e ela empacota tudo num único .zip — ICO de várias imagens, PNGs autônomos, o webmanifest e um trecho HTML listando as tags <link> e <meta> exatas para colar. Toda a rasterização acontece no seu navegador.

Como usar#

1. Escolha uma Origem:
   • Imagem — arraste (ou escolha) qualquer imagem aproximadamente quadrada. Ela é desenhada em cada tamanho selecionado.
   • Letra — digite um ou dois caracteres (padrão A), escolha uma Cor de fundo (padrão azul céu) e uma Cor do texto (padrão branco). A letra é centralizada sobre o fundo em todos os tamanhos.
2. Marque os tamanhos que quer entre 16, 32, 48, 180, 192, 512. Todos os seis vêm ativados por padrão. O 48 só vive dentro do favicon.ico (sem PNG autônomo), então é empacotado automaticamente quando 16 e 32 estão.
3. Acompanhe a tela de Pré-visualização — ela renderiza o maior tamanho selecionado sobre um tabuleiro de transparência para que você veja quaisquer áreas transparentes.
4. Clique em Baixar .zip. O pacote contém, para a seleção padrão de todos os tamanhos:
   • favicon.ico — um ICO de várias imagens empacotando 16, 32 e 48 como PNGs embutidos (o formato Vista+ que todo navegador moderno aceita).
   • favicon-16x16.png, favicon-32x32.png — PNGs autônomos.
   • apple-touch-icon.png — o ícone de 180×180 do iOS.
   • android-chrome-192x192.png, android-chrome-512x512.png — ícones do manifesto PWA.
   • site.webmanifest — referenciando os ícones 192/512, com cores de tema e de fundo.
   • html-snippet.html — as tags <link rel="icon">, <link rel="apple-touch-icon">, <link rel="manifest"> e <meta name="theme-color">.
5. Descompacte na raiz do seu site, cole o trecho no seu <head>, e os ícones resolvem a partir de /.

Principais funcionalidades#

• Um conjunto completo, com nomes convencionais, num único zip. Os nomes de arquivo (favicon.ico, apple-touch-icon.png, android-chrome-512x512.png, site.webmanifest) correspondem ao que navegadores e ferramentas de build procuram na raiz do site por padrão.
• Codificador ICO de autoria própria. Um ICO Vista+ de várias imagens adequado (ICONDIR + tabela ICONDIRENTRY + payloads PNG embutidos), escrito do zero — não um stub de imagem única 32×32.
• Modo letra para marcas instantâneas. Dois caracteres, dois seletores de cor, pronto — útil para ferramentas internas e demonstrações que precisam de um ícone reconhecível em trinta segundos.
• Apenas os arquivos que você de fato precisa. Desmarque um tamanho e nem o PNG nem a entrada no manifesto serão emitidos; o trecho HTML é regenerado para corresponder.
• Trecho de head pronto para colar. As linhas <link> e <meta> exatas, escopo apenas aos assets presentes, para que você não cole referências a arquivos que não gerou.
• 100% local. A imagem de origem ou a letra é rasterizada no navegador; o zip é montado no navegador. Sem envio.

Exemplo prático#

Você quer um favicon para um projeto paralelo chamado “Glide”. Escolha Origem: Letra, digite G, defina fundo como #0ea5e9 e texto como #ffffff, deixe todos os seis tamanhos marcados e clique em Baixar .zip. A descompactação devolve:

favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
html-snippet.html

O html-snippet.html contém exatamente:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

Solte esses oito arquivos na raiz do seu site, cole as seis linhas no seu <head>, e toda plataforma — aba do navegador, tela inicial do iOS, PWA Android — resolve o ícone certo.

FAQ#

Por que não há um PNG autônomo de 48×48?#

48 só é consumido dentro do favicon.ico (algumas ferramentas legadas leem a entrada 48 do ICO). Emitir um favicon-48x48.png autônomo seria peso morto que nenhum navegador busca, então a ferramenta empacota o 48 no ICO e pula o arquivo autônomo.

Preciso mesmo de todos os seis tamanhos?#

Para cobertura completa, sim. Se você só se importa com a aba do navegador e não com iOS ou PWA, desmarque 180, 192 e 512 e você recebe apenas o ICO mais os PNGs 16/32 — um pacote bem menor. O trecho então contém apenas os links de icon, sem linhas de manifesto ou apple-touch.

O ICO é descrito como “PNG embutido” — isso é válido?#

Sim. Desde o Windows Vista, um ICO pode embutir payloads PNG (em vez do antigo formato BMP), e todo navegador moderno lê essa forma. Isso evita um codificador BMP separado e produz arquivos menores no tamanho 48.

Minha letra parece descentralizada num tamanho.#

A letra é centralizada na tela em todos os tamanhos usando uma fonte consistente; letras muito quadradas (como M) e letras com ascendentes ou descendentes podem parecer ligeiramente altas ou baixas por causa das métricas da fonte. Se o centralizamento perfeito em pixels importa, renderize a marca num editor de imagem e use Origem: Imagem em vez disso.