Creating a perfectly aligned D365 Navbar Logo

Looking to get that Dynamics Navbar Logo just right for your Dynamics 365 / PowerPlatform app? Today I’ll focus on how to get the dimensions of your logo just perfect, as well as providing a download link to my Photoshop PSD file so that you can alter for future projects.

Firstly, let’s have a look at the default logo that comes with Dynamics 365 April 2019 release.

Classic Interface Logo Details

Resource Name

Theme_NavBarLogo.png

Location

/_static/oobwebresource/Theme_NavBarLogo.png

Dimensions

145 pixels x 50 pixels

Resolution

72 DPI

Image

How it looks in Dynamics

Default Margins



LEFT: 7px

TOP: 17px

BOTTOM: 14px

RIGHT: 13px

You’ll notice that the margins aren’t squared off, with the left/right and bottom/top margins differing slightly. This is intentional so as to re-balance the line height to accommodate the letter ‘y’ within the Dynamics logo. This doesn’t matter so much for this exercise of building a new logo template. We just need the overall correct proportions and margins for our new logo, so with little margin correction we have the following settings:

  • DIMENSIONS WIDTH: 145px (same)
  • DIMENSIONS HEIGHT: 50px (same)
  • MARGIN LEFT: 10px (from default 7px)
  • MARGIN TOP: 15px (from default 17px)
  • MARGIN BOTTOM: 15px (from default 14px)
  • MARGIN RIGHT: 10px (from default 13px)

With this we can now build a template for re-use in future. I’ve created this within Adobe Photoshop, but you could apply the above settings to whichever image editor you use.

PSD Template Details

Resource Name

Update_365lyf_NavbarLogoPSD.psd (Adobe Photoshop file)

Location

download link

Dimensions

145 pixels x 50 pixels

Resolution

72 DPI

Image

How it Looks in Dynamics

Updated Margins (Recommended for Custom Navbar Logos)



LEFT: 10px (from default 7px)
TOP: 15px (from default 17px)
BOTTOM: 15px (from default 14px)
RIGHT: 10px (from default 13px)

Side note: Interestingly enough the new unified interface, does not use an PNG logo image by default, but rather a SPAN element with Segoe UI font saying “Dynamics 365” in 1.43em font size. This is irrelevant however if you plan on theming your portal with a custom logo.

Another interesting side note: You can actually use a SVG as a logo within Dynamics 365, which is great if you want maximum sharpness. However you must have a vector based logo, which may be a pain to convert within Adobe Illustrator if your source material is a rasterised image format.

So hopefully you found this quick tip useful. Let me know if there are other tips and tricks you’d like to see on this blog.

Link to my GitHub Dynamics 365 – Photoshop Template repository:

https://github.com/365lyf/Dynamics-365-PhotoshopTemplates

Also if you’d like me to build a PowerApp that automatically resizes logo images so they fit nicely on the navbar, please up-vote the following PowerApp Idea for Crop Controls within Canvas apps:
https://powerusers.microsoft.com/t5/PowerApps-Ideas/Ability-to-Crop-an-Image-Manually/idi-p/269622#M25917