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