Skip to Content
Technical Articles
Author's profile photo Krishna Kishor Kammaje

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

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo michael hatfield
      michael hatfield

      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!

      Author's profile photo Daniel Asperilla
      Daniel Asperilla

      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

      Author's profile photo Daniel Asperilla
      Daniel Asperilla

      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

      Author's profile photo Murtaza Lokhandwala
      Murtaza Lokhandwala

      Hello Daniel Asperilla ,

      Maintaining the parameter works great for FLP on-premise for Chrome, Edge, IE, Firefox. It is not working for Safari on Mac but Chrome on Mac works. Did you face the same issue?

      Krishna Kishor Kammaje - Does your solution work in Safari browser?

      Thank you,
      Murtaza