WebyTooly

Gerador de favicon

Carregue o seu logótipo e descarregue todos os tamanhos de favicon que um site moderno precisa, incluindo o favicon.ico.

Espacio publicitario

Arraste o seu logótipo 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.

Espacio publicitario

Como são gerados os favicons

Primeiro recortamos o maior quadrado centrado da sua imagem, para que um logótipo 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 ficheiro 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 ao ecrã inicial, e 192 e 512 px são os pedidos pelo manifesto de uma PWA.

Exemplo prático

Um logótipo 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 a ser recomendável: alguns navegadores e muitos agregadores pedem-no por omissão na raiz do domínio, sem olhar às etiquetas 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 ficheiros?
O favicon.ico na raiz do site e os PNG onde preferir, referenciando-os com as etiquetas link que mostramos após a geração.

Calculadoras relacionadas