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

Technology Specialist
November 13, 2018
Rate this article
[Total: 0    Average: 0/5]

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


    • 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 =;
     if (!url) {, strings.Info);
         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);
         //$("link[rel='shortcut icon']").attr("href",url);
     return Promise.resolve();
    • 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

    • 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

    • 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

    • 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!


Category : SharePoint, SPFx

Author Info

Technology Specialist
Rate this article
[Total: 0    Average: 0/5]
Having 6 years of experience in design and development of SharePoint applications, Mani has expertise in developing applications using Office 365, SharePoint 2013 & 2010, SPFX, SP Designer Workflows, Visual more

Leave a comment