The Perfect Logo For Your Org

With Winter '17, Salesforce added the possibility to display your company's logo on the top banner of any custom app in the Lightning experience. I thought I would take the opportunity and write a post on how to best handle this logo business for both Lightning and Classic.

Lightning

You can only add your logo to a Lightning App. That's right, apps can be of either LEX or Classic type! You can't reuse an existing Classic app.

Navigate to the App Manager in the Setup pages, you can either create a new app from scratch (1) or upgrade an existing Classic app (2).

From the Edit screen, upload your company logo (3).

The logo file should be of one of the usual formats (jpg, png, bmp or non-animated gif). The size must not exceed 44 x 44 pixels. If you provide a bigger or non-square image Salesforce will make it fit... I suggest you stay in control of the look and feel by respecting these limits. Also, note that the image is positioned quite close to the browser's edge...

For Lightning, I recommend to always upload an image sized to 44 x 44, including a 2 pixels top padding.

Also, don't set any margin on the left or the logo wouldn't align properly with the rest of the UI.

Click Save and Done and this is it. It's quite simple when you know where to go...

The good news is that because the Lightning top banner background is white, you don't need to fiddle with transparency as it's the case for the Classic UI.

Classic

In Classic, you'll need to store the logo somewhere and in a specific way before being able to add it to your app. In this respect, it's a bit more cumbersome than with Lightning, still not a big deal as you'll see.

First of all, you need to locate the Documents tab which, unfortunately, can't be found in any standard app. Click on the "+" tab (1) and select the Documents tab (2).

You can either create a new folder for documents which are associated with your app or just use your "Personal Documents" folder. I go with the simple option in this case (3).

Press Go, then the "New Document" button.

Give the document record a name to locate it easily and make sure that you tick the "Externally Available Image" checkbox (4). Then load the logo file (5).

In Classic my recommendation is to keep the image file to its maximum of 55 pixels with a top padding of 5 pixels. You can use any length up to 300 pixels but make sure your file is not bigger than 20KB. Always use a tranparent background.

In Setup, navigate to "Apps". Select the custom app which will receive a new logo. Then from the Edit page click on "Insert an Image" (6) and change the logo to the one you just uploaded in Documents.

And, here's the result!

Related Post

I hope you enjoyed this post. Don't hesitate to ping me on Twitter if you have any comment or question. Bye for now!

Fab 🐸