SPFx Application Customizer – How to change favicon on Modern SharePoint sites

What is favicon?

It is an icon associated with a particular website, typically displayed in the address bar of a browser accessing the site or next to the site name in a user’s list of bookmarks.

To change the default favicon in classic SharePoint is straight forward process that basically involves a modification of the master page. For modern sites – master page modification option is not available. Though it is possible by using Application Customizers a type of SPFx Extensions.

In this article I will explain how to use SPFx Extensions – Application Customizers to modify/change favicon on modern SharePoint sites.

Note: Find more details on SharePoint Framework Extensions if you are new to SPFx.

Let’s get started by creating a new extension project

  • Create a folder with the name of the project (i.e.SPFavIcon)
  • Type the command yo @microsoft/sharepoint

1

  • When prompted provide the necessary information as below:

2

  • It will take some time to download necessary files and prompt you with successful message like:

3

  • Open the project in Visual Studio code editor using code . command (you can use other code editor as well). Project structure for extensions and Client Side Web Parts are same apart from few additional folders.

4

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.

Update the code

  • Open ts the file is located under src–>extensions–>SpFavIcon

5.png

  • OnInit method is responsible to change the fav icon for the site. Locate OnInit method and replace the original code by the code below:

6.png

  • To add your custom variable which can store path for your fav icon URL – add new variable (or use out of the box available variable name ‘testMessage’) “favicon:string” as below:

7

  • To add the icon path – open an element.xml file from folder SharePoint>assets>xml–>CustomAction

8.png

Note: I have used SiteAssets library for this solution.

Execute/run/debug an extension project

  • Use command gulp serve –nobrowser to compile the code.

9.png

  • To test an extension, we need an id of the solution. Go to the src folder–>Open {xxxx}manifest.json and copy the id

10.png

  • Go to your modern page and add the following query string to the URL. (Note: Replace id by your solution id value)

11.png

  • Choose load debug scripts
  • Your new favicon on your browser tab is available

favicongif

Package the Solution

  • Run gulp bundle –ship command to package the solution
  • Run gulp package-solution –ship to get the installation package of the solution
  • This will create solution folder under sharepoint and *.sppkg file will be available.

12

  • Drag & Drop or upload the package file to app catalog.

13.png

Hope this helps you!!!.

4 comments

  1. This works great for SharePoint Online Classis and Modern Sites. For non-programmer I just found an easy solution (ok it’s not for free, but cheap) which works for both Modern and Classic Sites – Favicon for SharePoint Modern Sites: https://www.tecconsult.at/products/sharepoint-favicon-for-modern-sites

  2. Howdy I am so grateful I found your web site, I really found you by accident, while I was browsing on Aol for something else, Nonetheless
    I am here now and would just like to say cheers for a tremendous
    post and a all round interesting blog (I also love the
    theme/design), I don’t have time to read through it all at the moment but I have saved it and also added your RSS feeds,
    so when I have time I will be back to read much more, Please do
    keep up the great job.

    Also visit my site soft case

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s