Important Note*

Our SPFx theme package solution allows you to use a larger and more prominent brand logo on communication sites in comparison to modern out-of-the-box templates that limit the site's logo dimensions to a squared shape of 64 x 64 pixels. After installation of the SPFx theme package solution, the size of your logo can have up to 175 pixels in width.

Logo dimensions for Communication Sites

The image above demonstrates how your logo will be displayed on a Communication Site.


    Resizing and saving your logo for your SharePoint site using Photoshop

  1. Open your logo in Photoshop.
  2. From the Photoshop menu bar (located at the very top of your screen) select Image, and then Image Size.
  3. At the bottom of the Image Size dialog box select the Constrain Proportions and Resample Image checkboxes. Ignore the Scale Styles checkbox. From the drop-down list select Bubic (best for smooth gradients).
  4. Enter 64 pixels for Height under Pixel Dimensions and ignore Width (the width will adjust automatically).
  5. Ignore the Document Size field set > Click Ok.
  6. Select Image > Image Size.
  7. If your logo does not exceed 175 pixels in Width, skip steps 8 - 11 below.
  8. If your logo exceeds 175 pixels in Width, enter 175 pixels for Width under Pixel Dimensions and ignore Height (the height will adjust automatically).
  9. Ignore the Document Size field set > Click Ok.
  10. From the Photoshop menu bar select Image > Canvas Size.
  11. Enter 64 pixels for Height under New Size > Click Ok.
  12. From the menu bar go to File> Save for Web and Devices.
  13. In the Save for Web dialog box select a PNG-24 option.
  14. Click Save.
  15. Upload the saved logo to your site.
  16. To apply your logo to your SharePoint site, go to Site Settings -> Select Title, description, and logo (under Look and Feel).
  17. Under the Insert Logo section, specify URL to point to your new logo -> Click Ok.

Important Note*

Logo dimensions for Modern Team Sites

The image above demonstrates how your logo will be displayed on Modern Team Site.


    Resizing and saving your logo for your Modern Team Site using Photoshop

  1. Open your logo in Photoshop.
  2. From the Photoshop menu bar (located at the very top of your screen) select Image, and then Image Size.
  3. At the bottom of the Image Size dialog box select the Constrain Proportions and Resample Image checkboxes. Ignore the Scale Styles checkbox. From the drop-down list select Bubic (best for smooth gradients).
  4. Enter 74 pixels for Height under Pixel Dimensions and ignore Width (the width will adjust automatically).
  5. Ignore the Document Size field set > Click Ok.
  6. Select Image > Image Size.
  7. If your logo does not exceed 74 pixels in Width, skip steps 8 - 11 below.
  8. If your logo exceeds 96 pixels in Width, enter 74 pixels for Width under Pixel Dimensions and ignore Height (the height will adjust automatically).
  9. Ignore the Document Size field set > Click Ok.
  10. From the Photoshop menu bar select Image > Canvas Size.
  11. Under New Size, adjust canvas size for your logo to be a squared shape - 96 pixels in Width, and 96 pixels in Height > Click Ok. If necessary, provide additional adjustments for your logo.
  12. From the menu bar go to File > Save for Web and Devices.
  13. In the Save for Web dialog box select a JPEG option. For quality, enter 75 and click Save.
  14. Click Save.
  15. Upload the saved logo to your site.
  16. To apply your logo to Modern Team Site, click the gears icon on the top navigation bar, select Site Information, and then under Site Logo click Change to upload your logo for your site.
  17. Click Save.

    For Tenant Logo it is recommended to set the canvas size to 110 pixels in height, and create spacing (margins) surrounding your logo to be approximately 35 - 50 pixels as shown in the image below. The width of canvas size should vary according to the width of your logo.

    For Hub Site Logo it is recommended to set the canvas size to 110 pixels in height without spacing (margins) surrounding your logo. The width of the canvas size should be equal to the width of your logo.

    Tenant and Hub logo dimensions

    After both logos are upload to your tenant or hub site, the theme will shrink them automatically to fit within dedicated placeholder areas. The image below shows tenant and hub logos applied to SharePoint site (enclosed in YourPackage.zip).

    Tenant and Hub logos applied to SharePoint site


    To add a Tenant Logo to your Office 365 Tenant:

    Note*
    In order to perform this step you need to be an administrator of your O365 Tenant.

  1. Navigate to the Office 365 admin center.

  2. Choose to Settings > Organization profile.

  3. Next to Manage custom themes for your organization, select Edit.

  4. To manage custom themes for your organization, select Edit
  5. Upload your Tenant Logo under Select custom logo image section.
  6. Upload your Tenant Logo under Select custom logo image section
  7. Select Save.


    To add a Hub Logo to your Hub Site:

  1. Navigate to your Hub Site, click the gears icon on the top navigation bar, select Hub site settings.

  2. Under Hub site navigation logo, upload your Hub Logo, and select Save.

Copyright © 2019 MasterThemes Inc. All rights reserved.