To create your logos for Communication Sites (Topic and Showcase), Modern Team Site, Tenant, and Hub Site, we suggest to use the Photoshop templates (PSD) enclosed in the YourPackage.zip > Logos > PSD_Templates folder: For Communication Sites use the CommunicationSite-LOGO.psd, for Modern Team Site user the TeamSite-LOGO.psd, for Tenant and Hub Site, use the Tenant-LOGO.psd and the Hub-LOGO.psd templates.
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.
It is highly recommended that you prepare your logo in PNG-24 format. To increase the loading speed of your sites, it is also recommended that you resize your logo to 64 pixels in height (if your logo is taller than wider, and exceeds 64 pixels in height), or to 175 pixels in width (if your logo is wider than taller, and exceeds 175 pixels in width).
If you do not resize your logo, the theme itself
will not decrease the file size of your logo.
If you do not resize your logo that exceeds 64 pixels in height, the theme will shrink your logo automatically to be 64 pixels in height, constraining image proportions. The width of your logo will vary.
If you do not resize your logo that exceeds 175 pixels in width, the theme will shrink your logo automatically to be 175 pixels in width, constraining image proportions. The height of your logo will vary.
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
- Open your logo in Photoshop.
- From the Photoshop menu bar (located at the very top of your screen) select Image, and then Image Size.
- 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).
- Enter 64 pixels for Height under Pixel Dimensions and ignore Width (the width will adjust automatically).
- Ignore the Document Size field set > Click Ok.
- Select Image > Image Size.
- If your logo does not exceed 175 pixels in Width, skip steps 8 - 11 below.
- If your logo exceeds 175 pixels in Width, enter 175 pixels for Width under Pixel Dimensions and ignore Height (the height will adjust automatically).
- Ignore the Document Size field set > Click Ok.
- From the Photoshop menu bar select Image > Canvas Size.
- Enter 64 pixels for Height under New Size > Click Ok.
- From the menu bar go to File> Save for Web and Devices.
- In the Save for Web dialog box select a PNG-24 option.
It is highly recommended that you select a PNG-24 option. Check transparency checkbox for multilevel transparency. The advantage of using PNG-24 is that it can preserve up to 256 levels of transparency in an image. If your logo has a drop shadow effect, soft edges, etc., and lays on transparent background, the PNG-24 format is best.
- Click Save.
- Upload the saved logo to your site.
- To apply your logo to your SharePoint site, go to Site Settings -> Select Title, description, and logo (under Look and Feel).
- Under the Insert Logo section, specify URL to point to your new logo -> Click Ok.
This document applies to SharePoint Online only. To prepare a logo for a Modern Team Site on SharePoint On-Premises 2019, folow the instructions above (Site Logo - Preparation Guidelines for Communication Sites).
Important Note*
For Modern Team Site your logo should be saved in JPG format, and resized to 96 pixels in width and 96 pixels in height (squared shape). After you upload your 96 x 96 pixels logo to your site, it will be displayed using 64 x 64 pixel dimensions.
Do not save your logo in PNG format for a
Modern Team Site. Logo saved and uploaded to a Modern Team Site as PNG will be converted by SharePoint automatically to low quality
JPG format to be displayed on your site instead.
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
- Open your logo in Photoshop.
- From the Photoshop menu bar (located at the very top of your screen) select Image, and then Image Size.
- 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).
- Enter 74 pixels for Height under Pixel Dimensions and ignore Width (the width will adjust automatically).
- Ignore the Document Size field set > Click Ok.
- Select Image > Image Size.
- If your logo does not exceed 74 pixels in Width, skip steps 8 - 11 below.
- If your logo exceeds 96 pixels in Width, enter 74 pixels for Width under Pixel Dimensions and ignore Height (the height will adjust automatically).
- Ignore the Document Size field set > Click Ok.
- From the Photoshop menu bar select Image > Canvas Size.
- 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.
- From the menu bar go to File > Save for Web and Devices.
- In the Save for Web dialog box select a JPEG option. For quality, enter 75 and click Save.
- Click Save.
- Upload the saved logo to your site.
- 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.
- Click Save.
This document applies to SharePoint Online only.
We recommend creating your Tenant and Hub logos using the same dimensions, margins, white color and transparent background as are used in the Tenant-LOGO.psd and the Hub-LOGO.psd templates.
Your final logos should be saved in
PNG-24 format.
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.
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).
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.
-
Navigate to the Office 365 admin center.
-
Choose to Settings > Organization profile.
-
Next to Manage custom themes for your organization, select Edit.
- Upload your Tenant Logo under Select custom logo image section.
- Select Save.
To add a Hub Logo to your Hub Site:
-
Navigate to your Hub Site, click the gears icon on the top navigation bar, select Hub site settings.
- Under Hub site navigation logo, upload your Hub Logo, and select Save.