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.


BeforeAfter

TABLE OF CONTENTS


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: