A Design Review on Site Logos in SharePoint

Stefan Bauer
5 min readOct 16, 2020

--

In one of the latest design iterations, the site logo has changed to incorporate the new Fluent UI design. The site logo has now rounded borders. Let’s do a quick design review of how this work or don’t work for some companies.

In the end, you will learn a trick on how to revert the changes, Microsoft did on the logo.

Corporate Communication

The logo of a company is sacred if you don’t use it properly in corporate communications you are in big trouble. That is the reason why corporate design guidelines include detailed information on when to use and how to use.

Companies also don’t allow you to alter their appearance in any way and also define the white space around the logo.

For those who are not designers, I guess this is a piece of vital information to know.

SharePoint Site logo

There are chances that site logos are used individually on a site by site basis. In most cases, the site logo is used only for the company logo. There are mainly two reasons for that.

The first reason is that it is pretty time consuming to create and individual logo for any site collection. Especially considering the design guidelines, the logo still needs to speak the DNA of the corporation.

The second reason is also apparent because such an essential identifier of a company, cannot be given into the hands of a user. Otherwise will see logos like Mickey Mouse and Donald Duck all over the place in your corporate environment. Which then dilute your corporate communication.

Out of the box rounded corners in SharePoint

When you use SharePoint out of the box, the new style looks nice and give the site logo an organic touch.

The problem arises when the company DNA requires you to have a squared or rectangle logo.

Examples for squared and rectangular logos

The logos of well know companies above matches exactly these criteria of squared or rectangle logos. So it is not uncommon.

To see how SharePoint behaves it that manner, I created a fantastic rectangle logo myself.

ACME Logo to demonstrate the SharePoint behaviour

The infamous ACME company (A Company Manufacture Everything) has the logo above, and the corporate design guidelines specifically state as mentioned before “You are not allowed altering the logo in any way”, also with an example what you are not allowed to do.

Corporate Design Handbook of ACME states that the logo may not be rounded

While it might look nice to have round corners, we are not allowed to use it this way. This rounding of the corners exactly happens, when you bring the logo over to SharePoint.

Rounded corners on a squared logo in SharePoint

The SharePoint designers (no not that old tool, the people who design SharePoint) decided to add now a 2-pixel radius to every image used as a site logo.

Rounded corners on a squared logo in SharePoint

It might not be noticeable for everyone, but I can guarantee you people in corporate communication are picky in that manner, which by no means is a bad thing. You might have to find a way to restore the original logo because it is corporate policy.

To un-fluent the site logo

This recent design change might cause some impact on your corporate intranet too, but there is a way to un-fluent the logo. To make the logo squared again, additional spacing around the logo helps.

The SharePoint site logo has the following max dimension:

  • 64-pixel height
  • 192-pixel width

The easiest way that does not involve math is to bring the site logo in this dimension.

Resizing of the image to match the maximum height

I choose to have a height of 60 pixels because with a width of 192 pixels the logo would have become too high. I choose sixty pixels because I only need to add a two-pixel transparent background on top and bottom of the logo to make is squared again.

Logo with added transparent spacing on top

This modified logo added to SharePoint restores the original design. A perfectly squared logo that is a bit smaller than the maximum of available space, but it also does not look misaligned.

Success!!! Perfect squared or rectangle logo restore

Verdict

It is great to have an organic Fluent Design look for all uncustomised SharePoint site. Which from a product perspective works nice.

Especially when Denise Trabona announces these changes, to be honest, my first impression only applies to a site that doesn’t have a custom logo, and then the problem arises. It is excellent to have it this way unless the SharePoint site uses a custom logo. Then SharePoint must use the logo as is and is not allowed to alter the appearance in any way.

Logos are crucial for companies, corporate communication and employee branding. They are also small but not a neglectable factor for a successful internet implementation, which are at risk with incautious design changes like making the logo rounded.

Not to mention that corporate communication departments have a strong voice on which communication channel to use and needs to satisfy their requirements.

--

--

Stefan Bauer
Stefan Bauer

Written by Stefan Bauer

Sharing ideas about art, design, web and development. I'm a professional #SharePoint consultant and developer. Microsoft Community Contributor Award 2011/2012