Um ícone de aplicativo é um único desenho que tem que usar 36 tamanhos diferentes, em 5 plataformas, em contextos que vão de uma aba de navegador de 16 pixels a um upload de loja de 1024. O Gerador de Ícones de App toma uma foto, corta-a em quadrado por cobertura e exporta a família inteira como um ZIP: 36 PNG em pastas por plataforma, mais um manifest PWA e um manifest de conjunto de ícones iOS. Nada é enviado: o recorte, a re-amostragem e a montagem do ZIP correm no canvas do navegador.
Os 36 tamanhos em 5 plataformas
A lista são 12 de iOS, 9 de Android, 5 de web, 6 de macOS e 4 de Windows. iOS vai do ícone de ajustes de 29 pixels ao upload de App Store de 1024, com 40, 58, 60, 76, 80, 87, 120, 152, 167 e 180 no meio. Android cobre o ícone de Play Store de 512, os 2 tamanhos de ícone adaptativo (48 e 192) e as 5 densidades de lançador, de 36 em ldpi a 192 em xxxhdpi. Web guarda o par PWA de 192 e 512, o apple-touch-icon de Safari de 180, e os 2 favicons de 32 e 16. macOS sobe por 16, 32, 128, 256, 512, 1024; Windows traz tiles de 44, 71 e 150 mais uma imagem de loja de 500 pixels. O comutador de plataformas salta grupos inteiros: um build só web baixa 5 PNG e um manifest em vez dos 36 completos. Se você quer só uma dimensão alvo, o redimensionador de imagens faz a re-amostragem única com a mesma regra de recorte de cobertura.
De uma foto de 4000×3000 a um ícone de 512
Cada alvo é quadrado, então uma foto retangular tem que virar quadrada antes de escalar. A regra é recorte de cobertura: scale = max(w / iw, h / ih), onde w e h são o alvo e iw e ih a fonte. Para uma foto de 4000×3000 num alvo de 512, scale = max(512/4000, 512/3000) = max(0,128, 0,17067) = 0,17067, o quadrado da fonte mede 512/0,17067 = 3000 de lado, centralizado: sx = (4000 − 3000)/2 = 500, sy = 0. A foto 4:3 entrega seu centro de 3000×3000; 500 pixels de cada lado são cortados. Uma foto vertical perde em cima e embaixo. O max é deliberado: o min encaixaria a foto inteira dentro do quadrado e deixaria os cantos vazios, exatamente o que um ícone não deve ter. O conversor de imagens troca a codificação sem tocar na geometria, e o cortador de imagens aplica o mesmo cálculo do quadrado central quando você quer só o recorte.
Uma re-amostragem por tamanho, não uma corrente
Cada uma das 36 saídas é desenhada numa única operação de canvas diretamente da imagem original, com suavização ligada e qualidade em alta. Não há corrente de 1024 para 512 para 256: o favicon de 16 pixels sai de um único passo de 0,015625 a partir de uma fonte de 1024, e o ícone de macOS de 128 de um único passo de 0,25 a partir de 512. Isso tem uma consequência visível. Como todos os tamanhos compartilham o mesmo recorte e a mesma re-amostragem, o detalhe que se lê bem em 1024 é o mesmo que vira ruído em 16, e a fileira de pré-visualização de 32, 48, 64, 128 e 180 é onde um design fraco se mostra antes de o ZIP ser montado.
O que chega no ZIP
O arquivo guarda até 36 PNG em pastas ios/, android/, web/, macos/ e windows/, mais 3 documentos. Se web estiver selecionado há um manifest.json: o nome do aplicativo, um short_name cortado nos 12 primeiros caracteres (My Very Long App se apresenta como My Very Long), os 2 ícones PWA com o propósito any maskable, tema e fundo fixados em #ffffff, e display standalone. Se iOS estiver selecionado há um ios/Contents.json com os 14 itens que o Xcode espera, mapeando os tamanhos de 20, 29, 40, 60, 76, 83,5 e 1024 pontos para os arquivos PNG. Um README.md lista a tabela de tamanho e arquivo por plataforma. O nome do download sai do nome do aplicativo: todo carácter que não é letra nem dígito vira hífen, tudo vai para minúsculas, então My Cool App produz my-cool-app-icons.zip. Uma pontuação final vira um segundo hífen (my-cool-app--icons.zip), uma das razões pelas quais o campo de nome corta em 30 caracteres. O PNG é uma codificação sem perda e o peso de um ícone de 1024 é decidido pelo desenho; quando a loja ou o orçamento web olha os bytes, o compressor de imagens é onde a re-codificação barateia os mesmos pixels.
Para onde vão os ícones: manifest, splash, loja
Os 2 ícones do manifest são os que o navegador instala: 192 para a tela de instalação, 512 para o splash e o cartão de compartilhar. O propósito any maskable diz ao sistema operacional que ele pode recortar a imagem num círculo ou num squircle, e por isso a zona segura é o centro, ao redor de 80 % do canvas: deixe o sujeito dentro e a moldura por conta da plataforma. Os 32 e 16 de web/ são irmãos do favicon, o ícone de aba que o navegador busca antes de ler o manifest. O gerador de favicon cobre o resto dessa família, incluindo o ICO multitamanho, o mstile do Windows e as etiquetas HTML de link prontas para colar. As entradas de App Store e Play Store são as que um revisor vê primeiro, então 1024 e 512 são os tamanhos que valem uma segunda olhada.
A mesma matemática de redimensionamento em todo lugar
O recorte de cobertura mais uma única re-amostragem de alta qualidade é um pedaço pequeno de matemática que aparece por todo o site. O redimensionador de imagens o aplica a um único alvo, o compressor re-codifica os pixels que saem dele, e o conversor de tamanho de arquivo é onde você pesa o resultado: um ZIP de 36 PNG é onde uma fonte de 1024 te custa em bytes, e os arquivos de 16 pixels quase nada. Se o problema é o recorte em si, o sujeito no canto e o corte do quadrado central o perde, a guia de recorte de imagem passa pela matemática do recorte antes da da re-amostragem. O ícone é o último artefato que essa matemática produz: um quadrado, 36 tamanhos, e o mesmo centro em todos eles.