Best approach to use new .ico image for my sharepoint online site collections without the need to modify the seatle.master

Question

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

Answer 1

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

Answer 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

Answer 3

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.