Gerador de Favicon

Cada tamanho tem um contexto

Não existe "um" favicon: existe um conjunto, porque cada plataforma usa o ícone de um jeito. Os PNGs de 16 e 32 px aparecem na aba e nos favoritos do navegador. O apple-touch-icon (180 px) é o que o iPhone usa quando você adiciona o site à tela inicial. Os PNGs de 192 e 512 px são para PWAs e para o Android, e ficam descritos no manifest.

O favicon.ico ainda importa como fallback universal, navegadores antigos e alguns contextos o buscam automaticamente na raiz. Por isso a ferramenta gera todos: cobrir o conjunto evita o ícone borrado (quando um tamanho falta e o navegador redimensiona outro) ou o quadrado genérico (quando nada é encontrado).

• 16/32 px: aba e favoritos do navegador.
• apple-touch-icon 180 px: tela inicial do iOS.
• 192/512 px: PWA e Android (via manifest).
• favicon.ico: fallback universal na raiz.

Por que o .ico guarda vários tamanhos

O formato ICO é especial: ele pode embutir várias resoluções (16, 32, 48 px) dentro de um único arquivo. Assim, o sistema ou o navegador escolhe a versão do tamanho certo para cada contexto, uma aba pequena usa a de 16, um atalho maior usa a de 48, mantendo a nitidez sem depender de redimensionamento na hora.

Sobre o enquadramento: como favicons são quadrados, uma imagem quadrada evita cortes. No modo Preencher, uma imagem retangular é recortada ao centro para caber no quadrado; no modo Conter, ela é encaixada inteira, com margem ao redor. Cantos arredondados e cor de fundo ajudam a adaptar um logo ao formato de ícone.

O que vai dentro do arquivo e até onde ele funciona

Um .ico é um diretório de imagens: 6 bytes de cabeçalho, 16 bytes por tamanho e depois os dados de cada imagem. Aqui cada imagem é um PNG, o formato aceito pelo Windows desde o Vista e por todos os navegadores atuais, e o tamanho 256 é registrado como 0 no diretório, uma convenção do formato. Com os 6 tamanhos padrão (16, 32, 48, 64, 128 e 256 px), o cabeçalho mais o diretório ocupam 102 bytes, e os pixels brutos somariam 358.400 bytes; a compressão do PNG costuma reduzir isso para uma fração, mais ainda em logos de poucas cores.

O limite que vale conhecer: ícones em PNG não funcionam no Windows XP nem em alguns compiladores de recursos antigos, que exigem BMP dentro do ICO. Esta ferramenta não gera BMP. Para favicon de site, ícone de pasta ou de atalho no Windows 7 e mais novos, o arquivo funciona normalmente. Para um bom resultado, comece de uma imagem quadrada de 256 px ou mais: tamanhos maiores que a origem são ampliados, e a ferramenta avisa quando isso vai acontecer.

• Cabeçalho de 6 bytes mais 16 bytes por tamanho.
• Cada tamanho é um PNG completo, com transparência.
• Máximo de 256 px por imagem, limite do formato.
• Windows XP e compiladores antigos pedem BMP, que não é gerado.

site.webmanifest e o snippet HTML

O site.webmanifest é um pequeno arquivo JSON que descreve o site como aplicativo: nome, cores e a lista de ícones (os PNGs 192 e 512). É ele que permite "instalar" a PWA e exibir um ícone bonito na tela inicial em vez de um recorte da página. A ferramenta já gera esse arquivo referenciando os PNGs corretos.

O snippet HTML acompanha tudo: são as tags <link> e <meta> que apontam para o favicon.ico, os PNGs, o apple-touch-icon e o manifest. Basta colá-lo dentro do <head> do seu site. Sem esse snippet, os arquivos existem mas o navegador não sabe onde procurá-los, colar as referências é o passo que ativa o conjunto.