Introduction

At the moment, ShortPoint allows you to modify the Favicon only in Theme Builder for Classic pages. But what to do if you want to use Modern?

In this article, we will provide you with a workaround. You can achieve the desired effect by using the ShortPoint Theme Builder Custom JavaScript option.

Before	After

TABLE OF CONTENTS

• Introduction
• Before we begin
• Step 1: Prepare Favicon
  • 1.1. Upload it to the Document library
  • 2.2. Get Favicon URL
• Step 2: Apply Custom JavaScript
  • 2.1. Prepare Custom JavaScript
  • 2.2. Add Custom JavaScript to Theme Builder
• Result

Before we begin

• The workaround given in this article will work on all browsers, except IE.

Step 1: Prepare Favicon

Upload it to the Document library

To prepare Favicon we are going to use, we need either to upload it in a Document Library or use an existing one that have been already added.

In this example, we will use the uploaded Favicon to our Site Assets Document Library on Modern site.

Get Favicon URL

We will need to know the URL path of this image to apply our custom JavaScript.

Right-click on the favicon image or click the three dots button, and select Preview to open it:

Click View Original at the top bar menu:

This will open the image in a new tab, from where you can extract the URL path. 

In our case, that path is: https://mycompany.sharepoint.com/SiteAssets/favicon.ico.

We will need this for the next part where we apply Custom JavaScript.

Step 2: Apply Custom JavaScript

Prepare Custom JavaScript

Here is the Custom JavaScript you will be using:

shortpoint.$( document ).ready(function() {

var $newFavicon = shortpoint.$(document.querySelector("link[rel*='icon']") || document.createElement('link'));

$newFavicon.attr('type', 'image/x-icon');

$newFavicon.attr('rel', 'shortcut icon');

$newFavicon.attr('href', 'https://mycompany.sharepoint.com/SiteAssets/favicon.ico');

$newFavicon.appendTo('head');

});

Please replace https://mycompany.sharepoint.com/SiteAssets/favicon.ico with the URL path of your favicon image that we obtained in the previous step.

Copy that piece of code.

Add Custom JavaScript to Theme Builder

Now we will apply custom JavaScript.

Open the ShortPoint Modern Theme Builder (Site contents > ShortPoint Dashboard > Theme Builder > Customize my site) and wait for it to load.

Navigate to Utilities > Custom JavaScript and paste the copied code in the input box:

Click Apply and then Publish to save customizations.

Result

That's it. Now our favicon is changed:

Related articles:

• Known Issue: Favicon Is Not Changed in Microsoft Edge
• How to apply custom JavaScript/CSS on a Modern SharePoint site