---
schema_version: "1"
id: 9d23b3278bff86ef9127a3635b664742bf71cbebe41ab663efcc2215cbdb42ca
title: Customize Salesforce Mobile App Branding
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/salesforce_app_customize_branding.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.salesforce_app_customize_branding.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 78e3955f1ee10edf58de9ffd59206c86d431eac426d355452cd47ed10a82124e
description: Change the Salesforce mobile app’s appearance, including the loading page background color, loading page logo, and header background color, so the app matches your company’s branding.
products:
  - Mobile App Mobile App Mobile App
  - Cross Cloud Cross Cloud Cross Cloud
release: "264"
---
# Customize Salesforce Mobile App Branding

Change the Salesforce mobile app’s appearance, including the loading page background color, loading page logo, and header background color, so the app matches your company’s branding.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col style="width:100%"></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Setup for the Salesforce mobile app available in: both Salesforce Classic and Lightning Experience</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Setup available in Salesforce Classic in: all editions except <strong>Database.com</strong></td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Setup available in Lightning Experience in: <strong>Group</strong>, <strong>Professional</strong>, <strong>Enterprise</strong>, <strong>Performance</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions</td></tr></tbody></table>

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-salesforce_app-264-0-0-production-enus/cb8c7d7a-5f86-49c5-967c-c4d5cb2f80b6/images/icon_note.png)

Note

Images that you upload to customize the Salesforce mobile app are stored in a Documents folder named Salesforce Branding Resources. For this reason, the Documents object must be enabled for your organization before administrators can view and modify the Salesforce mobile app branding page. (The Documents tab doesn’t need to be visible, however.)

For users to see custom branding, they must have “Read” user permissions on Documents.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
      <colgroup>
        <col style="width:50%">
        <col style="width:50%">
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="vertical-align:top;" id="d13400e95">User Permissions Needed</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d13400e95 ">To view Salesforce mobile app branding settings:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d13400e95 ">
            <p style="margin-bottom:0;">View Setup and Configuration</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d13400e95 ">To modify Salesforce mobile app branding settings:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d13400e95 ">
            <p>Customize Application</p>
            <p style="margin-bottom:0;">Modify All Data</p>
          </td>

        </tr>
      </tbody>
    </table>

From Setup, enter Branding in the Quick Find box, then select **Salesforce Branding**, then click **Edit**. To customize brand color for key user interface elements, including the header, click ![Select a color](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-salesforce_app-264-0-0-production-enus/cb8c7d7a-5f86-49c5-967c-c4d5cb2f80b6/resources-global/_corporate/images/color_picker.png) or enter a valid hexadecimal color code. To customize the background color of the loading page, click ![Select a color](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-salesforce_app-264-0-0-production-enus/cb8c7d7a-5f86-49c5-967c-c4d5cb2f80b6/resources-global/_corporate/images/color_picker.png) or enter a valid hexadecimal color code. To customize the loading page logo, click **Choose File** to upload an image. Images can be .jpg, .gif, or .png files up to 200 KB. The maximum image size is 460 pixels by 560 pixels. Click **Save**.

You can customize:

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
      <colgroup>
        <col style="width:27.10027100271003%">
        <col style="width:72.89972899728997%">
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d13400e178">Element</th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d13400e181">Description</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d13400e178 ">Brand Color</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d13400e181 ">
            <p>The color for key user interface elements such as the header, buttons, and search
              bar.</p>
            <p>Based on the brand color you select, contrasting colors for user interface elements
              such as borders for the navigation menu, the notifications list, and button text are
              automatically defined.</p>
            <p style="margin-bottom:0;">The headers on overlays, popups, and dialogs—such as edit and
              create windows or windows that open from actions in the action bar—aren’t affected by this
              setting. These headers are always white, to provide a visual indicator that the user is
              performing an action as opposed to simply viewing information.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d13400e178 ">Loading Page Color</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d13400e181 ">The background color on the loading page that appears after a mobile user logs
            in.</td>

        </tr>
        <tr class="">
          <td data-label="Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d13400e178 ">Loading Page Logo</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d13400e181 ">
            <p>The image on the loading page that appears after a mobile user logs in.</p>
            <p style="margin-bottom:0;">We recommend
              using an image with the largest dimensions allowable for best results. Maximum image size is
              460 pixels by 560 pixels.</p>
          </td>

        </tr>
      </tbody>
    </table>

Consider the following tips when customizing the branding of the Salesforce mobile app:

- When creating your logo image, be sure to compress it. In many image editing programs, this process is identified as “use compression,” “optimize image,” “save for web,” or “shrink for the web.”
- Verify that your logo appears correctly in Salesforce mobile app, using the same devices as your user base, not just a desktop monitor. Your image can render at different scales or proportions depending on the screen size and pixel density of each device.
- The Salesforce mobile app supports .png, .gif, and .jpg image formats for custom branding elements, but we recommend using .png for the best results.
- These interface elements can’t be customized:
    - The Salesforce mobile app icon that appears on the mobile device’s home screen.
    - The initial loading screen when launching Salesforce for iOS. This loading screen appears before the user is prompted by the login page.
- Your mobile users must close the app and then log in again to see any custom branding changes.
- When a user switches between two orgs that have custom branded loading pages, they see the loading page for the previous org until the branding for the new org is available.

You can also customize the branding for the Salesforce moible app login page.