Ícone do App: Canal Alfa e Tamanhos nas Duas Lojas

Você tem um logo e duas lojas de aplicativos, e o arquivo que satisfaz a Apple não é o arquivo que o Google quer. O problema aparece no pior momento: o build está pronto e o envio falha sem parar por causa de um canal alfa.

A Apple quer um ícone quadrado de 1024x1024 com fundo opaco. A Play quer um PNG de 32 bits em 512x512 que tecnicamente aceita alfa mas, segundo a própria especificação de design do Google, não deveria usá-lo. E nenhuma das duas quer um arquivo com cara de acabado — as duas aplicam os próprios cantos e efeitos depois do envio. Veja o que cada uma pede e como tirar os dois arquivos de um logo só.

Apple: 1024 pixels, quadrado, nada transparente

As Human Interface Guidelines da Apple listam o tamanho de layout do ícone do app para iOS, iPadOS e macOS como 1024x1024 px, quadrado, em sRGB, Gray Gamma 2.2 ou Display P3. O caminho preferido da Apple hoje é o Icon Composer, onde você importa as camadas de primeiro plano e define o fundo dentro da ferramenta, mas uma imagem achatada continua valendo: camadas dão mais controle, não são obrigatórias.

Quem envia pela primeira vez trava no fundo. A instrução da Apple para a camada de fundo importada é seca: deixe-a cobrindo toda a área e opaca. Um PNG de 1024px com fundo transparente não é um ícone válido para a App Store — envie um e o App Store Connect devolve ITMS-90717: o ícone do App Store não pode ser transparente nem conter um canal alfa. A variante para aparência escura é a única exceção: a Apple pede que você entregue essa variante com fundo transparente, para o fundo fornecido pelo sistema aparecer atrás. Em todo o resto, decida que cor fica atrás da sua marca e incorpore essa cor ao arquivo.

Outras plataformas da Apple mudam o tamanho de layout: watchOS 1088x1088 e visionOS 1024x1024, as duas com máscara circular, e o tvOS, um 800x480 na horizontal. E mudam também o método: os ícones de tvOS e visionOS são montados como pilhas de imagens em camadas no Xcode, não no Icon Composer.

Google Play: 512 pixels, alfa permitido, transparência ainda é erro

O ícone da ficha da loja na Play é um PNG de 32 bits com alfa, 512x512 px, sRGB, no máximo 1024KB. Leia só isso e o recorte transparente que você já tem parece servir.

A especificação de design de ícones do Google fecha essa porta: ativos transparentes exibem a cor de fundo da interface da Google Play. Sua marca passa a flutuar sobre a superfície que a Play resolver desenhar, e um logo escuro some no modo escuro. O conselho do Google: escolha uma cor de fundo adequada à sua marca.

Mais duas regras da Play: nada de selos ou textos que sugiram ranking, preço ou categorias da Play, e o ícone da ficha da loja é separado do ícone do launcher no aparelho. Esse ícone adaptativo usa camadas de 108x108 dp, das quais só os 66x66 dp centrais têm garantia de nunca serem cortados pela máscara de algum fabricante.

Tirando os dois arquivos de um logo só

Os dois arquivos partem da mesma coisa: a sua marca, limpa e separada de onde quer que ela estivesse. Se o seu logo só existe como um JPEG mandado por um fornecedor ou como foto de um papel timbrado impresso, recorte primeiro, para a forma ficar isolada com um canal alfa de verdade. O remover.bg tira a marca do fundo e deixa você jogá-la sobre uma cor sólida ou uma cor da marca no editor — a etapa de achatar que a Apple exige.

A ordem que funciona:

1. Remova o fundo para o logo ficar sozinho. Confira as bordas contra uma cor escura, não contra o branco — traços finos e serifas escondem seus defeitos numa prévia branca.
2. Defina o fundo com a cor da sua marca e exporte um PNG. Guarde também a versão transparente, para press kits e favicons.
3. Na sua ferramenta de design, coloque esse PNG num quadro quadrado e exporte em 1024x1024 para a Apple e 512x512 para a Play. O redimensionamento é ali, não no removedor de fundo.

Para um logo escaneado ou fotografado, veja como remover o fundo de um logo, que cobre os casos difíceis, e o guia do PNG transparente, que explica por que vale guardar esse arquivo-mestre.

Deixe as lojas desenharem os cantos e a sombra

A Play é específica nisso: ela arredonda os cantos sozinha, num raio de 30% do tamanho do ícone, adiciona a própria sombra projetada depois do envio e pede que você não faça nem uma coisa nem outra. A Apple mascara o seu quadrado no retângulo arredondado do sistema e aplica os próprios brilhos, refração e translucidez, avisando que camadas já mascaradas atrapalham esses efeitos e deixam as bordas com aspecto serrilhado.

Ou seja: nada de canto pré-arredondado, sombra projetada, chanfro ou brilho difuso. Essa contenção é específica dos ícones — numa foto de produto, uma sombra de contato realista é justamente o que impede o item de ficar com cara de colado.

Como as duas lojas mascaram, mantenha a parte importante da marca centralizada. A orientação da Apple é centralizar o conteúdo principal para a máscara não cortá-lo. A grade de keylines da Play funciona diferente do que as pessoas supõem: é um guia de posicionamento, não um limite. A instrução do Google é preencher o ativo inteiro com a arte sempre que der, e recorrer às keylines só quando a forma ao redor de um logo for essencial para a marca. Encha o quadrado de margem por precaução e seu ícone aparece visivelmente menor que o de todas as fichas ao lado.

O que o raio de 30% come mesmo são os cantos, então um logotipo em texto — o wordmark — empurrado até eles perde as pontas. Nas máscaras circulares do watchOS e do visionOS, um wordmark que vai de ponta a ponta perde a primeira e a última letra de vez.

Antes de enviar

• Apple: PNG 1024x1024, quadrado, totalmente opaco, cantos sem arredondar.
• Play: PNG de 32 bits 512x512, no máximo 1024KB, fundo na cor da marca em vez de transparência, cantos sem arredondar.
• Mesma arte e mesmas cores nas duas lojas: o usuário deve reconhecer um app, não dois.
• Veja a prévia dos dois em tamanho de thumbnail. Detalhe que aparece a 1024 some a 40 pixels.

Acerte o ícone uma vez e ele fica acertado em todos os lançamentos daqui para frente.