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)

Interesting 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.