Saltar al contenido principal
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. Esta guía cubre los iconos de notificación push. Si busca imágenes grandes, 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.
  • 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 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.
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.
Ubicación del icono de notificación de Android

​
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.
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. Android admite dos iconos predeterminados:
  • Icono de notificación pequeño (obligatorio)
  • Icono de notificación grande (opcional pero recomendado)
1

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
2

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 iconoDensidad (dp)Tamaño (px)
ic_stat_onesignal_defaultMDPI24x24
ic_stat_onesignal_defaultHDPI36x36
ic_stat_onesignal_defaultXHDPI48x48
ic_stat_onesignal_defaultXXHDPI72x72
ic_stat_onesignal_defaultXXXHDPI96x96
3

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
4

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)
Su proyecto debería verse similar a esto (dependiendo de su SDK):
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://example.com/my_custom_icon.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.