Skip to Content

Fiori launchpad Add to home screen for IOS and Android devices

I have customized Fiori Launchpad to produce a nice Add to home screen pop pup message. Its to inform user you can book mark this page on your home screen  and user don’t have to remember the fiori launchpad url from the next time.

For Android  Device


For IOS Device


Go to ->SE80 transaction code –>


open FioriLaunchpad.html–>Edit

Add this code to your FioriLaunchpad.html head

  <link rel=“apple-touch-icon-precomposed” href=“../../resources/sap/ushell/themes/base/img/splashscreen/320_x_460.png”/>

  <link rel=“stylesheet” type=“text/css” href=“../../addtohomescreen.css”>

  <script src=“../../addtohomescreen.js”></script>




          maxDisplayCount: 1




and now import this two files  addtohomescreen.css and addtohomescreen.js  and give the proper path of these files that is screen shot red quoted area.

and we are good to see this pop pup messages.

❗ Warning : If Fiori launchpad gets updated then FioriLaunchpad.html code gona be its good to take a backup of this red quoted code and paste it after up gradation of Fiori launchpad.

You must be Logged on to comment or reply to a post.
    • Hi Karthik,

      same concept applied here. but its for fiorilaunchad.html. If you are Using Fiori you don't have to bookmrk each app url. From launchpad tiles you can navigate to your app. only if you bookmark launch pad url , I think its enough.

      When you will try to customize standard fiorilaunchpad.html things are not so flexible as in the given example.


      Zico Santra

        • Correct me if I was wrong.

          I read SAP FIORI Documents for navigation. As it mentioned that navigation is done my hash methodology.

          If it's true, user can save a bookmark at any point of time.


          Karthik A

          • I am running my application on mobile browser only.

            Yes Karthik you can book mark any page at any point of time.

            My point is to give user a extra notification to bookmark only fiorilaunchpad.html page.

            as I said when you will try to customize this standard fiorilaunchpad.html to provide a extra notification message, things are not so felxible compare to your given example link.

            I suggest you try both example to achieve  a extra notification massage for user when they will log into Fiorilaunchpad. (as my requirement is to bookmark only fiorilaunchpad.html)

            you will get to know what is the difference.


  • Hi Zico,


    I have stumbled upon this blog and am trying to implement the icon only in my own on-premise Launchpad:

    The highlighted line is the only line I added.

    However, when clicking "Add to Home Screen" in iOS the default screenshot-type icon shows instead of the image. The href tag for sure works because (using Chrome Web Inspector) the element exists and the image opens properly in a new tab:

    Do you find your solution still works?