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.
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.
Then, right-click that master page and check out. Choose "Edit File" in the Advanced Mode to change the Favicon path in the coding.
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" />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.
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.
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.
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.