1

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

2

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';
    document.getElementsByTagName('head')[0].appendChild(link);

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

Greetings

  • and where i need to reference this query !! i am back to the same problem.. – john Gu Nov 16 '16 at 19:25
  • you can add it into a Content Editor web part – Marco Nov 16 '16 at 19:28
  • and then i need to add the content editor web part on all the pages !! – john Gu Nov 17 '16 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 '16 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 '16 at 12:44
2

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 Gu Nov 18 '16 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. – Mohamed El-Qassas MVP Nov 18 '16 at 10:12
  • not i have not modify the master page for our SP online project till now – john Gu Nov 20 '16 at 2:07
1

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";
userCustomAction.Update();
context.Load(userCustomAction);
context.ExecuteQuery(); 

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';
document.getElementsByTagName('head')[0].appendChild(link);

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_location('ScriptLink');
    newUserCustomAction.set_scriptSrc('sitecollectionurl/SiteAssets/InsertFavIcon.js');
    newUserCustomAction.set_sequence(9);
    newUserCustomAction.set_title('Favico');
    newUserCustomAction.set_description('Insert favico javascript');
    newUserCustomAction.update();

   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());
}
AddCustomActions()

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 Gu Nov 17 '16 at 14:00
  • 1
    Regarding 1st point, check this link - blogs.office.com/2016/07/25/… – Gautam Sheth Nov 17 '16 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 – Gautam Sheth Nov 17 '16 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. – Gautam Sheth Nov 17 '16 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 – Gautam Sheth Nov 17 '16 at 14:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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