Gerador de favicon
Envie o seu logotipo e baixe todos os tamanhos de favicon que um site moderno precisa, incluindo o favicon.ico.
Arraste o seu logotipo aqui ou clique para escolher
O ideal é uma imagem quadrada de 512 × 512 px ou maior
Só se aplica se a imagem tiver zonas transparentes. Deixe em transparente para manter o canal alfa.
O seu arquivo nunca sai do navegador: todo o processamento acontece no seu dispositivo.
Como são gerados os favicons
Primeiro recortamos o maior quadrado centrado da sua imagem, para que um logotipo horizontal não fique deformado. Depois esse quadrado é redesenhado numa tela de cada tamanho e exportado como PNG.
lado do recorte = mínimo(largura, altura)
O arquivo favicon.ico é construído com um codificador ICO próprio: um cabeçalho ICONDIR, uma entrada de diretório por tamanho e os PNG de 16, 32 e 48 px incorporados tal como estão. Desde o Windows Vista o formato ICO aceita PNG lá dentro, e todos os navegadores atuais o leem.
Os tamanhos grandes não são decorativos: 180 px é o ícone que o iOS usa ao adicionar o site à tela inicial, e 192 e 512 px são os exigidos pelo manifesto de uma PWA.
Exemplo prático
Um logotipo de 1024 × 768 px é recortado no quadrado central de 768 × 768 px e daí saem os seis PNG e o .ico, todos centrados e sem deformação.
Perguntas frequentes
- Que tamanho deve ter a minha imagem de partida?
- Quanto maior, melhor: com 512 × 512 px ou mais todos os tamanhos saem nítidos. A partir de uma imagem pequena, os tamanhos grandes ficam pixelizados.
- Preciso do favicon.ico se já tenho os PNG?
- Continua sendo recomendável: alguns navegadores e muitos agregadores o pedem por padrão na raiz do domínio, sem olhar as tags HTML.
- A transparência é mantida?
- Sim, exceto se escolher uma cor de fundo. Os PNG gerados mantêm o canal alfa e o .ico incorpora esses mesmos PNG de 32 bits.
- Onde coloco os arquivos?
- O favicon.ico na raiz do site e os PNG onde preferir, referenciando-os com as tags link que mostramos após a geração.