I am working on an office 365 sharepoint online 2013. and inside the web application i have 2 site collections; Team site collection & Enterprise Wiki site collection.

now i need to update their ico images. i found some articles such as link which show how to do so by updating the master page. but i am trying to find a solution which do not require master page modification? second question. is the ico image provided per web application or per site collection/master page? Thanks

3 Answers 3


I would try using pure javascript

var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';

The script above will try to get the element or create it if it not exist. Use it into a JQuery - document ready function


  • and where i need to reference this query !! i am back to the same problem..
    – John John
    Nov 16, 2016 at 19:25
  • you can add it into a Content Editor web part
    – Marco
    Nov 16, 2016 at 19:28
  • and then i need to add the content editor web part on all the pages !!
    – John John
    Nov 17, 2016 at 13:55
  • If you dont want to edit the master page, yes, you have to do that on every single page. That's why we work with master pages, if we need to execute something across all pages we attach it to the master page.
    – Marco
    Nov 17, 2016 at 14:34
  • 1
    I get your point, but when they talk about modify, they talk about to perform a full change to the master. But change the location of the fav icon will not present a problem in the future, because you will not change nothing but an url. If you insist to not touch the master, I think this is the best approach.
    – Marco
    Nov 18, 2016 at 12:44

use new .ico image for my SharePoint online site collections without the need to modify the Seattle.master

Changing favicon.ico without modifying the Master Page will require developing a custom code to delegate a control in Master Page . Or via Javascript code that will also require modifying the master Page,

So if you need to achieve this without change the master page you will need to additional programming work for more details check Change favicon without changing master page

So the simple method without using any code is editing the master page by doing the following :

  • Open your site with SharePoint Designer
  • Go to Site Assets
  • Upload your new favicon.icon file
  • Check in the file in the context menu and if asked publish the major version.
  • Check out and edit the master page you're using
  • Update the URL to the new favicon

In your master page locate the tag bellow:

<SharePoint:SPShortcutIcon runat="server" IconUrl="/_layouts/15/images/favicon.ico?rev=23" />
Replace it with:
<SharePoint:SPShortcutIcon runat="server" IconUrl="/SiteAssets/favicon.ico" />
  • Save the master
  • Check in the file in the context menu and if asked publish the major version
  • Refresh your site and the new favicon will appear

For more details check How can I change the favicon on SharePoint and Office 365

is the icon image provided per web application or per site collection/master page?

it's applied per site collection / master page

  • so which approach you suggest and which appraoch is recommended in sharepoint, to do some development or to modify the master page ?
    – John John
    Nov 18, 2016 at 2:42
  • In SharePoint online, Microsoft recommends to don't modify the default master page but it didn't stop you from doing it if you want to. So, if you are making master page changes, it’s up to you so I have mentioned both javascript and modify master page in my answer and I suggest if you already have more modification in you custom page to match your business continue with this approach,if you need only to modify the master page for this purpose use javascript,meanwhile if you have modified the master page you should stay up to date with the ongoing product updates applied to SharePoint Online. Nov 18, 2016 at 10:12
  • not i have not modify the master page for our SP online project till now
    – John John
    Nov 20, 2016 at 2:07

Since you dont want to modify the masterpage, the easiest & simplest method would be User Custom Actions. Also, since this looks like a one time activity, you can write a console application using CSOM C# to execute a javascript file on each page of the site collection. In the javascript file, we can add the code to modify the favico.

Try the below code:

UserCustomActionCollection collUserCustomAction = context.Web.UserCustomActions;
UserCustomAction userCustomAction = collUserCustomAction.Add();
userCustomAction.Location = "ScriptLink";                
userCustomAction.Sequence = 9;
userCustomAction.ScriptSrc = "sitecollectionurl/SiteAssets/InsertFavIcon.js";                
userCustomAction.Title = "Fav ico";
userCustomAction.Description = "Insert fav icon javascript";

Inside the InsertFavIcon.js, the code to change favico would be as below:

var elem = document.getElementById('favicon'); 
elem.parentNode.removeChild(elem); //removes SharePoint OOTB favico
var link = document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'path-to-sitecoll/SiteAssets/favicon.ico';

Also, if you don't want to write a console application, you can write SharePoint hosted app or add code inside script editor/content editor webpart which will register the custom action. Code would be as below. This is a pure javascript based implementation:

function AddCustomActions() {
    var clientContext = new SP.ClientContext();
    var site = clientContext.get_web();
    var UserCustomActions = site.get_userCustomActions();

    var newUserCustomAction = UserCustomActions.add();
    newUserCustomAction.set_description('Insert favico javascript');

   clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
function onQuerySucceeded(sender, args) {
    console.log('New favico added to Site.');
function onQueryFailed(sender, args) {
    console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

This will inject the javascript on each page. Also, keep in mind, this will not work on lists/libraries page(like allitems.aspx) if you have "New" list/libraries experience enabled as currently customizations are disabled on it.

  • "Also, keep in mind, this will not work on lists/libraries page(like allitems.aspx) if you have "New" list/libraries experience enabled as currently customizations are disabled on it." i did not get your point on this? second question you mentioned to injected the JavaScript on all the pages ,, so now if I have an enterprisewiki site collection,,and users will keep adding new pages,, so how i will be injecting the javascript on these new wiki pages? or i can inject the javascript the page layout ?
    – John John
    Nov 17, 2016 at 14:00
  • 1
    Regarding 1st point, check this link - blogs.office.com/2016/07/25/… Nov 17, 2016 at 14:05
  • 1
    Regarding new pages, the user custom action will be applied to them. You don't have to do anything now. User custom action ensures that your script is executed on each page of the site. So whenever you create a new page, this js file will be executed there as well Nov 17, 2016 at 14:07
  • 1
    You can inject script using c# console app with Microsoft.SharePoint.client dll or inside a page/ page layout as I have mentioned in the answer. Since its a onetime activity, I would suggest console app. Nov 17, 2016 at 14:10
  • 1
    First upload the script in site collection and then run console app. Yes should work on all pages except modern pages Nov 17, 2016 at 14:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.