Pular para o conteúdo principal
Os ícones de notificação push são pequenas imagens que aparecem ao lado de suas notificações. Eles ajudam os usuários a reconhecer rapidamente sua marca, entender o contexto e distinguir suas mensagens de outras. Cada plataforma lida com ícones de forma diferente, portanto, seguir os padrões específicos da plataforma é fundamental para garantir que suas notificações sejam exibidas corretamente. Este guia aborda os ícones de notificação push. Se você está procurando imagens grandes, consulte Imagens e Rich Media.

Melhores práticas para ícones de notificação push

  • Use imagens PNG com transparência sempre que possível.
  • Mantenha os ícones simples e reconhecíveis em tamanhos muito pequenos.
  • Evite textos ou detalhes finos que possam se tornar ilegíveis.
  • Siga as regras específicas da plataforma para tamanho, cor e transparência.
  • Teste notificações em dispositivos reais em todas as plataformas e versões de SO.

Ícones de notificação web

As notificações push web exibem um ícone fornecido no momento do envio ou definido como padrão nas configurações do seu site.
  • Formatos suportados: PNG, JPG, GIF (não animado)
  • O ícone deve ser quadrado. O tamanho recomendado é de 256x256 pixels.
Diferentes navegadores (Chrome, Edge, Safari, Firefox) podem recortar ou dimensionar ícones de forma diferente, dependendo do dispositivo e SO. Um ícone quadrado de 256x256 é recomendado para garantir exibição consistente em todos os navegadores.
Defina o ícone padrão em suas Configurações do Dashboard > Push & In-App > Configurações Web. Você também pode substituir o ícone por notificação usando o dashboard ou a API REST. Consulte Enviar notificações com ícones não padrão para obter detalhes.

Ícone de badge de web push do Android

Em dispositivos Android, as notificações Web Push podem exibir um ícone de badge menor definido pela propriedade badge do Web App Manifest. O ícone de badge é usado em contextos de interface limitados (como a barra de status do Android) e pode não aparecer em todos os dispositivos Android. Embora os ícones de badge não estejam sujeitos às mesmas regras estritas somente alfa dos ícones de notificação pequenos de aplicativos Android, eles ainda são renderizados em interface controlada pelo sistema. Melhores práticas:
  • Use um PNG quadrado com um fundo transparente
  • Mantenha o design simples e de alto contraste
  • Evite texto ou detalhes finos
  • Use monocromático ou cor mínima para melhor consistência
Um tamanho mínimo de 72×72 pixels é recomendado. Imagens maiores são aceitáveis e serão reduzidas conforme necessário.
Ao contrário dos ícones de notificação pequenos de aplicativos Android, os ícones de badge de Web Push podem preservar a cor em alguns dispositivos. No entanto, ícones coloridos ou complexos podem ser renderizados de forma inconsistente, dependendo da versão do Android, navegador e fabricante do dispositivo.
Consulte Enviar notificações com ícones não padrão para obter detalhes.

Ícones de notificação iOS

As notificações iOS sempre usam o ícone do seu aplicativo.
  • O ícone de notificação é derivado automaticamente do ativo de ícone do seu aplicativo
  • Você não pode alterar o ícone de notificação por mensagem
  • Alterar o ícone requer atualizar o ícone do seu aplicativo e lançar uma nova versão do aplicativo
Não há campo de payload de APNs que permita especificar um ícone de notificação personalizado no iOS.Esse comportamento é aplicado pelo iOS e se aplica a notificações push padrão, Alertas Críticos e Live Activities.

Notificações de Comunicação

No iOS 15 e mais recente, a Apple suporta Notificações de Comunicação. Quando implementadas adequadamente, as notificações no estilo de comunicação (como aplicativos de mensagens ou chamadas) podem exibir uma imagem de contato ou remetente em vez do ícone do aplicativo em visualizações do sistema suportadas.
As Notificações de Comunicação são limitadas a casos de uso específicos e requerem adoção explícita das APIs de notificação de comunicação da Apple. Elas não estão disponíveis para notificações de uso geral.

Ícones de notificação Android

O Android (incluindo dispositivos Amazon e Huawei) suporta ícones de notificação Pequenos e Grandes. O Android também suporta Notificações de Conversa que permitem alterar o ícone para a imagem de perfil do usuário.
No Android 8.0+ (API 26+), a aparência da notificação é fortemente influenciada pela interface do sistema, canais de notificação e personalizações do fabricante do dispositivo.
Posicionamento do ícone de notificação Android

Ícones de notificação pequenos

O ícone de notificação pequeno aparece na barra de status e no canto superior esquerdo da notificação. Se nenhum ícone pequeno personalizado for fornecido, o OneSignal exibe um ícone de sino padrão. O Android renderiza ícones de notificação pequenos usando o canal alfa do ícone, não seus dados de cor. O sistema aplica sua própria tonalidade (ou sua cor de destaque configurada) ao exibir o ícone. Requisitos e melhores práticas:
  • Use um ícone de silhueta monocromática em um fundo transparente
  • Projete o ícone de forma que a forma seja definida por transparência, não por cor
  • Evite gradientes, sombras ou arte multicolorida
  • Mantenha o design simples e reconhecível em tamanhos muito pequenos
Uma abordagem comum e recomendada é projetar o ícone como arte branca em um fundo transparente, mas tecnicamente o Android usa a máscara alfa, não a cor branca em si.
Ícones com fundos sólidos ou arte em cores completas podem ser renderizados incorretamente — muitas vezes aparecendo como um quadrado branco, forma recortada ou silhueta inesperada — dependendo do fabricante do dispositivo e da versão do Android.O Android frequentemente ignora informações de cor em ícones de notificação pequenos e deriva a aparência final do canal alfa e tonalização definida pelo sistema ou aplicativo.

Cor de destaque do ícone pequeno

Você pode alterar a cor mostrada ao redor do ícone pequeno da notificação.
Para definir uma cor padrão, adicione a seguinte linha ao seu arquivo res/values/strings.xml no seu projeto. Se você quiser uma cor diferente para o modo escuro, adicione a chave ao seu res/values-night/strings.xml também. Use o valor HEX. Use o Android Asset Studio esquema de cores para assistência.
<resources>
    <string name="onesignal_notification_accent_color">FF00FF00</string>
</resources>
Para definir a cor por notificação, defina android_accent_color na nossa chamada de API Criar notificação ou insira um valor no campo Cor de destaque em Mensagens > Nova Push > Configurações de Plataforma > Opções do Google Android.
Se você adicionou recentemente um recurso de ícone ao seu aplicativo, convém aguardar alguns dias antes de enviar notificações usando o ícone. Isso ocorre porque pode levar muitos dias ou até semanas para que a maioria dos seus usuários atualize seus aplicativos para a versão mais recente que contém seus novos ícones.

Imagens de ícone pequeno personalizadas sem canal alfa

Alguns fabricantes de dispositivos exibem a imagem como está (ignorando a regra do canal alfa). Você pode configurar um layout de notificação personalizado baseado na documentação do Android se desejar usar imagens sem canal alfa em todos os dispositivos. Recomendamos enfaticamente seguir a regra alfa, pois os ícones podem não ter aparência consistente em todos os dispositivos. O Google projetou dessa maneira — o ícone é muito pequeno para ver qualquer detalhe significativo, então impor uma única cor ajuda a reforçar um ícone mais fácil de reconhecer rapidamente.

Ícones de notificação grandes

O ícone grande aparece no lado direito da notificação Android.
  • Tamanho recomendado: 256×256 pixels
  • Formato: PNG ou JPG
  • Se não definido, o Android pode reutilizar o ícone pequeno

Como adicionar ícones padrão do Android

Recomendamos fortemente configurar ícones de notificação padrão para cada aplicativo baseado em Android (Google Play, Amazon, Huawei). Ícones ausentes ou configurados incorretamente são a causa mais comum de renderização de notificação quebrada. O Android suporta dois ícones padrão:
  • Ícone de notificação pequeno (obrigatório)
  • Ícone de notificação grande (opcional, mas recomendado)
1

Gerar o ícone de notificação pequeno

O ícone de notificação pequeno aparece na barra de status e no cabeçalho da notificação.Requisitos:
  • Ícone de silhueta monocromática
  • Fundo transparente (canal alfa obrigatório)
  • Sem cores, gradientes ou sombras
Uma abordagem comum e recomendada é um ícone branco em um fundo transparente, mas o Android usa o canal alfa, não a cor branca em si.
A maneira mais rápida e segura de gerar ícones pequenos compatíveis é usando Android Asset Studio – Ícones de Notificação.
Nomeie o ícone: ic_stat_onesignal_default
2

Criar tamanhos de ícone pequeno obrigatórios

Obrigatório: Você deve incluir todas as variantes de densidade para o ícone pequeno. Faltando qualquer tamanho pode fazer com que o Android retorne a um ícone padrão do sistema.
Nome do íconeDensidade (dp)Tamanho (px)
ic_stat_onesignal_defaultMDPI24x24
ic_stat_onesignal_defaultHDPI36x36
ic_stat_onesignal_defaultXHDPI48x48
ic_stat_onesignal_defaultXXHDPI72x72
ic_stat_onesignal_defaultXXXHDPI96x96
3

Gerar o ícone de notificação grande (opcional)

Melhores práticas:
  • Imagem quadrada
  • PNG ou JPG
  • Fundo transparente recomendado
  • Tamanho recomendado: 256×256 px
Ao contrário dos ícones pequenos:
  • Cor é permitida
  • Somente alfa não é obrigatório
  • Apenas um tamanho é necessário
Nome do arquivo obrigatório: ic_onesignal_large_icon_default.png
4

Colocar ícones nos caminhos corretos do projeto

Cada ícone deve ser colocado no diretório de recursos correto para sua estrutura. Certifique-se de que os seguintes caminhos existam; crie quaisquer pastas que estejam faltando.Obrigatório: Cada imagem deve estar presente nos seguintes caminhos:
  • res/drawable-mdpi/ (24x24)
  • res/drawable-hdpi/ (36x36)
  • res/drawable-xhdpi/ (48x48)
  • res/drawable-xxhdpi/ (72x72)
  • res/drawable-xxxhdpi/ (96x96)
  • res/drawable-xxxhdpi/ (256x256) (Ícone Grande)
Seu projeto deve se parecer com isso (dependendo do seu SDK):
Se você vir um quadrado sólido em vez do seu ícone, a imagem não possui transparência adequada.
Se você vir o ícone de sino do OneSignal, um ou mais tamanhos de ícone pequeno obrigatórios estão faltando ou colocados no diretório errado.
Seu aplicativo Android agora está configurado corretamente com ícones de notificação padrão.

Enviar notificações com ícones não padrão

Ao enviar notificações push do dashboard do OneSignal ou API REST, você pode substituir os ícones padrão por ícones personalizados para notificações Android, Amazon, Huawei e Web Push. Você não pode substituir o ícone para notificações iOS.

Parâmetros da API REST

Parâmetros da API REST Android, Amazon e Huawei:
small_icon
string
Amazon: adm_small_icon Huawei: huawei_small_iconPara o ícone pequeno, a imagem deve existir dentro do mesmo caminho de projeto que o ícone pequeno padrão. Ela não pode usar uma URL remota. Consulte Como adicionar ícones padrão do Android para obter detalhes sobre onde adicionar seus ícones personalizados.Defina o nome do ícone sem a extensão do arquivo nos parâmetros da API REST.Exemplo: "small_icon": "my_custom_icon_name_without_extension"
large_icon
string
Amazon: adm_large_icon Huawei: huawei_large_iconPara o ícone grande, a imagem pode existir dentro do mesmo caminho de projeto que o ícone grande padrão ou como uma URL remota. Consulte Como adicionar ícones padrão do Android para obter detalhes sobre onde adicionar seus ícones personalizados.Defina o nome do ícone sem a extensão do arquivo nos parâmetros da API REST.Exemplo: "large_icon": "my_custom_icon_name_without_extension"
Parâmetro da API REST Web Push:
chrome_web_icon
string
Firefox: firefox_iconA URL para o recurso de imagem. Deve ser a URL direta para o recurso de imagem.Exemplo: "chrome_web_icon": "https://example.com/my_custom_icon.png"
chrome_web_badge
string
A URL para o recurso de imagem. Deve ser a URL direta para o recurso de imagem.Exemplo: "chrome_web_badge": "https://example.com/my_custom_icon.png"

Dashboard

No dashboard do OneSignal, usando o formulário Mensagens > Push > Nova Push ou Modelos, navegue até as opções específicas da plataforma. Para Android, Amazon e Huawei, se o arquivo existir dentro do mesmo caminho de projeto que o ícone padrão, defina os nomes dos ícones sem a extensão do arquivo. Com Ícones de Notificação Grandes, você também pode fornecer uma URL direta de onde o ícone será exibido.