Ícones de notificação

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. Para imagens grandes anexadas a notificações, 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. Se nenhum ícone for fornecido, um ícone de sino padrão é usado.

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. Se nenhum ícone de badge for fornecido, o padrão é o ícone do navegador. 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. Exemplo de ícone de badge pequeno: https://i.imgur.com/9QFB20F.png

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.

Í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.

Android notification showing small icon accent color

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.

Os ícones padrão são incluídos dentro do seu aplicativo, não enviados para o dashboard do OneSignal. Você os adiciona aos diretórios de recursos do seu projeto (ou usa uma configuração de plugin para o Expo), e o SDK do OneSignal os utiliza automaticamente.

O Android suporta dois ícones padrão:

Ícone de notificação pequeno (obrigatório)
Ícone de notificação grande (opcional, mas recomendado)

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

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 ícone	Densidade (dp)	Tamanho (px)
`ic_stat_onesignal_default`	MDPI	24x24
`ic_stat_onesignal_default`	HDPI	36x36
`ic_stat_onesignal_default`	XHDPI	48x48
`ic_stat_onesignal_default`	XXHDPI	72x72
`ic_stat_onesignal_default`	XXXHDPI	96x96

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

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)

Assets/Plugins/Android/OneSignalConfig.androidlib/src/main/res/drawable-mdpi/ (24x24)
Assets/Plugins/Android/OneSignalConfig.androidlib/src/main/res/drawable-hdpi/ (36x36)
Assets/Plugins/Android/OneSignalConfig.androidlib/src/main/res/drawable-xhdpi/ (48x48)
Assets/Plugins/Android/OneSignalConfig.androidlib/src/main/res/drawable-xxhdpi/ (72x72)
Assets/Plugins/Android/OneSignalConfig.androidlib/src/main/res/drawable-xxxhdpi/ (96x96)
Assets/Plugins/Android/OneSignalConfig.androidlib/src/main/res/drawable-xxxhdpi/ (256x256) (Ícone Grande)

<project-root>/platforms/android/app/src/main/res/drawable-mdpi/ (24x24)
<project-root>/platforms/android/app/src/main/res/drawable-hdpi/ (36x36)
<project-root>/platforms/android/app/src/main/res/drawable-xhdpi/ (48x48)
<project-root>/platforms/android/app/src/main/res/drawable-xxhdpi/ (72x72)
<project-root>/platforms/android/app/src/main/res/drawable-xxxhdpi/ (96x96)
<project-root>/platforms/android/app/src/main/res/drawable-xxxhdpi/ (256x256) (Ícone Grande)

Com versões do Cordova anteriores a 7.0, você precisará usar <project-root>/platforms/android/res/drawable-{size}/ em vez do caminho mostrado acima ao adicionar o recurso de ícone ao config.xml

android/app/src/main/res/drawable-mdpi/ (24x24)
android/app/src/main/res/drawable-hdpi/ (36x36)
android/app/src/main/res/drawable-xhdpi/ (48x48)
android/app/src/main/res/drawable-xxhdpi/ (72x72)
android/app/src/main/res/drawable-xxxhdpi/ (96x96)
android/app/src/main/res/drawable-xxxhdpi/ (256x256) (Ícone Grande)

Atalho Expo: Se você usa o onesignal-expo-plugin, pode fornecer um único PNG de origem 96x96 e o plugin gera todas as variantes de densidade automaticamente. Adicione-o ao seu app.json ou app.config.js:

{
  "plugins": [
    ["onesignal-expo-plugin", {
      "mode": "production",
      "smallIcons": ["./assets/ic_stat_onesignal_default.png"],
      "largeIcons": ["./assets/ic_onesignal_large_icon_default.png"]
    }]
  ]
}

Você não precisa criar manualmente os subdiretórios android/ — o plugin coloca os arquivos gerados nas pastas drawable corretas no momento do build. Consulte Configuração do SDK React Native / Expo para a configuração completa do plugin.

Resources/Images/drawable-mdpi/ (24x24)
Resources/Images/drawable-hdpi/ (36x36)
Resources/Images/drawable-xhdpi/ (48x48)
Resources/Images/drawable-xxhdpi/ (72x72)
Resources/Images/drawable-xxxhdpi/ (96x96)
Resources/Images/drawable-xxxhdpi/ (256x256) (Ícone Grande)

android/app/src/main/res/drawable-mdpi/ (24x24)
android/app/src/main/res/drawable-hdpi/ (36x36)
android/app/src/main/res/drawable-xhdpi/ (48x48)
android/app/src/main/res/drawable-xxhdpi/ (72x72)
android/app/src/main/res/drawable-xxxhdpi/ (96x96)
android/app/src/main/res/drawable-xxxhdpi/ (256x256) (Ícone Grande)

Seu projeto deve se parecer com isso (dependendo do seu SDK):

Android project directory structure showing icon files in drawable folders

Solução de problemas de exibição de ícones:

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://i.imgur.com/9QFB20F.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.

FAQ

Por que o meu ícone pequeno do Android aparece como um quadrado branco ou cinza?

A imagem não possui transparência adequada. O Android renderiza ícones de notificação pequenos usando apenas o canal alfa — quaisquer pixels totalmente opacos com um fundo sólido aparecem como um quadrado preenchido. Regenere o ícone como uma silhueta monocromática em um fundo transparente usando o Android Asset Studio.

Por que o ícone de sino do OneSignal aparece em vez do meu ícone personalizado?

Uma ou mais variantes de densidade obrigatórias do ícone pequeno estão faltando ou colocadas no diretório drawable errado. Você deve incluir todos os cinco tamanhos (MDPI a XXXHDPI) com o nome de arquivo exato ic_stat_onesignal_default. Consulte Como adicionar ícones padrão do Android para os caminhos corretos.

Posso alterar o ícone de notificação do iOS por mensagem?

Não. O iOS sempre usa o ícone do seu aplicativo para notificações push. Não há campo de payload de APNs para substituí-lo. Alterar o ícone requer atualizar o ativo de ícone do seu aplicativo e lançar uma nova versão do aplicativo.

Qual tamanho deve ter o meu ícone de web push?

Use uma imagem PNG quadrada de 256x256 pixels. Diferentes navegadores e sistemas operacionais podem recortar ou dimensionar o ícone, mas 256x256 oferece a melhor consistência entre Chrome, Firefox, Edge e Safari.

Posso usar uma URL para o ícone pequeno do Android?

Não. O ícone pequeno do Android deve ser um arquivo de recurso local incluído no seu aplicativo. Apenas o ícone grande suporta URLs remotas.

Como adiciono ícones de notificação no Expo?

Com o onesignal-expo-plugin, você fornece um único PNG de origem (96x96 para ícones pequenos, 256x256 para ícones grandes) e o referencia em app.json ou app.config.js nos arrays smallIcons e largeIcons. O plugin gera automaticamente todas as variantes de densidade e as coloca nos diretórios android/ corretos no momento do build. Você não precisa criar pastas drawable manualmente. Consulte a aba Expo em “Colocar ícones nos caminhos corretos do projeto” para um exemplo de configuração.

Devo fazer upload dos ícones padrão para o dashboard do OneSignal?

Não. Os ícones de notificação padrão são incluídos dentro do binário do seu aplicativo, não enviados para o OneSignal. Você os adiciona aos diretórios de recursos do seu projeto (ou à configuração de plugin para o Expo), e o SDK do OneSignal os utiliza automaticamente. O dashboard do OneSignal permite apenas substituir ícones por mensagem para Android e Web Push.

Páginas relacionadas

Imagens e rich media

Anexe imagens grandes, GIFs e vídeos a notificações push.

Categorias de notificação Android

Crie e gerencie canais de notificação Android para som, vibração e importância personalizados.

Configuração de web push

Configure seu site para notificações web push, incluindo configurações de ícone padrão.

API Criar mensagem

Envie notificações push com ícones personalizados usando a API REST.

Primeiros passos & configurações

Canais de mensagem

Jornadas

Público & eventos personalizados

Análises & Integrações

Privacidade & Segurança

Ícones de notificação

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