Aba do navegador
- Entrada
- favicon.ico contendo 16x16 e 32x32
- Saída esperada
- <link rel="icon" href="/favicon.ico" sizes="any" />
Um único arquivo .ico carrega as duas resoluções, o navegador escolhe qual usar.
Carregando ferramenta… / Loading tool…
formatos e tamanhos de favicon
Um "favicon" hoje não é um arquivo só: é um conjunto de PNGs em tamanhos fixos, cada um lido por uma superfície diferente (aba do navegador, tela inicial do iPhone, ícone do app no Android), mais um manifest JSON que descreve tudo isso para o sistema. Essa ferramenta gera o conjunto inteiro e os snippets de HTML e manifest que apontam para ele.
Um único arquivo .ico carrega as duas resoluções, o navegador escolhe qual usar.
Sem essa regra, o iOS composita a transparência sobre preto e o ícone aparece com uma placa escura.
A margem de 10% por lado (spec do W3C) garante que a arte não seja cortada quando o sistema aplica uma forma de máscara.
O essencial: favicon.ico (16, 32, 48) para navegadores, favicon-32x32.png e 16x16.png, apple-touch-icon.png (180) para iOS e android-chrome 192/512 para PWAs. Esta ferramenta gera todos eles.
Porque cada superfície (aba do navegador, tela inicial do iOS, ícone Android, PWA maskable) lê um tamanho fixo diferente e nenhuma delas reamostra um ícone pequeno com boa qualidade; a ferramenta gera 16, 32, 180, 192 e 512px a partir da mesma imagem de origem.
É um ícone de 512x512 que a plataforma pode recortar em qualquer forma; a especificação do W3C garante só uma zona segura central de 80% do ícone (margem de 10% por lado), então a arte importante precisa caber dentro desses 410px centrais.
Porque o iOS composita qualquer transparência desse ícone específico sobre uma chapa preta na tela inicial; por isso a ferramenta força um fundo sólido só para o tamanho de 180x180, mesmo quando o resto do conjunto usa transparência.
Navegadores modernos aceitam PNG via <link rel="icon">, mas o navegador ainda pede `/favicon.ico` por padrão quando não encontra nenhum <link>, então manter o .ico, que empacota 16x16 e 32x32 no mesmo arquivo, evita um pedido que cai em 404.
A geração acontece inteiramente no seu navegador. Nenhuma imagem é enviada a qualquer servidor.