How to Configure App Images & Icons

Introduction

Branding your Learndash App with custom logos, splash screens, and icons enhances the user experience and reflects your visual identity.

This guide walks you through uploading and previewing all required assets directly from your WordPress Dashboard, ensuring your Learndash app looks polished on both iOS and Android.

Recommended Image & Icon Sizes

Learndash App Branding Guidelines

Standard Learndash App Icon (iOS and Android)

• Size: 1024 × 1024 px
  
• Safe Zone: 682 × 682 px center
  
• Format: PNG (32-bit), sRGB
  
• iOS: No transparency
  
• Android: Transparency allowed
  

Android Adaptive Icon

Required on Android 8+ for shape flexibility and parallax.

• Foreground: Transparent logo, 1024 × 1024 px
  
• Background: Opaque image, 1024 × 1024 px
  
• Safe Zone: 683 × 683 px center (170 px margin)
  

Launch / Splash Screen

Displayed instantly on Learndash app startup.

• Size: 2732 × 2732 px
  
• Safe Zone: 1200 × 2732 px center
  
• Format: PNG (32-bit), sRGB
  

Login Screen

• Logo: Max 200 × 150 px within background
  
• Background: 2732 × 2732 px
  
• Format: PNG (32-bit), sRGB
  

Configure Images & Icons in WordPress

Access Branding Settings

1. Go to Learndash App > Branding > Images.

2. Confirm you see sections for:
   
   • Home Screen
     
   • Login Screens
     
   • Register Screens
     
   • Launch Screen
     
   • App Icons
     
   • Android Adaptive Icons
     
   • Notification Icon
     

Home Screen Logo

1. Under Home Screen, click Upload Image next to Logo.
   
2. Resize as needed > Click Finish.
   
3. Preview on both iOS and Android mockups.
   

Login Screen

1. Under Login Screens, upload the Login Logo and Login Background.
   
2. Click Finish after each.
   
3. Toggle preview between Login and Forgot Password pages.
   

Register Screen

1. Under Register Screens, upload the Register Background.
   
2. Click Finish.
   

Note: Use the same image as Login for consistent branding.

Launch / Splash Screen

1. Under Launch Screen, upload the Launch Background.
   
2. Enable Show Spinner and choose a Spinner Color.
   
3. Click Finish to preview animation.
   

Learndash App Icons

1. Under App Icons, upload:
   
   • iOS App Icon (opaque PNG)
     
   • Android App Icon (transparency allowed)
     
2. Resize if needed > Click Finish.
   
3. Preview on iPhone and Android mockups.
   

Android Adaptive Icons

1. Under Android Adaptive Icon, upload:
   
   • Background Icon (opaque)
     
   • Foreground Icon (transparent logo)
     
2. Click Finish to preview the adaptive icon behavior.
   

Android Notification Icon

1. Under Notification Icon, click Upload Image.
   
2. Click Finish to preview in the notification tray.
   

Final Step: Save All Changes

After configuring each section, scroll down and click Save Changes. Unsaved uploads will be lost if you navigate away or refresh.

Troubleshooting and FAQs

Q: Why aren’t my images uploaded?
A: Make sure the files are in PNG or PSD format and match the recommended dimensions. Clear cache and reload the page if needed.

Q: Why do previews look cropped or misaligned?
A: Ensure design elements stay within the safe zones (e.g., 682 × 682 px for app icons). Use the provided overlay guides and re-upload if necessary.

Q: I lost my uploads after leaving the page.
A: You must click Save Changes at the bottom after every update—uploads are discarded otherwise.

Q: Adaptive icons don’t display correctly on my Android device.
A: Check that both foreground and background images are 1024 × 1024 px and follow the safe zone guidelines. Your device must run Android 8.0 or later.