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!
- You might be able to upload the favicon to the root folder as a mime object in se80
<link href="https://github.com/favicon.ico" rel="shortcut icon" type="image/x-icon" />
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.
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.
Thanks a lot. Perfect Solution
The manifest.json is for FLP https://help.sap.com/saphelp_uiaddon10/helpdata/en/d4/09e4c8940743ccb173e9ee8bbaa3a8/frameset.htm
Just simply in your
manifest.jsonapply the favicon like this:
And in your app add the the
iconfolder under your
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
Yes. But for FLP it does not need any JS code.