Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Complete the branding of your UI5 apps with a favicon

MikeDoyle
Active Contributor
‎01-08-2017 10:26 AM
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

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

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

  3. 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?



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

  2. You can just add a link tag under the head section of your index.html.  This always seems to work!


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

     
  3. 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.
7 Comments
Labels in this area
Popular Blog Posts