Iconos de notificación

Los iconos de notificación push son imágenes pequeñas que aparecen junto a sus notificaciones. Ayudan a los usuarios a reconocer rápidamente su marca, comprender el contexto y distinguir sus mensajes de otros. Cada plataforma maneja los iconos de manera diferente, por lo que seguir los estándares específicos de la plataforma es fundamental para garantizar que sus notificaciones se muestren correctamente. Para imágenes grandes adjuntas a notificaciones, consulte Imágenes y medios enriquecidos.

Mejores prácticas para iconos de notificación push

Use imágenes PNG con transparencia siempre que sea posible.
Mantenga los iconos simples y reconocibles en tamaños muy pequeños.
Evite texto o detalles finos que puedan volverse ilegibles.
Siga las reglas específicas de la plataforma para tamaño, color y transparencia.
Pruebe las notificaciones en dispositivos reales en diferentes plataformas y versiones de SO.

Iconos de notificación web

Las notificaciones push web muestran un icono proporcionado en el momento del envío o definido como predeterminado en la configuración de su sitio. Si no se proporciona ningún icono, se utiliza un icono de campana predeterminado.

Formatos compatibles: PNG, JPG, GIF (no animado)
El icono debe ser cuadrado. El tamaño recomendado es de 256x256 píxeles.

Los diferentes navegadores (Chrome, Edge, Safari, Firefox) pueden recortar o escalar los iconos de manera diferente según el dispositivo y el SO. Se recomienda un icono cuadrado de 256x256 para garantizar una visualización consistente en todos los navegadores.

Configure el icono predeterminado en Configuración del panel > Push y dentro de la app > Configuración web. También puede anular el icono por notificación usando el panel o la API REST. Consulte Enviar notificaciones con iconos no predeterminados para obtener detalles.

Icono de insignia de push web de Android

En dispositivos Android, las notificaciones de Web Push pueden mostrar un icono de insignia más pequeño definido por la propiedad badge del Manifiesto de aplicación web. El icono de insignia se usa en contextos de UI limitados (como la barra de estado de Android) y puede que no aparezca en todos los dispositivos Android. Si no se proporciona ningún icono de insignia, el predeterminado es el icono del navegador. Si bien los iconos de insignia no están sujetos a las mismas reglas estrictas de solo alfa que los iconos de notificación pequeños de aplicaciones Android, aún se renderizan en la UI controlada por el sistema. Mejores prácticas:

Use un PNG cuadrado con un fondo transparente
Mantenga el diseño simple y de alto contraste
Evite texto o detalles finos
Use monocromo o color mínimo para obtener la mejor consistencia

Se recomienda un tamaño mínimo de 72×72 píxeles. Se aceptan imágenes más grandes y se reducirán según sea necesario. Ejemplo de icono de insignia pequeño: https://i.imgur.com/9QFB20F.png

Ejemplo de cómo se muestra el icono de insignia en la barra de estado de Android usando el ejemplo de icono de insignia.

A diferencia de los iconos de notificación pequeños de aplicaciones Android, los iconos de insignia de Web Push pueden conservar el color en algunos dispositivos. Sin embargo, los iconos de color completo o complejos pueden renderizarse de manera inconsistente según la versión de Android, el navegador y el fabricante del dispositivo.

Consulte Enviar notificaciones con iconos no predeterminados para obtener detalles.

Iconos de notificación de iOS

Las notificaciones de iOS siempre usan el icono de su aplicación.

El icono de notificación se deriva automáticamente del recurso de icono de su aplicación
No puede cambiar el icono de notificación por mensaje
Cambiar el icono requiere actualizar el icono de su aplicación y publicar una nueva versión de la aplicación

No hay ningún campo de carga útil de APNs que le permita especificar un icono de notificación personalizado en iOS.Este comportamiento es aplicado por iOS y se aplica a las notificaciones push estándar, Alertas críticas y Actividades en vivo.

Notificaciones de comunicación

En iOS 15 y versiones más recientes, Apple admite Notificaciones de comunicación. Cuando se implementan correctamente, las notificaciones estilo comunicación (como aplicaciones de mensajería o llamadas) pueden mostrar una imagen de contacto o remitente en lugar del icono de la aplicación en las vistas del sistema compatibles.

Las Notificaciones de comunicación están limitadas a casos de uso específicos y requieren la adopción explícita de las API de notificaciones de comunicación de Apple. No están disponibles para notificaciones de propósito general.

Iconos de notificación de Android

Android (incluidos los dispositivos Amazon y Huawei) admite iconos de notificación pequeños y grandes. Android también admite Notificaciones de conversación que le permiten cambiar el icono a la imagen de perfil del usuario.

En Android 8.0+ (API 26+), la apariencia de las notificaciones está fuertemente influenciada por la UI del sistema, los canales de notificación y las personalizaciones del fabricante del dispositivo.

Iconos de notificación pequeños

El icono de notificación pequeño aparece en la barra de estado y en la parte superior izquierda de la notificación. Si no se proporciona un icono pequeño personalizado, OneSignal muestra un icono de campana predeterminado. Android renderiza los iconos de notificación pequeños usando el canal alfa del icono, no sus datos de color. El sistema aplica su propio tinte (o su color de acento configurado) al mostrar el icono. Requisitos y mejores prácticas:

Use un icono de silueta monocromático sobre un fondo transparente
Diseñe el icono para que la forma esté definida por la transparencia, no por el color
Evite degradados, sombras o ilustraciones multicolores
Mantenga el diseño simple y reconocible en tamaños muy pequeños

Un enfoque común y recomendado es diseñar el icono como ilustración blanca sobre un fondo transparente, pero técnicamente Android usa la máscara alfa, no el color blanco en sí.

Los iconos con fondos sólidos o ilustraciones de color completo pueden renderizarse incorrectamente, a menudo apareciendo como un cuadrado blanco, forma recortada o silueta inesperada, según el fabricante del dispositivo y la versión de Android.Android a menudo ignora la información de color en los iconos de notificación pequeños y deriva la apariencia final del canal alfa y el tinte definido por el sistema o la aplicación.

Color de acento del icono pequeño

Puede cambiar el color que se muestra alrededor del icono pequeño de la notificación.

Android notification showing small icon accent color

Para establecer un color predeterminado, agregue la siguiente línea a su archivo res/values/strings.xml en su proyecto. Si desea un color diferente para el modo oscuro, agregue también la clave a su res/values-night/strings.xml. Use el valor HEX. Use el esquema de colores de Android Asset Studio para obtener ayuda.

<resources>
    <string name="onesignal_notification_accent_color">FF00FF00</string>
</resources>

Para establecer el color por notificación, configure android_accent_color en nuestra llamada API de Crear notificación o ingrese un valor en el campo Color de acento en Mensajes > Nuevo Push > Configuración de plataforma > Opciones de Google Android.

Si agregó recientemente un recurso de icono a su aplicación, es posible que desee esperar unos días antes de enviar notificaciones usando el icono. Esto se debe a que puede tomar muchos días o incluso semanas para que la mayoría de sus usuarios actualicen sus aplicaciones a la última versión que contiene sus nuevos iconos.

Imágenes de iconos pequeños personalizados sin canal alfa

Algunos fabricantes de dispositivos muestran la imagen tal como está (ignorando la regla del canal alfa). Puede configurar un diseño de notificación personalizado basado en la documentación de Android si desea usar imágenes sin canal alfa en todos los dispositivos. Recomendamos encarecidamente seguir la regla alfa, ya que los iconos pueden no verse consistentes en todos los dispositivos. Google lo diseñó de esta manera: el icono es demasiado pequeño para ver cualquier detalle significativo, por lo que aplicar un solo color ayuda a que el icono sea más fácil de reconocer de un vistazo.

Iconos de notificación grandes

El icono grande aparece en el lado derecho de la notificación de Android.

Tamaño recomendado: 256×256 píxeles
Formato: PNG o JPG
Si no se establece, Android puede reutilizar el icono pequeño

Cómo agregar iconos predeterminados de Android

Recomendamos encarecidamente configurar iconos de notificación predeterminados para cada aplicación basada en Android (Google Play, Amazon, Huawei). Los iconos faltantes o configurados incorrectamente son la causa más común de renderización de notificaciones defectuosas.

Los iconos predeterminados se incluyen dentro de su aplicación, no se cargan en el panel de OneSignal. Los agrega a los directorios de recursos de su proyecto (o usa una configuración de plugin para Expo), y el SDK de OneSignal los usa automáticamente.

Android admite dos iconos predeterminados:

Icono de notificación pequeño (obligatorio)
Icono de notificación grande (opcional pero recomendado)

Generar el icono de notificación pequeño

El icono de notificación pequeño aparece en la barra de estado y el encabezado de notificación.Requisitos:

Icono de silueta monocromático
Fondo transparente (se requiere canal alfa)
Sin colores, degradados o sombras

Un enfoque común y recomendado es un icono blanco sobre un fondo transparente, pero Android usa el canal alfa, no el color blanco en sí.

La forma más rápida y segura de generar iconos pequeños compatibles es usar Android Asset Studio – Iconos de notificación.

Nombre del icono: ic_stat_onesignal_default

Crear los tamaños de icono pequeño requeridos

Obligatorio: Debe incluir todas las variantes de densidad para el icono pequeño. Faltar cualquier tamaño puede hacer que Android recurra a un icono predeterminado del sistema.

Nombre del icono	Densidad (dp)	Tamaño (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

Generar el icono de notificación grande (opcional)

Mejores prácticas:

Imagen cuadrada
PNG o JPG
Se recomienda fondo transparente
Tamaño recomendado: 256×256 px

A diferencia de los iconos pequeños:

Se permite el color
No se requiere solo alfa
Solo se necesita un tamaño

Nombre de archivo requerido: ic_onesignal_large_icon_default.png

Colocar los iconos en las rutas de proyecto correctas

Cada icono debe colocarse en el directorio de recursos correcto para su marco de trabajo. Asegúrese de que existan las siguientes rutas; cree cualquier carpeta que le falte.Obligatorio: Cada imagen debe estar presente en las siguientes rutas:

res/drawable-mdpi/ (24x24)
res/drawable-hdpi/ (36x36)
res/drawable-xhdpi/ (48x48)
res/drawable-xxhdpi/ (72x72)
res/drawable-xxxhdpi/ (96x96)
res/drawable-xxxhdpi/ (256x256) (Large Icon)

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) (Large Icon)

<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) (Large Icon)

With versions of Cordova before 7.0, you will need to use <project-root>/platforms/android/res/drawable-{size}/ instead of the path shown above when adding the icon resource to 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) (Large Icon)

Atajo de Expo: Si usa el onesignal-expo-plugin, puede proporcionar un único PNG fuente de 96x96 y el plugin genera automáticamente todas las variantes de densidad. Agréguelo a su app.json o app.config.js:

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

No necesita crear manualmente los subdirectorios de android/ — el plugin coloca los archivos generados en las carpetas drawable correctas en el momento de la compilación. Consulte React Native / Expo SDK setup para la configuración completa del 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) (Large Icon)

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) (Large Icon)

Su proyecto debería verse similar a esto (dependiendo de su SDK):

Android project directory structure showing icon files in drawable folders — Proyecto Android Native con archivos de icono en las carpetas drawable

Solución de problemas de visualización de iconos:

Si ve un cuadrado sólido en lugar de su icono, la imagen no tiene la transparencia adecuada.
Si ve el icono de campana de OneSignal, faltan uno o más tamaños de icono pequeño requeridos o están ubicados en el directorio incorrecto.

Su aplicación Android ahora está configurada correctamente con iconos de notificación predeterminados.

Enviar notificaciones con iconos no predeterminados

Al enviar notificaciones push desde el panel de OneSignal o la API REST, puede anular los iconos predeterminados con iconos personalizados para notificaciones de Android, Amazon, Huawei y Web Push. No puede anular el icono para notificaciones de iOS.

Parámetros de la API REST

Parámetros de la API REST de Android, Amazon y Huawei:

small_icon

string

Amazon: adm_small_icon Huawei: huawei_small_iconPara el icono pequeño, la imagen debe existir dentro de la misma ruta de proyecto que el icono pequeño predeterminado. No puede usar una URL remota. Consulte Cómo agregar iconos predeterminados de Android para obtener detalles sobre dónde agregar sus iconos personalizados.Establezca el nombre del icono sin la extensión del archivo en los parámetros de la API REST.Ejemplo: "small_icon": "my_custom_icon_name_without_extension"

large_icon

string

Amazon: adm_large_icon Huawei: huawei_large_iconPara el icono grande, la imagen puede existir dentro de la misma ruta de proyecto que el icono grande predeterminado o como una URL remota. Consulte Cómo agregar iconos predeterminados de Android para obtener detalles sobre dónde agregar sus iconos personalizados.Establezca el nombre del icono sin la extensión del archivo en los parámetros de la API REST.Ejemplo: "large_icon": "my_custom_icon_name_without_extension"

Parámetro de la API REST de Web Push:

chrome_web_icon

string

Firefox: firefox_iconLa URL del recurso de imagen. Debe ser la URL directa al recurso de imagen.Ejemplo: "chrome_web_icon": "https://example.com/my_custom_icon.png"

chrome_web_badge

string

La URL del recurso de imagen. Debe ser la URL directa al recurso de imagen.Ejemplo: "chrome_web_badge": "https://i.imgur.com/9QFB20F.png"

Panel de control

En el panel de OneSignal, usando el formulario Mensajes > Push > Nuevo Push o Plantillas, navegue a las opciones específicas de la plataforma. Para Android, Amazon y Huawei, si el archivo existe dentro de la misma ruta de proyecto que el icono predeterminado, establezca los nombres de los iconos sin la extensión del archivo. Con los Iconos de notificación grandes, también puede proporcionar una URL directa desde donde se mostrará el icono.

Panel de OneSignal, donde anular los iconos predeterminados.

Preguntas frecuentes

¿Por qué mi icono pequeño de Android aparece como un cuadrado blanco o gris?

La imagen no tiene la transparencia adecuada. Android renderiza los iconos de notificación pequeños usando únicamente el canal alfa — cualquier píxel completamente opaco con un fondo sólido aparece como un cuadrado relleno. Regenere el icono como una silueta monocromática sobre un fondo transparente usando Android Asset Studio.

¿Por qué aparece el icono de campana de OneSignal en lugar de mi icono personalizado?

Una o más variantes de densidad requeridas del icono pequeño faltan o están ubicadas en el directorio drawable incorrecto. Debe incluir los cinco tamaños (MDPI a XXXHDPI) con el nombre de archivo exacto ic_stat_onesignal_default. Consulte Cómo agregar iconos predeterminados de Android para las rutas correctas.

¿Puedo cambiar el icono de notificación de iOS por mensaje?

No. iOS siempre usa el icono de su aplicación para las notificaciones push. No hay ningún campo de carga útil de APNs para anularlo. Cambiar el icono requiere actualizar el recurso del icono de su aplicación y publicar una nueva versión de la app.

¿Qué tamaño debe tener mi icono de web push?

Use una imagen PNG cuadrada de 256x256 píxeles. Los distintos navegadores y sistemas operativos pueden recortar o escalar el icono, pero 256x256 proporciona la mejor consistencia entre Chrome, Firefox, Edge y Safari.

¿Puedo usar una URL para el icono pequeño de Android?

No. El icono pequeño de Android debe ser un archivo de recurso local incluido en su aplicación. Solo el icono grande admite URLs remotas.

¿Cómo agrego iconos de notificación en Expo?

Con el onesignal-expo-plugin, proporciona un único PNG fuente (96x96 para iconos pequeños, 256x256 para iconos grandes) y lo referencia en app.json o app.config.js bajo los arrays smallIcons y largeIcons. El plugin genera automáticamente todas las variantes de densidad y las coloca en los directorios android/ correctos en el momento de la compilación. No necesita crear carpetas drawable manualmente. Consulte la pestaña Expo en “Colocar los iconos en las rutas de proyecto correctas” para ver un ejemplo de configuración.

¿Subo los iconos predeterminados al panel de OneSignal?

No. Los iconos de notificación predeterminados se incluyen dentro del binario de su aplicación, no se cargan en OneSignal. Los agrega a los directorios de recursos de su proyecto (o a la configuración del plugin para Expo), y el SDK de OneSignal los usa automáticamente. El panel de OneSignal solo le permite anular iconos por mensaje para Android y Web Push.

Páginas relacionadas

Imágenes y medios enriquecidos

Adjunte imágenes grandes, GIFs y vídeos a las notificaciones push.

Categorías de notificación de Android

Cree y administre canales de notificación de Android para sonido, vibración e importancia personalizados.

Configuración de web push

Configure su sitio para notificaciones push web, incluida la configuración del icono predeterminado.

API de crear mensaje

Envíe notificaciones push con iconos personalizados usando la API REST.

Primeros pasos & configuraciones

Canales de mensajería

Journeys

Audiencia & eventos personalizados

Analítica & Integraciones

Privacidad & Seguridad

Iconos de notificación

Mejores prácticas para iconos de notificación push