How to change the favicon in SharePoint Modern Site using SPFx Application Customizer

Changing the SharePoint default favicon option is not available on modern sites since master page modification is not allowed but it’s still possible to modify it using an Application Customizer.

In this article, let us see how to create application customizer with detailed instruction

Create the extension project

1. Create a folder with the name of the project e.g. FaviconCustomizer
2. Open the console window in the new directory
3. Type the command yo @microsoft/sharepoint
4. When prompted:
   • Accept the default app-extension as your solution name, and press Enter.
   • Choose SharePoint Online only (latest), and press Enter.
   • Choose Use the current folder, and press Enter
   • Choose Y to make the extension available to be added without activating any features.
   • Choose Extension as the client-side component type to be created.
   • Choose Application Customizer as the extension type to be created.
   • Provide a name to the extension. e.g. faviconcustomizer
   • Provide a description to the extension. e.g. change the default favicon of modern SharePoint sites

4. • Open faviconcustomizerApplicationCustomizer.ts the file is located under src  extensions  dynamicfavicon
   • Locate the OnInit method and replace the original code by the code below:

 public onInit(): Promise<void> {
     let url: string = this.properties.faviconpath;
     if (!url) {
       Log.info(LOG_SOURCE, strings.Info);
     }else{
         var link = document.querySelector("link[rel*='icon']") as HTMLElement || document.createElement('link') as HTMLElement;
         link.setAttribute('type', 'image/x-icon');
         link.setAttribute('rel', 'shortcut icon');
         link.setAttribute('href', url);
         document.getElementsByTagName('head')[0].appendChild(link);
         //$("link[rel='shortcut icon']").attr("href",url);
     }
 
     return Promise.resolve();
   }
 

4. • Locate the comment // This is an example; replace with your own property
   • Replace the testMessage variable by faviconpath

Add the icon path in element.xml custom action

4. • Go to SharePoint à assetsàelements.xml

Add the icon path as below

Once done please save your work and run the solution

Run your SPFx extensions

4. • Compile your code running the command gulp serve –nobrowser
   • On your project go to the src folder, open the manifest.json and copy the id value
   • To test your extension, go to a modern page in your SharePoint environment and add the following query string to the URL, replace id by the id of your solution
   • ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={“##id##”:{“location”:”ClientSideExtension.ApplicationCustomizer”,”properties”:{“faviconpath”:”https://****”}}}
   • Choose load debug scripts
   • You should see your new favicon on your browser tab

Package solution

4. • To package the solution run the command gulp bundle –ship
   • To get the installation package run the command gulp package-solution –ship
   • On your project structure navigate to sharepoint/solution, in this folder you will find the *.sppkg file
   • Copy the package file and deploy it into the app catalog.

Hope this helps!

Thanks