App Management: Brand Editor

Brand Editor allows you to change the visual appearance of the App to reflect your company branding. Go to Manage App > Branding to edit your app's branding. 


For a quick summary of brand editor functionality, check out this video:



Changing the color under Primary color will change the icon and highlight color. 




You can also change the background color. Once you change the color, you'll see a preview of the change right away.  You can also add a background image. You can choose how the image is positioned on the screen, whether it is Tiled and whether the background image is fixed. 

Click Save & Close to save the change. Click Reset to change the color back to default. Click on Reset All to reset all settings back to Simpplr default.



Click Add Logo to change the logo. The logo file should be SVG, PNG, or JPEG. The recommended logo size is 540 (width) x 144 (height) px. We will resize the logo to the maximum height of 40px. 




A favicon is the icon you see in the browser tab/window or if you create a shortcut to the application on your mobile phone/ tablet. This is where you set the favicons used by the application. Enter /resource/SimpplrFaviconAssets to the Favicon Path field.



Create and upload favicons to Salesforce:

The image should be at least 260x260 px size logo/icon, but preferably in PNG format and of 500x500 px size. We recommend using this site:

  1. Select the file by clicking on the button shown below:


  2. As soon as you select the picture, it is uploaded and you are taken to the settings page. On this page, there are four sections. The first one is related to iOS. No need to change anything here.


  3. The second section is related to Android. Here we recommend you keep your settings as below. If you plan to brand Simpplr, do remember to change the “App Name” to your preferred name.


  4. Now Click on the “Options” tab. These are the recommended settings for “Options”.


  5. The next section is related to Windows 8 Tile. Here select the most appropriate color based on your logo color. It is recommended to use one from the color tabs but you can also type in your custom color as well.


  6. Next is setting up the path for these favicons. Set this up to “/resource/SimpplrFaviconAssets”. You can choose some other name instead of “SimpplrFaviconAssets”, but do not change the first part of the path “/resource/”. Click on the “Generate your Favicons and HTML code” button. </li



  7. Click on the “Favicon package” button to download your favicons as a zip file. Save it to a location on your desktop/ laptop.


  8. Now login to your Salesforce instance and go to setup. In the left sidebar search textbox, type in “static” and then click on the Develop > Static Resources.


  9. Click on the “New” button. On the next page, in the Name textbox, enter “SimpplrFaviconAssets” or the name you put in step 6 while generating the favicons. Enter the “Favicon pack for Simpplr App” in the “Description” field. Click “Choose File” and select the favicon file you downloaded in step 7. In the “Cache-Control” dropdown, select “Public”. Click “Save”.





The favicon might not appear right away. It should appear within an hour.



You can select the default font or select your custom font.

If you use a custom font, you will need to upload the custom font(s) to either a server like AWS, S3 etc, or zip the fonts and upload to salesforce as Static Resources. Then, create a CSS file like this (use your font name and change the src URL):


# Custom Font
@font-face {
    font-family: 'SimpplrFont';
    src: url('/resource/fonts/MuseoSans_300-webfont.eot');
    src: url('/resource/fonts/MuseoSans_300-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/fonts/MuseoSans_300-webfont.woff') format('woff'),
         url('/resource/fonts/MuseoSans_300-webfont.ttf') format('truetype'),
         url('/resource/fonts/MuseoSans_300-webfont.svg#arimobold') format('svg');
    font-weight: normal;
    font-style: normal;
@font-face {
    font-family: 'SimpplrFont';
    src: url(''/resource/fonts/MuseoSans_500-webfont.eot');
    src: url(''/resource/fonts/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
         url(''/resource/fonts/MuseoSans_500-webfont.woff') format('woff'),
         url(''/resource/fonts/MuseoSans_500-webfont.ttf') format('truetype'),
         url(''/resource/fonts/MuseoSans_500-webfont.svg#arimobold') format('svg');
    font-weight: bold;
    font-style: normal;


Copy and paste the CSS codes into the custom font text area of the branding editor. Click Save and it should start using the new fonts. Please note that you cannot use a custom font selectively. The entire app will be using the custom font.




You can update the color settings for the background text and icon colors for Alerts.





You can select the header color, choosing from the default color, preset primary color, preset dark color, or custom color. If you choose a custom color, you can choose the color for the header background, the text color, the icon color, and the notification bubble color.






You can select the footer color choosing the default color, preset primary color, preset dark color, or custom color. If you choose a custom color, you can choose the color for the footer background and the text color.



Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request



Please sign in to leave a comment.

Articles in this section

See more