Saltar al contenido principal
Los íconos de notificaciones push son imágenes pequeñas que acompañan a una notificación push, ayudando con el reconocimiento de marca, claridad contextual y atractivo estético. Son críticos para el engagement de usuarios y mejorar la efectividad de la notificación.

​
Mejores prácticas para íconos de notificaciones push

  • Usa un PNG transparente para una mejor representación en todos los dispositivos.
  • Asegúrate de que el ícono sea simple y reconocible en tamaños más pequeños.
  • Sigue las directrices específicas de la plataforma para tamaño y esquema de color (por ejemplo, íconos blancos en fondos transparentes para barras de estado de Android).
  • Evita texto en el ícono, ya que puede volverse ilegible en tamaños más pequeños.
  • Incluir un ícono de notificación push bien diseñado puede mejorar significativamente la efectividad y el atractivo de tus notificaciones.

​
Íconos de notificaciones web

El tamaño recomendado es de 256x256 píxeles. Los tipos de archivo PNG, JPG y GIF (no animados) están soportados. Sube tu ícono o usa una URL a una imagen en tu Dashboard Web Settings.

​
Íconos de notificaciones iOS

Las notificaciones iOS usan la misma imagen que el ícono de tu app y no pueden cambiarse sin cambiar el ícono de tu app. iOS también soporta Communication Notifications que te permiten cambiar el ícono a la imagen de perfil del usuario.

​
Íconos de notificaciones Android

Android (incluyendo Amazon y Huawei) proporciona varias opciones para configurar íconos que esta guía detalla completamente. Android también soporta Conversation Notifications que te permiten cambiar el ícono a la imagen de perfil del usuario. Android soporta tanto íconos de notificación pequeños como grandes.

​
Íconos de notificación pequeños

El ícono pequeño se muestra en la parte superior izquierda de la notificación. Por defecto, OneSignal mostrará un ícono de campana, sin embargo recomendamos que personalices esto para que los suscriptores reconozcan que es una notificación de tu app.
La mayoría de los dispositivos Android solo soportan canal alfa para el ícono. Se mostrará monocromo en la barra de estado, pero se puede aplicar un color de acento al lado izquierdo de la notificación misma.

​
Íconos de notificación grandes

El ícono de notificación grande se muestra en el lado derecho de la notificación. Si no estableces un ícono grande, se usará el ícono pequeño en su lugar. OneSignal escalará automáticamente los íconos de notificación grandes para ti para evitar que el ícono sea recortado. El tamaño recomendado del ícono grande es de 256x256 píxeles.

​
Cómo agregar íconos predeterminados de Android

Recomendamos fuertemente agregar íconos predeterminados a cada app Android y Amazon.
1

Generar íconos

Debes agregar cada imagen con el tamaño listado y transparencia alfa.Para ayuda generando imágenes con transparencia alfa, consulta este enlace de clipart para ejemplos en Android Asset Studio.
  • Usar Android asset studio
  • Crear íconos manualmente
RecomendadoPara generar rápida y fácilmente íconos pequeños con la configuración correcta, recomendamos usar Android Asset Studio. Usa ic_stat_onesignal_default como el nombre.

​
Nombre, densidad y tamaño del ícono predeterminado

Requerido: Cada nombre y tamaño de píxel debe estar presente en la app.
NombreDensidad (dp)Tamaño (px)
ic_stat_onesignal_defaultMDPI24x24
ic_stat_onesignal_defaultHDPI36x36
ic_stat_onesignal_defaultXHDPI48x48
ic_stat_onesignal_defaultXXHDPI72x72
ic_stat_onesignal_defaultXXXHDPI96x96
ic_onesignal_large_icon_default.pngXXXHDPI256x256
2

Crear rutas de proyecto

Asegúrate de que existan las siguientes rutas; crea cualquier carpeta que te falte.Requerido: Cada imagen debe estar presente en las siguientes rutas:
  • Android Native
  • Unity
  • Cordova/Ionic
  • React Native
  • .NET Maui
  • Flutter
  • 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)
Con versiones de Cordova anteriores a 7.0, necesitarás usar <project-root>/platforms/android/res/drawable-{size}/ en lugar de la ruta mostrada arriba al agregar el recurso de ícono a config.xml
Si ves el ícono de campana predeterminado de OneSignal, no agregaste todos los tamaños de ícono. Por favor agrega todos los tamaños de ícono y las rutas correctas.Si ves un cuadrado sólido, estableciste la imagen en la ruta correcta, pero la imagen no tiene transparencia alfa. Para más ayuda, intenta usar imágenes de este clipart de Android Asset Studio.
Tu proyecto debería verse similar a esto dependiendo de tu SDK:
Deberías estar listo con tus nuevos íconos predeterminados.

​
Íconos no predeterminados

Después de haber agregado tus íconos predeterminados, puedes elegir agregar más íconos no predeterminados. Estos te permitirán mostrar diferentes íconos dependiendo de los tipos de notificaciones que envíe tu app. Por ejemplo, un juego con un título como “Jewel Breaker” puede desear tener un ícono de joya de diferente color para cada notificación enviada que represente el nivel del usuario. Mientras tanto, una red social puede desear mostrar un ícono de burbuja de chat cuando el usuario recibe un mensaje de otro usuario para diferenciar esas notificaciones de notificaciones del sistema más genéricas.OneSignal soporta la anulación de íconos predeterminados por mensaje.
1

Generar íconos

Sigue los pasos anteriores para generar íconos y colocarlos en la carpeta apropiada para tu SDK.
2

Nombrar íconos no predeterminados

Para agregar íconos no predeterminados, debes nombrarlos algo diferente a los nombres predeterminados especificados arriba. Por ejemplo, puedes nombrar uno message_icon.
3

Enviar notificaciones con íconos no predeterminados

Si has seguido los pasos anteriores para crear íconos predeterminados y has actualizado tu app, podrás hacer referencia a esos íconos cuando envíes una notificación. Para enviar una notificación con un ícono personalizado:

​
Dashboard

Navega a Messages > New Push > Platform Settings > Google Android Options > Establece el nombre del ícono sin la extensión del archivo. Con Large Notification Icons, también puedes proporcionar una URL desde donde se mostrará el ícono.

​
REST API

Establece íconos de notificación con las propiedades de REST API small_icon y large_icon. Establece el nombre del ícono sin la extensión del archivo. Más detalles en documentación de REST API Create notification.

​
Color de acento del ícono pequeño

Puedes cambiar el color mostrado alrededor del ícono pequeño de la notificación.

​
Establecer color de acento del ícono pequeño

Para establecer un color predeterminado, agrega la siguiente línea a tu archivo res/values/strings.xml en tu proyecto. Si quieres un color diferente para el modo oscuro, agrega la clave a tu res/values-night/strings.xml también. Usa el valor HEX. Usa el esquema de Color de Android Asset Studio para asistencia. 
<resources>
    <string name="onesignal_notification_accent_color">FF00FF00</string>
</resources>
Para establecer el color por notificación, establece android_accent_color en nuestra llamada API Create notification o ingresa un valor en el campo Accent color bajo Messages > New Push > Platform Settings > Google Android Options.
Si agregaste muy recientemente un recurso de ícono a tu app, es posible que desees esperar unos días antes de enviar notificaciones usando el ícono. Esto se debe a que puede tomar muchos días o incluso semanas para que la mayoría de tus usuarios actualicen sus apps a la última versión que contiene tus nuevos íconos.

​
Imágenes de ícono pequeño personalizadas sin canal alfa

Algunos fabricantes de dispositivos muestran la imagen tal cual (básicamente ignorando la regla del canal alfa). Puedes configurar un diseño de notificación personalizado basado en la documentación de Android si deseas usar imágenes sin canal alfa en todos los dispositivos. Recomendamos altamente seguir la regla alfa ya que los íconos pueden no verse consistentes en todos los dispositivos. Google lo diseñó de esta manera: el ícono es demasiado pequeño para ver cualquier detalle significativo, por lo que hacer cumplir un solo color ayuda a aplicar un ícono más fácil de reconocer de un vistazo.