How to Change the Favicon for Modern SharePoint Sites : ShortPoint Support

ShortPoint allows you to modify the Favicon of your site from the generic SharePoint icon to your company's brand icon. In this article, we will walk you through the two ways you can do this in Theme Builder.

Here is an example of what we want to achieve:

Before	After

TABLE OF CONTENTS

Before we begin
Part 1: Prepare Favicon
- Step 1: Upload to the Document library
- Step 2: Get the Favicon URL
Part 2: Add Custom Favicon in Theme Builder
- Adding a Favicon in Theme Builder Logo Options
- Adding a Favicon Using Custom Javascript
Result

Before we begin

Ensure that you have the latest ShortPoint SPFx version installed on your SharePoint environment.
You must also be a ShortPoint Designer with an active license.
The steps given in this article will work on all browsers, except IE.

Part 1: Prepare Favicon

Do the following steps to store your new Favicon where it is accessible in SharePoint.

Step 1: Upload to the Document library

Upload your Favicon file to a Document Library or use an existing one that has been added.

In this example, we will use the uploaded Favicon found in the Site Assets Document Library of our Modern site.

Step 2: Get the Favicon URL

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 where you can copy the URL path.

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

We will be using this in the second part of this article

Part 2: Add Custom Favicon in Theme Builder

There are two ways you can add a new Favicon for your site using ShortPoint Theme Builder.

Adding a Favicon in Theme Builder Logo Options

Step 1: Launch Theme Builder

Go to SharePoint settings and open Site Contents.
Click ShortPoint Dashboard.
Select the Theme Builder tile and press Customize my site.

The Theme Builder window will open.

Step 2: Navigate to the Logo options

From the main Theme Builder menu, select Header.
Then choose the Logo option.

Under the Logo settings, you will find the Favicon field.

Favicon field

Step 3: Update the Favicon field

You can do one of two things in the Favicon field to input the Favicon you want to use. You can

Add the Favicon URL you got in Part 1, or;
Click the File Picker icon, navigate to the Document Library where you uploaded the Favicon file, and Select it.

Step 4: Publish changes

Once you are done, hit Publish to apply your changes.

Adding a Favicon Using Custom Javascript

Step 1: 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');

});

Where you can replace https://mycompany.sharepoint.com/SiteAssets/favicon.ico with the URL path we obtained from the Favicon we uploaded in Part 1.

Copy the code.

Step 2: Add Custom JavaScript to Theme Builder

Now we will apply custom JavaScript.

Launch ShortPoint Theme Builder by following the same steps as indicated above
Navigate to the Utilities menu and select Custom JavaScript.
Paste the copied code in the input box.
Hit the Apply button.

Add Javascript

Step 3: Publish to save changes

Click the Publish button to save customizations.

Result

That's it. Now our favicon is changed:

How to Change the Favicon for Modern SharePoint Sites

Before we begin