Favicon e manifesto web
Uma imagem na entrada, o conjunto inteiro na saída: um ICO de verdade com vários tamanhos, o ícone de toque da Apple achatado do jeito que a Apple exige, os PNG do manifesto, o próprio manifesto web e o bloco de HTML para colar. Também mostra o recorte maskable do Android antes que ele morda, que é onde a maioria dos ícones perde as bordas sem ninguém notar.
O círculo é até onde o Android pode recortar. Tudo o que ficar fora pode ser cortado em alguns aparelhos.
| Arquivo | Tamanho | O que usa |
|---|
Por que o .ico ainda importa
Um único PNG basta para a maioria dos navegadores, e se você só precisasse de um ícone de aba poderia parar por aí. O ICO ganha seu lugar porque guarda várias resoluções num mesmo arquivo e é o sistema operacional que escolhe a certa: a aba usa a de 16, um atalho fixado ou um link na área de trabalho usa a de 32 ou a de 48, e cada uma é desenhada a partir de um bitmap feito para aquele tamanho em vez de espremido na hora a partir de um grande. O arquivo que sai daqui é um contêiner de PNG com um cabeçalho pequeno, que é o que qualquer navegador lançado neste século lê.
A zona segura do ícone maskable
O Android não promete mostrar seu ícone como um quadrado. Dependendo do launcher ele pode recortá-lo em círculo, em squircle ou em quadrado arredondado, e a única garantia é o círculo interno: oitenta por cento da largura, centralizado. A arte que vai até as bordas é justamente a arte que perde as bordas. A solução é dar margem aos ícones do manifesto até essa zona segura, e a prévia aqui desenha o recorte para você ver antes de um usuário.
Por que o ícone de toque da Apple não tem transparência
O iOS compõe o ícone da tela de início sobre a própria forma arredondada e não respeita o canal alfa como se esperaria: as áreas transparentes saem pretas. Por isso esse arquivo específico é achatado sobre a sua cor de fundo antes de ser codificado, enquanto os PNG do manifesto mantêm o alfa, onde ele é tratado direito.
O que fazer com os arquivos
Coloque-os na raiz do site, não numa pasta de assets: navegadores e rastreadores adivinham o caminho do favicon e alguns o buscam quer você o referencie, quer não. Depois cole o bloco de HTML no head da sua página. O caminho do manifesto é a única linha que precisa bater com o lugar onde você realmente deixou o arquivo.
Perguntas frequentes
Ainda preciso de um favicon.ico se tenho PNG?
A rigor, não. Na prática, sim: montes de rastreadores, leitores de feed e ferramentas antigas pedem o favicon pelo caminho e nunca olham a sua marcação. Custa alguns kilobytes.
Meu ícone fica borrado a 16 pixels. O que posso fazer?
Aqui não há o que consertar, porque não sobra espaço. Nesse tamanho uma marca tem uns dez pixels legíveis de largura; um logotipo com letras sempre vira pasta. Use como origem uma versão simplificada — uma forma, uma letra — e guarde o lockup completo para todo o resto.
Devo desligar a margem maskable?
Só se a sua arte já vier com uma margem generosa própria. Se ela preenche o quadro, deixe ligada, ou o Android vai recortar por dentro.
Minha imagem é enviada para algum lugar?
Não. Cada tamanho é desenhado num canvas nesta página e o arquivo compactado é montado na memória. Nada é enviado.
Feito pela equipe GO AI. Gerador de ícones de app · Redimensionador em lote · Todas as ferramentas gratuitas