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