Skip to main content
Configure los iconos de notificación push para que los usuarios puedan reconocer su aplicación en el panel de notificaciones y en la pantalla de bloqueo. Android, iOS y Web usan cada uno una fuente de icono diferente. Para imágenes grandes adjuntas a notificaciones, consulte Imágenes y medios enriquecidos.
Notificación push con un icono de insignia pequeño, icono grande e imagen

Ejemplo de una notificación de Web Push de Android Chrome con icono de insignia pequeño, icono grande e imagen.

Iconos de notificación de Android

Android (incluidos los dispositivos Amazon y Huawei) admite iconos de notificación pequeños y grandes. En Android 8.0+ (API 26+), las categorías de notificación y la UI del fabricante también afectan cómo se ve la notificación. Android también admite Notificaciones de conversación que pueden mostrar la imagen de perfil de una persona en lugar de su icono.
Notificación de Android mostrando la ubicación del icono pequeño, el icono grande y el color de acento

Iconos de notificación pequeños

El icono de notificación pequeño es obligatorio. Aparece en la barra de estado como una silueta monocromática. Si no proporciona un icono pequeño personalizado, OneSignal usa un icono de campana predeterminado. La ubicación del icono en la notificación cambia en Android 17 (API 37). Consulte Icono de inicio en la notificación. Android renderiza los iconos de notificación pequeños usando el canal alfa del icono, no sus datos de color. A partir de Android 12 (API 31), el sistema tiñe esa silueta con el color de acento de notificación que usted configure. Si no configura un color, usa el color del tema del sistema. Consulte Diseño de notificaciones de Android. Requisitos:
  • 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 es ilustración blanca sobre un fondo transparente. Android usa la máscara alfa, no el color blanco en sí.
Los iconos con fondos sólidos o ilustraciones de color completo a menudo se renderizan como un cuadrado blanco, una forma recortada o una silueta inesperada. Android ignora el color en los iconos de notificación pequeños y deriva la apariencia del canal alfa más el tinte del sistema o de la aplicación.
No puede forzar un icono pequeño de color completo en Android estándar. Los diseños de notificación personalizados en Android 12 (API 31) y versiones más recientes siguen mostrando el icono pequeño teñido por el sistema. Algunos fabricantes ignoran el canal alfa y muestran una imagen de color completo. No dependa de eso. Incluya siempre un icono de canal alfa compatible.

Icono de inicio en la notificación (Android 17)

A partir de Android 17 (API 37), Android muestra el icono de inicio de su aplicación en la notificación en lugar del icono pequeño. El icono pequeño sigue apareciendo en la barra de estado. Este es un comportamiento del sistema Android que se aplica a todas las notificaciones, y la apariencia exacta puede variar según el fabricante del dispositivo. Para mostrar el icono pequeño en la notificación en su lugar, configure el extra EXTRA_PREFER_SMALL_ICON de Android. El SDK de OneSignal no configura este extra de forma predeterminada. Agréguelo en su extensión de servicio de notificaciones. Anote la clase con @Keep y regístrela en el manifiesto como se muestra en esa página.
La clave de cadena funciona con cualquier versión de compileSdk. Android 16 (API 36) y versiones anteriores ignoran el extra, por lo que es seguro configurarlo incondicionalmente.

Color de acento del icono pequeño

Puede configurar el color de acento de la notificación que Android 12 (API 31) y versiones más recientes usan para teñir el icono pequeño. Esto corresponde al Notification.color (setColor) de Android. No es lo mismo que colorear el fondo de la notificación (setColorized), que Android reserva para tareas en curso de alta prioridad. El color de acento es una propiedad por notificación, no una propiedad del canal. Las categorías de notificación de Android controlan el sonido, la importancia, la vibración, el color del LED y las insignias. Las categorías no tienen configuración de color de acento, y su color de acento se aplica independientemente de la categoría en la que se muestre la notificación.
En Android 17 (API 37) y versiones más recientes, es posible que el color de acento no aparezca en la notificación cuando se está mostrando el icono de inicio. El icono pequeño de la barra de estado se sigue tiñendo.
Notificación de Android mostrando el color de acento del icono pequeño
El SDK resuelve el color de acento en este orden. El primer valor encontrado gana:
  1. Por mensaje: el parámetro android_accent_color (Google Android) o huawei_accent_color (Huawei) en la API Crear mensaje, o el campo Accent color en Messages > Push > New Push > Platform Settings > Google Android Options.
  2. Predeterminado de la aplicación mediante recursos: el recurso de cadena onesignal_notification_accent_color.
  3. Predeterminado de la aplicación mediante el manifiesto: la entrada meta-data com.onesignal.NotificationAccentColor.DEFAULT en AndroidManifest.xml.
Use un valor hexadecimal ARGB sin # (por ejemplo, FF00FF00). Puede previsualizar colores en Android Asset Studio. Para establecer un color predeterminado con recursos, agregue la siguiente línea a su archivo res/values/strings.xml. Para un color diferente en modo oscuro, agregue la misma clave a res/values-night/strings.xml.
Para establecer el predeterminado en el manifiesto en su lugar, agregue esto dentro de la etiqueta <application>:
Para un control total en el momento de la visualización, configure el color desde una extensión de servicio de notificaciones usando notification.setExtender con builder.setColor(). El extender se ejecuta después de que el SDK aplica los valores anteriores, por lo que los anula todos.

Iconos de notificación grandes

El icono grande es opcional. Aparece en el lado derecho de la notificación. La guía de diseño de Android es usarlo solo cuando la imagen refuerza el contenido de la notificación, como la foto de un remitente, el logotipo de una fuente de terceros o un símbolo significativo. No use el icono grande como un segundo icono de aplicación ni para branding. Consulte The large icon.
  • Tamaño recomendado: 256×256 píxeles
  • Formato: PNG o JPG
  • Se permite el color. No se requiere solo alfa.
Si no configura un icono grande, ese espacio queda vacío en Android estándar. Algunos fabricantes muestran el icono de inicio de la aplicación en su lugar.

Cómo agregar iconos predeterminados de Android

Configure iconos predeterminados para cada aplicación basada en Android (Google Play, Amazon, Huawei). Finalice primero la Configuración del SDK de Android (o su configuración multiplataforma). Agregue los archivos a los directorios de recursos de su proyecto (o a una configuración de plugin para Expo), recompile y publique. Los archivos faltantes o con nombres incorrectos son la causa más común de renderización defectuosa. Los iconos predeterminados se incluyen en el binario de la aplicación. No se cargan en el panel de OneSignal. Después de publicar, espere hasta que la mayoría de los usuarios actualicen antes de enviar notificaciones que dependan de un nuevo nombre de icono.
1

Generar el icono de notificación pequeño

Genere una silueta sobre un fondo transparente usando Android Asset Studio – Iconos de notificación. Siga los requisitos del icono pequeño.Nombre del icono: ic_stat_onesignal_default
2

Crear los tamaños de icono pequeño requeridos

Incluya 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. Estos tamaños son 24dp en cada densidad, que es el tamaño de icono de la barra de estado de Android.
3

Generar el icono de notificación grande (opcional)

Use un PNG o JPG de 256×256. Se permite el color. Solo se necesita un tamaño.Nombre de archivo requerido: ic_onesignal_large_icon_default.png
4

Colocar los iconos en las rutas de proyecto correctas

Cree cualquier carpeta que le falte. Coloque cada densidad del icono pequeño en su carpeta drawable. Coloque el icono grande en drawable-xxxhdpi/ junto al icono pequeño XXXHDPI. Los dos archivos comparten una carpeta y usan nombres diferentes.
Iconos pequeños (ic_stat_onesignal_default):
  • res/drawable-mdpi/ (24×24)
  • res/drawable-hdpi/ (36×36)
  • res/drawable-xhdpi/ (48×48)
  • res/drawable-xxhdpi/ (72×72)
  • res/drawable-xxxhdpi/ (96×96)
Icono grande (ic_onesignal_large_icon_default.png, 256×256):
  • res/drawable-xxxhdpi/
Su proyecto debería verse similar a esto (dependiendo de su SDK):
Estructura de directorios de un proyecto Android mostrando archivos de icono en las carpetas drawable

Proyecto Android Native con archivos de icono en las carpetas drawable

Su aplicación Android ahora está configurada con iconos de notificación predeterminados. Si ve un cuadrado sólido o la campana de OneSignal, consulte las Preguntas frecuentes.

Iconos de notificación de iOS

Las notificaciones de iOS siempre usan el icono de su aplicación. El sistema muestra una versión grande de ese icono en el borde inicial de cada notificación y lo escala desde el recurso de icono de su aplicación. No puede cambiarlo por mensaje. Para cambiarlo, actualice el icono de la aplicación y publique una nueva versión de la aplicación. Consulte Human Interface Guidelines: Notifications.
La carga útil de APNs tiene alert, badge y sound. No tiene ningún campo para un icono de notificación personalizado. Apple ignora las claves personalizadas dentro del diccionario aps. Esto se aplica a las notificaciones push estándar y a las Alertas críticas. La UI de Live Activity puede mostrar sus propias imágenes a través de ActivityKit. Eso no es un reemplazo del icono de notificación.

Notificaciones de comunicación

En iOS 15 y versiones más recientes, Apple admite Notificaciones de comunicación para aplicaciones de mensajería y llamadas. Después de donar un INSendMessageIntent o INStartCallIntent, el sistema puede mostrar el avatar del remitente o de quien llama (INImage) en lugar del icono grande de la aplicación. El icono de la aplicación sigue apareciendo como una pequeña insignia sobre ese avatar. Esto requiere la capacidad de Communication Notifications, intents de SiriKit y una Notification Service Extension para actualizar el contenido de la notificación. No está disponible para notificaciones de propósito general.

Iconos de notificación web

Las notificaciones push web muestran un icono proporcionado en el momento del envío o configurado como predeterminado en la configuración de su sitio. Si no se proporciona ningún icono, se usa un icono de campana predeterminado.
  • Formatos compatibles: PNG, JPG, GIF (no animado)
  • El icono debe ser cuadrado. El tamaño recomendado es 256×256 píxeles. web.dev cita 64dp en Android, por lo que 192×192 o más grande es el mínimo habitual. 256×256 sigue siendo el tamaño más consistente entre Chrome, Firefox, Edge y Safari.
  • Los navegadores y sistemas operativos recortan y escalan el icono de manera diferente. Chrome y Firefox usan la UI de notificaciones de la plataforma donde existe una.
Configure la Default Icon URL en Settings > Push & In-App > Web. Consulte Configuración del SDK web. También puede anular el icono por notificación usando el panel o la API REST. Consulte Enviar notificaciones con iconos no predeterminados.

Icono de insignia de web push de Android

En Android, el web push de Chrome puede mostrar un icono de insignia más pequeño en la barra de estado cuando no hay suficiente espacio para la notificación completa. OneSignal lo envía con chrome_web_badge, que corresponde a la opción badge de la Notifications API. Chrome en Android usa esta insignia. Si no configura una, Chrome usa el icono del navegador. Otros navegadores generalmente muestran el icono del navegador. Consulte Notification: badge. Esta no es una insignia de icono de aplicación (punto o número). Para esas, consulte Insignias. Trate la insignia como un icono monocromático. MDN indica que Android enmascara automáticamente la imagen. Use una silueta PNG cuadrada sobre un fondo transparente (las mismas reglas que el icono pequeño de Android). Evite texto, detalles finos e ilustraciones de color completo. MDN recomienda alrededor de 96×96 píxeles para que la imagen se mantenga bien a 4x. 72×72 es el mínimo habitual (24dp a 3x). Las imágenes más grandes se reducen.
Barra de estado de Android mostrando un icono de insignia de web push

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

Enviar notificaciones con iconos no predeterminados

Cuando envía push desde el panel de OneSignal o la API REST, puede anular los iconos predeterminados para Android, Amazon, Huawei y Web Push. No puede anular el icono para notificaciones de iOS.

Parámetros de la API REST

Android, Amazon y Huawei:
string
Nombre del recurso de icono sin la extensión del archivo. La imagen debe existir en las mismas carpetas de proyecto que el icono pequeño predeterminado. No se admiten URLs remotas. Consulte Cómo agregar iconos predeterminados de Android.Para Amazon use adm_small_icon. Para Huawei use huawei_small_icon.Ejemplo: "small_icon": "my_custom_icon"
string
Nombre del recurso de icono sin la extensión del archivo, o una URL remota. Si usa un nombre de recurso, la imagen debe existir en las mismas carpetas de proyecto que el icono grande predeterminado. Consulte Cómo agregar iconos predeterminados de Android.Para Amazon use adm_large_icon. Para Huawei use huawei_large_icon.Ejemplo: "large_icon": "my_custom_icon"
Web Push:
string
URL directa al recurso de imagen.Para Firefox use firefox_icon.Ejemplo: "chrome_web_icon": "https://example.com/my_custom_icon.png"
string
URL directa al recurso de imagen usado como insignia de la barra de estado de Android para notificaciones web de Chrome.Ejemplo: "chrome_web_badge": "https://example.com/badge.png"

Panel de control

En Messages > Push > New Push o Templates, abra las opciones específicas de la plataforma. Para Android, Amazon y Huawei, si el archivo existe en la misma ruta de proyecto que el icono predeterminado, establezca los nombres de los iconos sin la extensión del archivo. Para los iconos de notificación grandes, también puede proporcionar una URL directa.
Panel de OneSignal mostrando los campos de anulación de iconos en la configuración de plataforma de Android

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. Los píxeles completamente opacos con un fondo sólido aparecen 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, están ubicadas en el directorio drawable incorrecto o tienen un nombre incorrecto. Incluya 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.

¿Por qué las notificaciones muestran el icono de mi aplicación en lugar de mi icono pequeño?

A partir de Android 17 (API 37), Android muestra el icono de inicio de la aplicación en la notificación de forma predeterminada. El icono pequeño sigue apareciendo en la barra de estado. Para mostrar el icono pequeño en la notificación, configure el extra EXTRA_PREFER_SMALL_ICON en una extensión de servicio de notificaciones. Consulte Icono de inicio en la notificación.

¿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. La carga útil de APNs no tiene campo de icono. Cambiar el icono requiere actualizar el recurso del icono de su aplicación y publicar una nueva versión de la aplicación. Las aplicaciones de mensajería y llamadas pueden mostrar un avatar del remitente solo adoptando Notificaciones de comunicación.

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

Use una imagen PNG, JPG o GIF no animado cuadrada de 256×256 píxeles. Los distintos navegadores y sistemas operativos pueden recortar o escalar el icono, pero 256×256 es el tamaño más consistente 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?

Use el onesignal-expo-plugin con un PNG de icono pequeño de 96×96 y un PNG de icono grande de 256×256 en app.json o app.config.js. El plugin genera las variantes de densidad en el momento de la compilación. Consulte la pestaña Expo para la 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.

Configuración del SDK de Android

Instale el SDK de Android y luego agregue iconos de notificación predeterminados en sus carpetas drawable.

Configuración del SDK React Native / Expo

Configure smallIcons y largeIcons en el plugin Expo de OneSignal.

Categorías de notificación de Android

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

Configuración del SDK web

Configure la Default Icon URL en Settings > Push & In-App > Web.

API de crear mensaje

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