How can we help you today?

How to Change the Favicon for Modern SharePoint Sites

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:


BeforeAfter

TABLE OF CONTENTS


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:




Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 15 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more