How change the app icon for the prototype when adding to home screen

Ahmadov Aliyev shared this question 6 years ago
Answered

Hello,


I'm working on an iPhone demo and I need it to look like an actual app. Adding it the home screen is working just fine and I'm happy with it. Just I need to change the icon for the home screen from justinmind icon to app icon. How can I do that.


tried modifying the prototype directly from the file system using the below but it didn't work


I tried to modify the HTML5 code but I failed as I get the error message (can't save as the file has changed on the file system.


Any idea?


Cheers

Comments (11)

photo
1

I'm afraid it can't be done. Is a big flaw that we're fixing for the next release. If you find any way to do it with the current version, please tell us.

photo
1

What if I add HTML to the page and in the head section I add the below:


for startup screen:


===============


<!-- iPhone 4, 4S and 2011 iPod Touch -->


and for app icon:


=============


<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and 2012 iPod Touch -->


I don't know if this will work or not. Also where should I place the images? and what is the path I should use to reference the images?


Please note that any modification outside JIM prototyper will give error message when I save "can't save as the file has changed on the file system. "


When this new release will be released? please don't tell me after Christmas :)

photo
1

App Icon


=======


link rel equal apple-touch-icon-precomposed sizes 114x114 href equal apple-touch-icon-114x114-precomposed.png


Startup Screen


============


meta name equals apple-mobile-web-app-capable content equals yes


link rel equals apple-touch-startup-image href equals startup-640x1096.png media equals (max-device-width : 548px and webkit-min-device-pixel-ratio : 2)

photo
1

I don't understand this comment. Could you clarify it please?

photo
1

I was saying since the demo will be running as HTML5 on iPhone device, if we can modify the HTML5 to instruct iOS to display whatever app icon we want and whatever startup screen, it should work.


I know which html5 meta tags and link rel to use to instruct iOS to do the above. all I need now is to modify the prototype at the HTML5 level so that I can add these tags. also I need to know where in the prototype folders I should put the app icon file and the startup file.


I don't know any way that can let me modify the prototype in HTML5 instead of just using the prototyper to visually create HTML5 UI.


I was thinking from the prototyper to add HTML and then I will have access to HTML5 code of this HTML I have added and then I can add my meta and link rel tags.


can I do that?

photo
1

The only way I can think about to do that is to export the prototype to HTML files (go to File -> Preferences and uncheck the 'Optimized' checkbox before exporting) and then edit them by hand.

photo
1

You can do this by exporting your prototype to html and then editing the start page by adding the following:


link rel="apple-touch-icon" href="img/app-icon.png"/


The Breakdown


This is what the user will see when they add your app to their home screen. You can specify three different types of icons depending on what device the user is using.


iPod Touch, iPhone and iPad


link rel="apple-touch-icon" href="touch-icon-iphone.png" /


iPhone


link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" /


iPad


link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /


I found the above at here:


http://www.webdesignne.ws/2011/04/11/...

photo
1

thank you


after the change of the HTML, can I publish the modified HTML on justinmind or I have to publish it to my own web server?


justinmond user note accepts only .vp files

photo
1

You will have to place the HTML on your own server. hopefully JustInMind will update the prototyper in the future so that you can supply an icon or splash screen and it will export to the usernote site.

photo
1

We added that option in version 5.5, in the option 'Simulation settings'

photo
1

Thank you