How To Change The Favicon In SharePoint Online

In this blog, we will learn how to change the favicon in the Sharepoint Online environment, so before proceeding, let us know the definition of favicon.

In this blog, we will learn how to change the favicon in the Sharepoint Online environment. So, before proceeding, let's learn the definition of favicon.

What is Favicon?

Favicon is like a logo for a website which is placed in the root directory of a website and it should be in .ico format and it typically displays in the browser’s address bar, next to the page title.

As my first step, I prepared my company logo using Photoshop, however, there are lots of tools available on the internet to convert .png to .ico. So once it is converted, upload it to the site asset of your site collection.

How To Change The Favicon In The SharePoint Online 
Then, open the SharePoint Designer and locate the Master pages library on the Navigation bar. Then, take a backup of Seattle.master item and rename the old one for emergency purposes.

Please see what Microsoft has recommended below.

How To Change The Favicon In The SharePoint Online 

How To Change The Favicon In The SharePoint Online

How To Change The Favicon In The SharePoint Online 

Then, right-click that master page and check out. Choose "Edit File" in the Advanced Mode to change the Favicon path in the coding.

How To Change The Favicon In The SharePoint Online 

Once it's opened the master page, search for the favicon keyword to find the exact line and replace the IconURl with your site asset location.

Existing

<SharePoint:SPShortcutIcon runat="server" IconUrl="/_layouts/15/images /favicon.ico?rev=44" />

New

<SharePoint:SPShortcutIcon runat="server" IconUrl="https://osspdy.sharepoint.com/teams/Demo/SiteAssets/favicon.ico" />

How To Change The Favicon In The SharePoint Online

Once the line is replaced, save the Master page; while saving, it will prompt some warning and say that you modified the page so it will no longer be on the site definition.

How To Change The Favicon In The SharePoint Online 

Click Yes on that warning and check in the page. It is always a best practice to give the exact comment in the Check-In so that It will be easy to restore to the correct version.

How To Change The Favicon In The SharePoint Online

Then right-click the same master page and click the option called "Set a Default Master Page". Then only, it will reflect in the site collection.

How To Change The Favicon In The SharePoint Online 

Then, to verify, you can right-click the browser and choose View source code. There, you can see your changes and it will reflect in the browser tab as highlighted below.

How To Change The Favicon In The SharePoint Online 

How To Change The Favicon In The SharePoint Online