Change favicon on Modern SharePoint sites

Favicons are associated to a website and are used to easily identify it from the address bar or bookmarks.

Changing the SharePoint default favicon on classic SharePoint usually involves a modification of the master page as explained here, this option is not available on modern sites but it’s still possible to modify it using an Application Customizer.

In this article you will find detailed instructions on how to create the application customizer as well as the final solution ready to be installed on your system.

If this is your first SPFx project you will need to setup your machine first, detailed instructions can be found here.

Create the extension project

  1. Create a folder with the name of the project e.g. dynamic-favicon
  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. dynamicfavicon
    • Provide a description to the extension. e.g. change the default favicon of modern SharePoint sites
  5. The download of all the requirements might take a few minutes.
  6. Type code . to open the project (this will open visual studio code but you can use another editor). The structure of the extension project is like the SPFx web parts projects.
  7. Open DynamicfaviconApplicationCustomizer.ts the file is located under src extensions dynamicfavicon
  8. Locate the OnInit method and replace the original code by the code below:
  9. public onInit(): Promise<void> {  
    	let url: string = this.properties.faviconpath;
    	if (!url) {
    	  Log.info(LOG_SOURCE, 'Icon URL was not provided.');
    	}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);
    	}
    	return Promise.resolve();
    }
    
  10. Locate the comment // This is an example; replace with your own property
  11. Replace the Title variable by testmessage: string;

Run your SPFx extensions

The SharePoint Framework Extensions cannot be tested on the local workbench, you’ll need to test them against a live SharePoint Online site.

  1. Compile your code running the command gulp serve –nobrowser
  2. On your project go to the src folder, open the manifest.json and copy the id value
  3. To test your extension go to a modern page in your SharePoint environment and add the following query string to the URL, replade the ##id## by the id of your solution
  4. ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"##id##":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"faviconpath":"https:/path/to/icon/fav.icon"}}}

  5. Choose load debug scripts
  6. You should see your new favicon on your browser tab

Package solution

  1. To get the basic structure for the packaging run the command gulp bundle --ship
  2. To get the installation package run the command gulp package-solution --ship
  3. On your project structure navigate to sharepoint/solution, in this folder you will find the *.sppkg file

Install Dynamic Favicon on Modern SharePoint

Extensions won’t be automatically enabled. SharePoint Framework extensions must be specifically associated to sites, lists, and fields programmatically to be visible to site users.

To achieve the steps described in this section you will need to install the SharePoint PnP PowerShell.

  1. If you haven’t built the project jump to the last section Install pre-built solution
  2. Open your App Catalog and upload the sppkg file
  3. Check the box Make this solution available to all sites in the organization
  4. On your project go to src/extensions/dynamicfavicon and open the AnalyticsApplicationCustomizer.manifest.json
  5. Copy the id value
  6. Open the PowerShell command line
  7. To establish a connection, execute the command Connect-PnPOnline -UseWebLogin -Url https://yourtenant.sharepoint.com/
  8. To enable the extension, execute the command Add-PnPCustomAction -ClientSideComponentId "id" -Name "DynamicFavicon" -Title " DynamicFavicon " -Location ClientSideExtension.ApplicationCustomizer -ClientSideComponentProperties: '{"faviconpath":"url"}' -Scope site
    • Replace the “id” by the client component id
    • Replace the “UA-00000000-1” by your own google analytics tracking id
    • Replace the “URL” be the link to your new favicon

Note: It’s recommended to host your favicon inside of SharePoint if possible in a public CDN to increase performance.

Install pre-built solution

  1. Download the pre-built solution from here
  2. Extract the content from the zip file and run the Install.ps1
  3. Provide the link to the site collection where you want to change the favicon
  4. Enter your credentials in the authentication window
  5. Wait a couple seconds while the solution is installed in the global app catalog
  6. Provide the link to the new favicon
  7. Refresh your browser to see the updated favicon

Conclusion

With this solution you might see the original SharePoint favicon while the page is loading before the execution of extension code but your custom favicon will be used by the browser even if add the site to the favourites.

Download Dynamic Favicon Solution
Explore Solution on GitHub

Designed by Freepik


No comments yet

Leave a Reply


Web developer focused on SharePoint branding, blogger, tech enthusiast. Travelling and sports are my addictions, knowledge and success are my daily motivations.