Skip to Content
Technical Articles

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.!

3 Comments
You must be Logged on to comment or reply to a post.
  • Hi Krishna,

     

    Great blog, thanks!  But when we enter an app it defaults to SAP image.  Anyway to set favicon for all apps, without changing manifest of all apps?

     

    Thanks!

    • Hi Michael.

      Just go to the Theme Designer, (tr. /UI5/THEME_DESIGNER on-prem system) or in Launchpad service in BTP. Create a new theme based on the standard one you like it. After that, look for the parameter "sapShell_Favicon" and upload the picture/icon of your choice. Save & release and set as default theme.

      I hope it is clear for you, otherwise just let me know.

      BR
      Daniel

  • Hi Krishna.

    Great blog and thanks for sharing that interesting information !

    I do not know if I understood you properly when you are saying the note does not support the favicon change. After checking the mentioned note, I changed the parameter specified in the note in the Theme Designer and that works like a charm in Fiori Launchpad Service on SAP BTP. I believe that would work for Fiori Launchpad on-prem as well.

    Best regards.

    Daniel