How to Configure App Images & Icons in the BuddyBoss App

Introduction

Branding your BuddyBoss App with custom images, logos, and icons elevates the user experience and reinforces your identity. From home-screen logos to launch splash screens and adaptive app icons, this guide shows you how to upload and preview every graphic asset directly from your WordPress Dashboard, ensuring your mobile app looks polished on both iOS and Android devices.

Tutorial Video

Recommended Image & Icon Sizes

• Home Screen Logo: 1200 × 180 px
  
• Login Logo: 1200 × 774 px
  
• Login Background: 2732 × 2732 px
  
• Register Background: 2732 × 2732 px
  
• Launch Screen Background: 2732 × 2732 px
  
• iOS App Icon & Android App Icon: 1024 × 1024 px
  
• Android Adaptive Background & Foreground Icon: 1024 × 1024 px
  
• Android Notification Icon: 256 × 256 px
  
• Format: PNG or PSD
  

App Rebranding Graphic Assets Guidelines

Standard Android and iOS App Icon

App icons appear on device home screens and (for iOS) in the App Store. Android requires a separate icon for the Play Store. Modern Android adds a white margin, and uses adaptive icons for best results.

• Dimensions: 1024 × 1024 px
  
• Safe Zone: 682 × 682 px center
  
• Format: PNG (32-bit), sRGB
  
• iOS: Opaque only
  
• Android: Transparency allowed

Download standard app icon safe zone overlay here.

App Icon

Safe Zone

Adaptive App Icon for Android

Required on Android 8+ for various shapes and parallax effects. Two layers:

• Background Layer: Opaque, 1024 × 1024 px
  
• Foreground Layer: Transparent logo, 1024 × 1024 px
  
• Safe Zone: 683 × 683 px center (170 px margin for effects)
  
• Format: PNG (32-bit), sRGB

Your logo should be in the foreground later. For more information, see these Android guidelines.

For best results, upload both images sized at 1024 x 1024 pixels. The inner 683 px will be visible, with a 170 px outer margin reserved for parallax effects (depending on icon shape). Background icon should be opaque, and foreground icon should include transparency.

Click here to download the adaptive app icon safe zone overlay.

Background

Foreground

Launch/Splash Screen

Displays instantly on startup before the login screen. For more information, see these Apple guidelines.

• Dimensions: 2732 × 2732 px
  
• Safe Zone: 1200 × 2732 px center
  
• Format: PNG (32-bit), sRGB
  Download launch screen safe zone overlay

Click here to download the launch screen safe zone overlay.

Full Splash Screen

Safe Zone

Login Screen

The login screen can optionally include a logo and background image. If no background image is added, it will display the Login and Signup Screen background color.

Click here to download the login screen safe zone overlay.

• Logo: Max 200 × 150 px within the background image
  
• Background: 2732 × 2732 px
  
• Format: PNG (32-bit), sRGB
  Download login screen safe zone overlay

Login Background

Login Logo

Opening the Images & Icons Settings

1. In your WordPress admin, go to BuddyBoss App > Branding > Images.
   
2. Verify you see the Images and Icons sections: Home Screen, Login Screens, Register Screens, Launch Screen, App Icons, Android Adaptive Icon, and Notification Icon.

Setting the Home Screen Logo

1. Under Home Screen, click Upload Image next to Logo.

2. Resize the logo as desired, then click Finish.

3. Preview the logo on the right in both iOS and Android mockups.

Customizing the Login Screen

1. In Login Screens, click Upload Image for Login Logo.

2. Click Upload Image for Login Background.
   
3. Click Finish to apply each image.
   
4. Toggle the preview between Login and Forgot Password pages.

Configuring the Register Screen

1. Under Register Screens, click Upload Image for Register Background.

2. Click Finish to apply.

Note: Use the same or similar background image for cohesive branding.

Designing the Launch Splash Screen

1. In Launch Screen, click Upload Image for Launch Screen Background.

2. Tick Show Spinner, choose a Spinner Color, then click Finish.

3. Preview how the spinner animates on the mockup.

Uploading Standard App Icons

1. Under App Icons, click Upload Image for iOS App Icon (must be opaque).
   
2. Click Upload Image for Android App Icon (transparency allowed).

3. Resize if needed, then click Finish.

4. Preview the icons at the bottom mockup for iPhone and Android views.

Adding Android Adaptive Icons

1. In Android Adaptive Icon, click Upload Image for Background Icon.
   
2. Click Upload Image for Foreground Icon (logo layer with transparency).

3. Click Finish, then review the adaptive icon preview on the right.

Setting the Android Notification Icon

1. Under Notification Icon, click Upload Image.

2. Click Finish, then preview how notifications appear on Android devices.

Saving All Changes

After configuring every section, click Save Changes at the bottom of the page, unsaved uploads will be lost.

Troubleshooting and FAQs

Q: My images aren’t uploading.
A: Ensure each file is in PNG or PSD format and matches the recommended dimensions. Reload the Images & Icons page and try again. If it still fails, clear any caching plugins and refresh your browser.

Q: Previews look cropped or misaligned.
A: Confirm you’re using the correct safe zone sizes (e.g., 682×682 px for standard icons, 683×683 px for adaptive icons). Keep all critical design elements within those center areas, then click Finish and Save Changes.

Q: I lost my uploads after navigating away.
A: Always click Save Changes after completing each section. Unsaved work will be discarded when you leave or refresh the page.

Q: Adaptive icons don’t display correctly on my Android device.
A: Verify you uploaded both Background and Foreground layers at 1024×1024 px, with the inner 683 px safe zone respected. Also confirm your device supports adaptive icons (Android 8+).