Favicon & Title for your Fiori Launchpad

If you have a Fiori Launchpad which is customer-facing, you will try to make it as slick as possible.

One of the commons such requirements is to have a favicon and a document tile.

Standard Fiori Launchpad looks like this on the browser’s tab bar.

What if you want to have your own icon and document tile?

SAP does not support it unfortunately and suggests doing a modification. Refer SAP Note 2501049

One of the solutions is to use the SAP Launchpad plugin and set these.

Here is the code for it. This code is to be written with Component.js of your FLP Plugin.

init: function () {
        //Get renderer. This method automatically gets added if you use a FLP Plugin template in WebIDE
	var rendererPromise = this._getRenderer();
	rendererPromise.then(function (oRenderer) {
		this.oRenderer = oRenderer;
		//Add Favicon
		(function () {
			var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
			link.type = 'image/x-icon';
			link.rel = 'shortcut icon';
			link.href = '/favicon.ico'; //Relative to host of FLP
			document.getElementsByTagName('head')[0].appendChild(link);
		})();

		//Set Document Title
		document.title = "My Slick Home";
	}.bind(this));
},

This is how it looked.

You can even set this at the manifest.json level (@ sap.ui > icons >favIcon) so that each of your Fiori apps can have different favicons.

Let me know how it went.!