5002–Defining Home Screen App Icon

Media Files

Project Submission

Your submissions

Background

Assume now we have a Fake Conference webpage. We want to allow our user to install the web on their home screen, so that they can access the information right from their home screen on the mobile phone.

You can find the written HTML, CSS and JavaScript code in the following link:

http://codepen.io/makzan/pen/kkJPzR

Requirement

Try to use <meta> tag and manifest JSON file to declare the app icon for the home screen.

We also want the home screen’s app title to be “FakeCon”.

FakeCon-Icon.zip

Help

❓ Show help content

Apple’s guide on meta tag:

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Web Standard’s Manifest:

https://developer.mozilla.org/en-US/docs/Web/Manifest

And you can define the home screen’s title by the following <meta> tag.

<meta name="apple-mobile-web-app-title" content="FakeCon">

And here is my example manifest JSON.
https://s3-us-west-2.amazonaws.com/s.cdpn.io/15649/manifest.json

Submission guideline

You can submit the URL of codepen, or you may upload the HTML file directly.

Notes

Actually I have uploaded the app icons and you can use them directly.

Marking scheme

[["N/A",null,null,null,null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null]]