Gerador de favicons

Transforme uma imagem nos tamanhos de favicon que um site moderno usa: 16, 32, 48, 180, 192 e 512 px, com as etiquetas link correspondentes. Corre no navegador; nada é enviado.

Entrada

De 0 a 30%, para marcas que chegam à borda.

Valores comuns

Largue aqui um logótipo e esta ferramenta desenha-o nos seis tamanhos de ícone que um site atual realmente referencia — 16, 32 e 48 para o separador do navegador e o resultado do Google, 180 para o ícone de toque da Apple, e 192 e 512 para o manifesto de aplicação web — e entrega-lhe ainda o markup para o <head> e as entradas do manifesto. Tudo é desenhado num canvas dentro do seu próprio navegador, por isso a imagem nunca é enviada, e pode achatar a transparência sobre um fundo ou dar folga à marca antes de exportar.

Para que serve um conjunto de favicons

Um favicon é a pequena imagem que o navegador mostra no separador, nos favoritos e no histórico; o Google também mostra uma ao lado do seu resultado na pesquisa em telemóvel. Um único ficheiro já não chega, porque a mesma marca aparece hoje a 16 px num separador e a 512 px num ecrã inicial Android, e uma só imagem escalada pelo navegador fica turva num extremo ou desperdiçada no outro. Esta ferramenta desenha cada tamanho separadamente a partir do seu original, para que cada ícone tenha a sua própria redução limpa, e produz PNG em todos os casos — o formato que todos os navegadores atuais aceitam.

Como funciona o gerador de favicons

A sua imagem é descodificada uma só vez e depois desenhada separadamente num canvas para cada tamanho de destino: 16, 32, 48, 180, 192 e 512 píxeis. Cada ícone é, portanto, uma redução do original e não uma reamostragem de uma cópia já encolhida, que é precisamente o que impede os tamanhos pequenos de ficarem pastosos. O desenho preserva a proporção e centra o resultado, por isso um logótipo largo fica com barras em vez de esmagado, e uma margem opcional dá folga às marcas que chegam à borda. Cada canvas é codificado como PNG: sem perdas, com canal alfa e lido por todos os navegadores atuais. A orientação da Google pede um ícone quadrado múltiplo de 48, e é por isso que 48 e 192 estão no conjunto.

Funcionalidades

Seis tamanhos que cobrem o separador do navegador, o ícone do resultado do Google, o Apple touch e o manifesto de aplicação web.
Cada tamanho é desenhado a partir do original, não reamostrado de um ícone mais pequeno.
Proporção preservada e centrada, por isso um logótipo não quadrado nunca é esticado.
Markup <head> e entradas de ícones do manifesto prontos a colar, ao lado dos ficheiros.

Como gerar os seus ícones

1

Selecione uma imagem de origem — quadrada e com pelo menos 512 × 512 dá o resultado mais nítido.

2

Decida se mantém a transparência ou a achata sobre branco ou preto.

3

Acrescente margem interior se a sua marca chegar à borda e precisar de folga.

4

Execute a ferramenta, descarregue cada tamanho e cole o markup no seu <head>.

Erros comuns

Partir de uma origem pequena: um logótipo de 64 × 64 ampliado para 512 fica desfocado, e nenhuma ferramenta consegue acrescentar detalhe que nunca foi captado.
Usar um logótipo detalhado e com muito texto: a 16 px o texto é ilegível, por isso um favicon quase sempre precisa de uma marca simplificada em vez do conjunto completo.
Deixar transparência num ícone que assenta num tema escuro do navegador: um logótipo escuro sobre fundo transparente desaparece, por isso achate-o sobre um fundo que contraste.

Exemplos

Um logótipo quadrado de 1024 × 1024 → os seis tamanhos reduzidos com limpeza, transparência intacta
Um logótipo largo de 800 × 200 → centrado dentro de cada quadrado com barras transparentes acima e abaixo, nunca esticado
Um monograma escuro com 10% de margem achatado sobre branco → continua legível em separadores claros e escuros

Veja também

Perguntas frequentes

Ainda preciso de um ficheiro favicon.ico?

Só se ainda der suporte ao Internet Explorer. Todos os navegadores lançados na última década leem favicons PNG declarados com uma etiqueta link, e é por isso que esta ferramenta produz PNG. Manter um favicon.ico na raiz do site continua a ser inofensivo se já o tiver, porque os navegadores pedem esse caminho por omissão quando não existe nenhuma etiqueta link.

Porquê seis tamanhos em vez de um?

Porque a mesma marca é apresentada em escalas muito diferentes. 16 e 32 px vão para o separador do navegador, 48 px é o tamanho que o indexador do Google prefere para o ícone junto ao seu resultado em telemóvel, 180 px é o que o iOS usa quando alguém acrescenta o seu site ao ecrã inicial, e 192 e 512 px são os tamanhos para que aponta um manifesto de aplicação web. Desenhar cada um a partir da origem mantém-nos todos nítidos.

O meu logótipo é enviado para um servidor?

Não. A imagem é lida pelo seu navegador, desenhada num canvas e exportada na própria página. Nada atravessa a rede, por isso um logótipo ainda não divulgado fica na sua máquina.

Que tamanho deve ter a minha imagem de origem?

Quadrada e com pelo menos 512 × 512. Assim o maior ícone é uma cópia direta e todos os outros são reduções, que é a direção que preserva o detalhe. Se a sua origem for mais pequena, a ferramenta continua a funcionar mas avisa-o de que tamanhos tiveram de ser ampliados.