Pular para o conteúdo
charmotion

Dá para animar o ícone do app? O que o iOS e o Android realmente permitem

Por equipe Charmotion · Atualizado em

Ilustração de capa do guia: É possível animar o ícone de um app? O que o iOS e o Android realmente permitem, com personagens de demonstração do Charmotion

Não. Nem o iOS nem o Android oferecem aos apps uma forma pública de animar o ícone na tela inicial. No iPhone, setAlternateIconName só alterna entre ícones estáticos incluídos no app; apenas o Relógio e o Calendário da Apple se atualizam ao vivo. Os launchers do Android desenham os próprios efeitos de ícone. Mesmo assim, seu ícone pode se mover em uma intro de abertura, na splash screen do Android, dentro do app e em vídeos para a web e para a loja.

Principais pontos

  • O iOS não tem API pública para ícone animado na tela inicial; os ícones alternativos são imagens estáticas declaradas na hora do build.
  • Relógio e Calendário são apps nativos que usam recursos fora do SDK do iOS, segundo o DTS da Apple.
  • Os reflexos e a refração do Liquid Glass nos ícones do iOS são aplicados pelo sistema, não pelo seu app.
  • Os launchers do Android geram os efeitos dos ícones adaptativos; o único movimento de ícone controlado pelo desenvolvedor é a splash screen do Android 12 ou superior.
  • A solução prática é uma intro de abertura: uma launch screen estática que passa para o seu ícone animado na primeira tela.

Já tem um personagem ou logo? Veja seu personagem em telas reais de app: telas de splash, onboarding, carregamento e estado vazio. É grátis, roda no navegador e não envia nada.

Dá para animar o ícone do app no iPhone?

Não. Não existe API pública do iOS que permita a um app de terceiros reproduzir uma animação no ícone da tela inicial. A única API de ícone é setAlternateIconName(_:completionHandler:), e ela alterna entre ícones declarados com antecedência: o nome passado precisa estar listado em CFBundleAlternateIcons, e nil restaura o ícone principal (Apple Developer Documentation). Cada opção é um conjunto de imagens estáticas e finalizadas, compilado no app.

Mais três regras limitam ainda mais:

  • Ícones alternativos precisam de variantes próprias. As HIG da Apple dizem que ícones alternativos no iOS e no iPadOS exigem suas próprias variantes escura, clara e com tonalidade, e todas passam pela App Review (Apple HIG).
  • Os ícones precisam continuar reconhecíveis. A diretriz 2.3.8 pede que o nome do app e os ícones, incluindo os alternativos, sejam parecidos entre si para evitar confusão (App Review Guidelines).
  • O Liquid Glass é tarefa do sistema. Com o design Liquid Glass, os ícones em camadas ganham reflexos especulares, refração e translucidez que o sistema aplica e adapta. As HIG orientam deixar o sistema cuidar desses efeitos, observando que efeitos personalizados são estáticos, enquanto o sistema fornece os dinâmicos.

Ou seja, o brilho que você vê se movendo nos ícones das versões recentes do iOS não é algo que você possa programar, e nenhuma configuração de build transforma seu ícone em um loop.

Como o Relógio e o Calendário têm ícones ao vivo?

São apps da própria Apple. Quando um desenvolvedor perguntou se um app poderia animar o ícone como o do Relógio, um engenheiro do DTS da Apple respondeu: "Relógio e Calendário são apps nativos e, portanto, podem usar recursos fora do SDK do iOS" (Apple Developer Forums).

Essa discussão é de 2017, e nada público mudou desde então: o SDK ainda não tem API de ícone ao vivo para apps de terceiros. A data do Calendário e os ponteiros do Relógio são exceções do sistema, não um recurso que você possa solicitar com um entitlement.

Se o que você quer é uma informação que se atualiza, como uma data, uma contagem ou um status, os lugares suportados são widgets, Live Activities e badges de notificação. Eles têm seus próprios limites de animação; veja o guia de mascote animado para apps para saber onde um personagem pode aparecer dentro das regras do sistema.

E o truque de 2024 que animava ícones no iOS?

Em maio de 2024, um desenvolvedor mostrou ícones animados na tela inicial chamando a API de ícone alternativo por um método privado, que pulava a confirmação do usuário, e enganando o sistema para tratar o app como ativo enquanto ele percorria os frames. A reportagem do 9to5Mac observou que a App Review provavelmente rejeitaria qualquer app que explorasse isso (9to5Mac).

Isso está de acordo com as regras escritas. A diretriz 2.5.1 diz que os apps só podem usar APIs públicas (App Review Guidelines). Encare a demonstração como curiosidade, não como opção para um app em produção. Chamar a API pública em loop também não resolve: cada chamada troca um ícone estático por outro, não é reprodução.

Dá para animar o ícone do app no Android?

Não o ícone do launcher em si. Os ícones adaptativos do Android têm duas camadas (primeiro plano e fundo), cada uma com 108×108 dp, e uma zona segura de 66×66 dp que a máscara do fabricante nunca corta. A documentação do Google diz que os 18 dp externos de cada lado ficam reservados para máscaras e efeitos visuais como parallax ou pulsação, e que "os efeitos visuais animados são gerados pelos launchers compatíveis" (Android Developers). Você fornece as camadas; o launcher decide como elas se movem.

  • Ícones com tema: a partir do Android 13, os usuários podem aplicar tema aos ícones que incluem uma camada monochrome, com a cor tirada do papel de parede e do tema.
  • Tema automático: a mesma página diz que, a partir do Android 16 QPR 2, o Android aplica tema automaticamente aos ícones dos apps que não fornecem o próprio.
  • Troca de ícones: não existe API dedicada para ícones; os apps costumam alternar entre entradas <activity-alias>, o que continua sendo uma troca entre imagens estáticas. Veja ícones alternativos de app.

O único lugar em que o Android permite animar o ícone é a splash screen do sistema no Android 12 e posteriores, onde o ícone centralizado pode ser um AnimatedVectorDrawable. Isso é explicado no guia de ícone animado na splash screen do Android.

Onde o ícone do seu app pode realmente ser animado?

Em quase todo lugar, menos na tela inicial. Estes são os lugares em que uma versão animada do seu ícone é permitida e útil:

LocalO que realmente é reproduzidoFormato comumGuia
Abertura do app (iOS e Android)Launch screen estática do sistema e, depois, uma intro curta na sua primeira telaRive .riv, MOV HEVC com alfa, WebM VP9 com alfaIntro de abertura
Splash do sistema no Android 12+Ícone vetorial animado, recomendado com até 1.000 msXML AnimatedVectorDrawableSplash do Android
Dentro do appCarregamento, estados vazios, onboarding, reações de sucesso e erroState machine do RiveAnimação de carregamento
Site e kit de imprensaIntro no hero ou no cabeçalho sobre o fundo da páginaWebM com fundo transparente e MOV HEVCSite e vídeo de lançamento
Página do produto na App StoreApp Preview feito com gravações de tela do app, incluindo sua intro dentro do appVídeo gravado, de 15 a 30 sEspecificações do App Preview
Página no Google PlayVídeo de prévia a partir de uma URL do YouTube, que pode ter reprodução automática sem som por até 30 sVídeo do YouTubeVídeo promocional do Play
Redes sociais e Product HuntClipe de lançamento 9:16, GIF para a galeriaMP4, GIFEspecificações de vídeo vertical

O ícone da página na loja continua sendo uma imagem estática nas duas lojas: o Google Play pede um PNG de 32 bits com 512×512 px e no máximo 1.024 KB (Ajuda do Play Console), e o tamanho de layout do ícone do iOS da Apple é 1024×1024 px.

O que mais se aproxima de um ícone de app animado?

Uma transição de abertura. O usuário toca em um ícone estático, vê uma launch screen (tela de inicialização) estática com o mesmo ícone sobre a cor da sua marca e, em seguida, o ícone ganha vida na primeira tela e volta ao lugar enquanto a interface aparece. Bem feito, isso é percebido como "o ícone ganhou animação", e usa apenas comportamentos públicos e suportados.

  1. Mantenha a launch screen do sistema estática: UILaunchScreen ou um launch storyboard no iOS, que só pode usar classes padrão do UIKit, sem classes personalizadas nem conexões de código (Apple Developer Documentation). No Android, um ícone de splash estático ou um AVD simples.
  2. Faça o ícone da launch screen corresponder ao primeiro frame da sua intro: mesmo tamanho, mesmo centro, mesmo hex de fundo.
  3. Reproduza a intro na primeira tela, termine no ícone em repouso e faça a interface surgir com fade ao redor dele.
  4. Pule a intro quando o movimento reduzido estiver ativado e não a transforme em uma barreira quando o app abrir rápido.

O Charmotion cria exatamente isso a partir de um PNG, JPEG ou WebP do seu ícone: uma intro de abertura de 2,6 segundos que termina no ícone em repouso, entregue como arquivo Rive (LaunchStateMachine), WebM com fundo transparente e MOV HEVC, um vídeo de lançamento 9:16 e MP4. Ícones 3D, com gradiente e com texto são animados como estão no modo Motion, nunca redesenhados. Ele não exporta AnimatedVectorDrawable, então a parte da splash do sistema Android fica por sua conta.

Perguntas frequentes

A Apple rejeita um app que anima o próprio ícone na tela inicial?

Se isso for feito por métodos privados, espere a rejeição: a diretriz 2.5.1 permite apenas APIs públicas, e a demonstração de 2024 que alternava ícones dependia de uma chamada privada. Trocar o ícone com setAlternateIconName em resposta a uma escolha do usuário é permitido, desde que cada ícone continue parecido com o seu app, conforme a diretriz 2.3.8.

Os efeitos Liquid Glass nos ícones contam como animação?

Não como uma animação que você controla. Nas versões recentes do iOS, ícones em camadas recebem atributos do Liquid Glass, como reflexos especulares, refração e translucidez, que o sistema aplica e adapta. As HIG da Apple recomendam deixar o sistema cuidar desses efeitos em vez de incorporá-los à arte.

Os ícones de apps no tvOS se movem?

Sim, mas quem controla é o sistema. Os ícones do tvOS usam de duas a cinco camadas e, quando em foco, o ícone se eleva e balança com efeito parallax conforme o usuário move o dedo no controle remoto. Você cria as camadas; não é possível adicionar sua própria animação a elas.

Um launcher Android pode mostrar um ícone de app em movimento?

Só os efeitos que o próprio launcher gera. A documentação de ícones adaptáveis do Google diz que os efeitos visuais animados são gerados pelos launchers compatíveis e variam entre eles. Seu app fornece camadas estáticas de primeiro plano, de fundo e, opcionalmente, monocromática.

Respostas rápidas deste guia

Fontes

Guias relacionados