Como criar o ícone do app (e a tela de abertura)
O ícone é a primeira coisa que alguém vê do seu app, e quase sempre em tamanho minúsculo: na busca da loja, na tela de início, na lista de notificações. Um ícone bom é reconhecível do tamanho de uma unha. Quase todo o resto é consequência disso.
Este guia trata das medidas que cada loja pede, dos erros que derrubam o envio e de como fazer um ícone no Canva ou com geração de imagem por IA.
As medidas, loja por loja
| App Store | Google Play | |
|---|---|---|
| Tamanho | 1024 × 1024 px | 512 × 512 px na ficha |
| Formato | PNG | PNG de 32 bits, até 1 MB |
| Transparência | não aceita | aceita, mas não use |
| Cantos | quadrado cheio, o sistema arredonda | quadrado cheio, a loja aplica a máscara |
| Sombra | não desenhe | não desenhe, a loja aplica a dela |
A regra prática: faça uma vez em 1024 × 1024, fundo preenchido, cantos retos. Desse arquivo saem todos os outros tamanhos.
Os erros que mais aparecem
Fundo transparente no iPhone. A Apple recusa ícone com transparência. O fundo precisa estar pintado até a borda.
Cantos já arredondados. O sistema aplica a máscara dele por cima da sua, e sobra um contorno esquisito nos cantos. Envie o quadrado.
Texto pequeno. Nome da empresa escrito por extenso vira um borrão a 60 pixels. Se a marca depende de texto, use só a inicial ou uma sigla curta.
Detalhe demais. Foto, degradê com quatro cores, três objetos. Na tela de início tudo isso vira ruído. Um símbolo, uma cor de fundo, contraste alto.
Ícone igual ao do concorrente. Se todas as pizzarias da cidade usam uma fatia de pizza laranja, a sua fatia laranja some na lista. Às vezes a inicial da marca sobre a cor da marca se destaca mais que o desenho óbvio.
O ícone adaptável do Android
No Android, o ícone que aparece no aparelho é adaptável: são duas camadas, um fundo e um desenho na frente, e cada fabricante recorta com uma forma diferente. Num celular ele vira círculo, em outro vira quadrado de cantos arredondados, em outro uma gota.
O que isso pede de você:
- mantenha o desenho dentro da zona segura, um círculo no centro com cerca de dois terços da largura total. O que ficar fora dele pode ser cortado;
- deixe respiro: o símbolo encostado na borda é o primeiro a perder pedaço no recorte;
- o fundo deve ser cor lisa ou padrão simples, porque ele pode se mexer um pouco com animações do sistema.
Um teste rápido: desenhe um círculo com 66% da largura no centro do seu ícone. Se o símbolo inteiro cabe dentro, ele sobrevive a qualquer recorte.
Teste de legibilidade em 30 segundos
Antes de enviar, reduza o ícone para 48 × 48 pixels e olhe de longe. Depois, coloque ao lado de prints da tela de início de um iPhone e de um Android com outros apps.
Se você ainda reconhece a marca, está bom. Se precisa apertar os olhos, simplifique.
Como fazer no Canva
- Crie um design com tamanho personalizado de 1024 × 1024 px;
- Preencha o fundo inteiro com a cor principal da marca;
- Coloque o símbolo ou a inicial no centro, ocupando mais ou menos 60% da área, para respeitar a zona segura do Android;
- Use no máximo duas cores além do fundo;
- Baixe em PNG. O fundo transparente é recurso do plano pago do Canva, e para o ícone você não quer transparência, então o PNG padrão serve.
Para o ícone da Google Play, baixe o mesmo arquivo de novo e reduza para 512 × 512, ou deixe a ferramenta de publicação fazer isso.
Como fazer com geração de imagem por IA
Geradores de imagem são bons para encontrar uma ideia e ruins para entregar o arquivo final. O caminho que funciona:
- Peça o conceito, não o ícone pronto. Algo como "ícone de app minimalista, um pente estilizado, traço grosso, fundo liso cor vinho, sem texto, estilo flat". O "sem texto" é importante, porque as letras geradas costumam sair erradas;
- Gere várias versões e escolha a mais simples, não a mais bonita no tamanho grande;
- Leve para o Canva e refaça o acabamento: centralize, ajuste a cor de fundo para a cor exata da marca, confira a zona segura;
- Confira se não se parece com a marca de outra empresa. Imagem gerada pode lembrar demais um logotipo existente, e ícone parecido com o de outro app é motivo de recusa e de problema jurídico.
A tela de abertura
É a imagem que aparece entre o toque no ícone e o app pronto. Ela dura pouco, mas aparece em toda abertura.
Use a marca no centro, sobre uma cor lisa. O Android, desde a versão 12, monta a tela de abertura do mesmo jeito: um ícone centralizado sobre uma cor de fundo. A Apple recomenda que essa tela seja discreta e parecida com a primeira tela do app.
Não use foto de tela inteira. Cada aparelho tem uma proporção, e a foto é cortada de um jeito diferente em cada um. O que fica no centro de um vira borda no outro.
Não coloque texto de propaganda. Ninguém lê, e em aparelhos rápidos a tela some antes.
Onde isso entra na Fabapp
Na Fabapp, o ícone e a tela de abertura ficam na aba Aplicativo, no passo Marca da configuração do app nativo (disponível a partir do plano Builder). O que a plataforma pede:
- ícone: PNG quadrado de 1024 × 1024, com o fundo preenchido e sem cantos arredondados. Se você não enviar nenhum, a plataforma gera um com a inicial do app sobre a cor da sua marca;
- tela de abertura: PNG com a marca ao centro e fundo transparente, porque a cor que você escolhe preenche o resto da tela.
Repare na diferença: o ícone vai com fundo, a tela de abertura vai sem. É a confusão mais comum, e é por isso que vale gerar os dois arquivos separados no Canva. A partir daí, a plataforma gera os tamanhos de cada sistema. O passo a passo está no guia Publicar o app nas lojas.
O resumo
- faça em 1024 × 1024, PNG, fundo preenchido e cantos retos;
- a Apple recusa transparência; o sistema arredonda os cantos sozinho;
- no Android, mantenha o desenho dentro do círculo central de dois terços;
- um símbolo, poucas cores, nada de texto pequeno, e teste em 48 pixels;
- a tela de abertura é a marca no centro sobre uma cor, nunca foto de tela cheia.
Um pedido pronto para criar o seu
Crie um app para um salão de beleza com três profissionais. Cada profissional tem horário de trabalho por dia da semana, folgas e a própria lista de serviços com duração e preço; a cliente escolhe o serviço, a profissional e um horário livre, e recebe confirmação por e-mail e lembrete na véspera; a agenda impede dois atendimentos no mesmo horário; uma galeria de trabalhos com fotos por serviço; cada profissional entra na conta dela e vê só a própria agenda do dia, marcando atendida ou faltou; cada cliente tem ficha com histórico; e eu vejo um painel com faturamento por profissional e por mês e a taxa de falta.
Grátis para começar. A primeira versão chega em alguns minutos e você ajusta conversando.