Custom Home Screen/Bookmark Icons
iPhone and other devices offer users the ability to add a shortcut/bookmark to a webpage on their home screen; our job as developers is to provide a custom icon that best represents our site or page. Including a line of code in the head of each page or including a specifically named icon in the website's root directory provides the functionality on iPhones and iPads; similar strategies work on Androids and other phones.
- Place a PNG icon named apple-touch-icon.png in the website root directory to specify the icon for the entire site if you don't want to add a link tag to pages.
- Instead of adding an image to the website root directory, you can instead add a link element to the head section of any page to specify an icon for a single page:
<link rel="apple-touch-icon" href="/custom_icon.png"/>
- To support different device resolutions (iPad vs. iPhone, for instance), add a size attribute to each link element:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element's size defaults to 60 x 60.
- If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.
- If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:
See the Apple Developer site for full details.
Android-Specific JSON Manifest
Since Chrome version M31, the mobile browser running on Android devices, Google has offered a way to set up a web app to have an application shortcut icon for adding to the device's homescreen; when clicked, the homescreen icon will launch the web application in full-screen "app mode". Since Chrome version M39, Google offers a way - via a JSON manifest - to specify metadata for the application, allowing us as developers a way to more closely mimic a native-application experience with our web app. You can find more details at https://developer.chrome.com/multidevice/android/installtohomescreen.
Homescreen-installed web apps work just like a "normal" web app, but integrate into the Android environment in the following extra ways:
Installs Directly to Homescreen: users clicking "Add to homescreen" will see the app being added on to the homescreen.
Integrates Into OS Task-Switcher: launching a web app from the homescreen means the app will appear in the task switcher, separately from the browser.
Runs in Full Screen: Web apps run in full screen more, with no vestiges of a browser; the URL does not appear, nor browser elements like bookmarking and navigation controls.
Supports a Default Device Orientation: Web apps launch and remain in the designation orientation (landscape or portrait).
Navigating to External Pages Highlights Them to User: Users will always know if the web app routes them to a location outside the application's domain - especially useful for authentication flows, as the user is kept in the app experience but the URL of the authentication system is clearly visible to the user.
<link rel="manifest" href="manifest.json">
A typical manifest file might look like this:
"name": "Sample Webucator Android Web App",
Our sample manifest includes references to various PNG icons - in assorted sizes and pertaining to specific screen densities - as well as a starting URL, display mode ("standalone"), and orientation ("portrait").
For mobile versions of Chrome on Android older than M39 but since M31, Chrome supports the following meta tag for homescreen-installed apps:
>meta name="mobile-web-app-capable" content="yes">