Solved: add prototype icon on mobile home screen in RP 9

#1

I’ve been looking for quite some time to add a custom icon for my prototype created in RP 9. This was a standard functionality in RP 8 that unfortunately didn’t make it to RP 9 :frowning:

The good news: it’s quite simple to fix!

We can add the required link to the icon image in the <head> of the prototype with jQuery that’s included automatically with every prototype.

Prerequisites:

  • You need to publish the prototype to Axure Share / Axure Cloud
  • You need a place to host your icon image and it needs to be accessible via https

Steps:

  1. Log in to your Axure Share / Axure Cloud dashboard and go to the project you want to add an icon for.

  2. Add a ‘plugin’ to the project

  3. Set the plugin to the ‘bottom of <body>’

  4. add the following code / javascript to the plugin and add in your url to your icon:

     <script>
   (function($) {
     $(document).ready(function() {
       let url = 'https://url-to-your/icon.png';   //<- replace with your icon url here!
       $('head', window.parent.document).append('<link rel="apple-touch-icon" sizes="128x128" href="'+url+'">');
       $('link[rel="shortcut icon"]', window.parent.document).attr("href", url);
     });
   })(jQuery);
 </script>

  5. Include the plugin to all pages

Now when you add the prototype to your mobile home screen you’ll see a nice icon that you’ve specified! :smiley:

Disclaimer:
I’ve only tested this on ios, in theory it should also work on android.

#2

Amazing! Worked perfectly on my iPhone 11. Nice work and thanks so much for sharing.

Just one thing to note, you can’t use an image from within the Axure Prototype, you’ll need to store it externally. I used a simple https image hosting service, for example:

#3

Awesome! It works for me on my iPhone XR :smiley: Thanks for the tip