Artigos sobre: Design do aplicativo

Ícone da notificação push



Ao enviar uma notificação push, a mensagem é recebida no celular do usuário que possui o app instalado. Ao lado da mensagem aparecerá uma pequena imagem. Nesse artigo será possível entender como incluí-la.

Importante: Sempre que inserido ou trocada a imagem de ícone do app será necessário atualizar o app nas lojas para que a mudança seja efetivada para os usuários do app.

Inserir o ícone da notificação push

  • Acesse o painel editor do app entre no "Editor visual" localizado no topo;

  • No menu da lateral esquerda, clique em "Ícones do app";

  • Em "Ícone para notificações" envie a imagem desejada clicando no box escrito "envio de imagem";

  • A imagem enviada deve estar dentro das especificações orientadas na plataforma:

  • Tamanho da imagem: 250 x 250 pixels

  • Tamanho máximo do arquivo: 5MB

  • Formatos suportados: PNG

  • Fundo transparente

Como mostra a imagem abaixo.

Perceba que após enviar a imagem aparecerá um pré visualizador de como ficará o ícone da notificação push. Se a imagem enviada não estiver dentro das especificações não será possível visualizá-lo corretamente.

Como mostra a imagem abaixo:

Observações a serem consideradas

  • É importante saber que a notificação push para dispositivos Android requer um ícone especial. Por isso o fundo da imagem do ícone deve ser transparente. Também deve haver um contorno no ícone;

  • O sistema operacional Android, a partir da versão 5.0 Lollipop, converte todas as cores presentes no ícone de notificação push para branco. Como mostra a imagem abaixo;

  • Sem contorno a imagem da notificação push não será vista e aparecerá uma marca cinza ou branca (1) , dependendo do modelo do celular. Se respeitado as orientações, o ícone da notificação push é visualizado com sucesso (2). Como mostra a imagem abaixo;

  • Não use ícones com fundo colorido pois todas as cores são convertidas para branco. Como mostra a imagem abaixo;

  • Não use ícones com várias cores. Todas as cores convertidas em branco, e o resultado será uma imagem sem detalhes. Como mostra a imagem abaixo;

  • Se o ícone é composto de várias formas, deve-se transformá-lo uma forma única. Como mostra a imagem abaixo;

  • Não use imagens recortadas de fotografias e aplicadas em um fundo transparente, o ícone pode ficar irreconhecível. Como mostra a imagem abaixo;

  • Não use fotografias. Como mostra a imagem abaixo;

Se preferir, veja o vídeo abaixo:

Atualizado em: 16/12/2022