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
- Part 2: Add Custom Favicon in Theme Builder
- 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.
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.
Step 3: Publish to save changes
- Click the Publish button to save customizations.
Result
That's it. Now our favicon is changed:
Related articles: