Mike Doyle

January 8, 2017 3 minute read

Complete the branding of your UI5 apps with a favicon

In this blog I will show you a quick trick to complete the branding of your UI5 apps.

What’s a favicon?

A favicon is a tiny icon file which browsers can display on a tab or in a list of bookmarks (a.k.a. favourites).

Why do I care about favicons?

If your UI5 app doesn’t link to a favicon then

Every time your app is launched the browser will make a pointless request to try and get the favicon file. This slows your app (a tiny bit) and adds load (a tiny bit) to the server
The browser console will show an error and the network trace a 404 (‘Not found’) response. Ideally you want the console to be free of errors unless there really is a problem
You are missing an opportunity to complete the branding of your app. Chrome, for example, will show a generic icon on your app’s tab instead of your company’s logo. That might be a big deal if your app is used by suppliers or customers

How do I set the favicon for my UI5 app?

The component manifest has an attribute called favIcon (under sap.ui). Sadly I haven’t been able to get this to work (working examples in the comments are welcome!)
You can just add a link tag under the head section of your index.html. This always seems to work!

<link href="https://github.com/favicon.ico" rel="shortcut icon" type="image/x-icon" />

You might be able to upload the favicon to the root folder as a mime object in se80

Example

Here is an example for you. I created a simple app from the UI5 template in Web IDE (I’m using the personal edition). I then just set a title and added a link control to the view. The link just opens the GitHub homepage. When I run the index.html locally I get an app that looks like this:

Note the generic icon, which I’ve highlighted in red. I also get this on the network tab of the Developer tools:

The runtime for this request is insignificant because the app is running locally on my machine. If the server was far away however the latency would be greater and the doomed request might add more to the runtime. Remember, this request will be made every time the app is run, not just when the cache is empty or invalidated.

I don’t want to see that every time my app is run, hence I spent a few minutes researching how to make it go away.

When I add the link tag I showed above (to the <head> section of index.html) I see this, and I can go home a happy developer:

Note that the GitHub ‘Octocat’ logo is now proudly displayed on the tab. The 404 response and error message are gone. The file will be cached so next time this user runs the app it won’t make a request to the server at all

As you can see I didn’t even need to save the favicon file, I just referenced the one that is already accessible. If you go to ‘[mycompany].com/favicon.ico’ you will probably find that your company has already published one. If you do need to create one you might be able to upload it to the root folder of your server.

Why not take 1 minute now to complete the branding on your UI5 apps?

PS I’ve just focused on on-premise UI5 apps here. If you are using Fiori or you are deploying to HANA Cloud Platform then things will be different. On this project we haven’t created a custom theme. It might be the case that we could use such a theme to set the favicon too.

6 Comments

You must be Logged on to comment or reply to a post.

Boghyon Hoffmann

January 8, 2017 at 8:59 pm

An alternative way to set (not only) a favicon is to use the property homeIcon from sap.m.Shell or the API jQuery.sap.setIcons. In this way, the favicon can be retrieved dynamically which will be then appended to the document once it’s ready.

With Shell:

sap.ui.getCore().attachInit(function() {
	sap.ui.component({
		manifest: true,
		name: "myComponentName"
	}).then(function(createdComponent) {
		sap.ui.require([
			"sap/m/Shell",
			"sap/ui/core/ComponentContainer"
		], function(Shell, ComponentContainer) {
			new Shell({
				homeIcon: {
					favicon: "img/favicon.ico",
					phone: "img/logo_57px.png",
					"phone@2": "img/logo_114px.png",
					tablet: "img/logo_72px.png",
					"tablet@2": "img/logo_144px.png",
					precomposed: false // whether the home icons already have some glare effects (for iOS)
				},
				app: new ComponentContainer({
					component: createdComponent,
					height: "100%"
				})
			}).placeAt("content");
		});
	});
});

Without Shell:

sap.ui.require([
	"jquery.sap.global"
], function(jQuery) {
	jQuery.sap.setIcons({
		favicon: "img/favicon.ico",
		// ...
	});
});

Former Member

March 16, 2018 at 10:30 am

Thanks a lot. Perfect Solution

Former Member

May 2, 2018 at 9:03 am

The manifest.json is for FLP https://help.sap.com/saphelp_uiaddon10/helpdata/en/d4/09e4c8940743ccb173e9ee8bbaa3a8/frameset.htm

Mahdi Jaberzadeh Ansari

March 8, 2019 at 4:57 pm

Just simply in your manifest.json apply the favicon like this:

"sap.ui": {
		"technology": "UI5",
		"icons": {
			"icon": "sap-icon://task",
			"favIcon": "icon/favicon.ico",
			"phone": "",
			"phone@2": "",
			"tablet": "",
			"tablet@2": ""
		},
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		}
	},

And in your app add the the favicon.ico under the icon folder under your webapp folder:

I have tested already and it works 100%. No need to any JavaScript code.

Boghyon Hoffmann

March 11, 2019 at 11:55 am

No need to any JavaScript code.

Applies only if the app is launched from FLP. In all other cases, such as for stand-alone apps, the manifest properties are just ignored. https://github.com/SAP/openui5/issues/2010

Mahdi Jaberzadeh Ansari

March 12, 2019 at 1:00 pm

Yes. But for FLP it does not need any JS code.