How to specify add shortcut to home screen icon on android for a web application?

android html web-applications jquery-mobile homescreen

11,738

Solution 1

Use this:

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/>

Want more info?

Solution 2

Have a look on this code. set by meta tags.

<!-- ***  Written in HTML5 *** -->

<!-- Button - dialog - slidedown - inline + mini w/ checkmark -->
<span><a href='#' data-rel='dialog' data-transition='slidedown' data-role='button' data-icon='check' data-inline='true' data-mini='true' data-theme='b'>TEXT</a></span>
<!-- Button (blue) - inline (not the full width) -->
<span><a href='#' data-role='button' data-inline='true' data-theme='b'>TEXT</a></span>
<!--  Start a Listview -->
<ul data-role='listview' data-theme='c'>
<!--  List element as pseudo BACK button -->
<li data-theme='a'><a href='#'>Back</a></li>
<!--  List element with COUNT present -->
<li>TEXT<span class='ui-li-count'>VALUEGOESHERE</span></li>
<!--  List DIVIDER -->
<li data-role='list-divider'>Inventory</li>
<!--  Disable AJAX processing on FORM -->
<form data-ajax='false' method='post' action='#' id='form_name' name='form_name'>
<!--  Fixed FOOTER with ACTIVE links for NAVigation -->
<div data-role='footer' data-position='fixed' data-id='fixed-footer'>
    <div data-role='navbar'>
        <ul>
            <li><a href='#' class='ui-btn-active ui-state-persist'>TEXT</a></li>
            <li><a href='#'>TEXT</a></li>
        </ul>
    </div>
</div><!-- /footer -->
<!--  List with SEARCH and custom keyword: Search -->
<ul data-role='listview' data-filter='true' data-filter-placeholder='Search' data-theme='c'>
<!--  List element with extra keywords for searching -->
<li data-filtertext='KEYWORDS'><a href='#'>TEXT</a></li>
<!--  Hidden LABEL for input -->
<label for='input_name' class='ui-hidden-accessible'>TEXT</label>
<!--   -->

<!-- Common Header Info for HTML5 Mobile Web App -->
<!doctype html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta NAME="robots" CONTENT="noindex, nofollow">
    <title>TEXT</title>
    <meta name="author" content="Mario Lurig - http://mariolurig.com/" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" /><!-- 129x129 -->
    <link rel="apple-touch-startup-image" href="/startup.png"><!-- 320x460 -->
</head> 

<!--  Input TYPEs for differing keyboards -->
<input type='date' name='date' id='date' value='2012-01-01' />
<input type='time' name='time' id='time' value='12:00:00' />
<input type='text' name='text' id='text' value='readonly' readonly /><!-- readonly can't be edited, MAYBE the same as disabled='disabled' -->
<input type='datetime-local' name='datetime-local' id='datetime-local' value='2012-01-01 12:00:00' />
<input type='url' name='url' id='url' placeholder='Enter URL' /><!-- placeholder automatically disappears when input begins or default value is present -->
<input type='email' name='email' id='email' autofocus /><!-- autofocus only added as an example; not required -->
<input type='tel' name='tel' id='tel' /> <!-- Keypad for integers only -->
<input type='number' name='number' id='number' /> <!-- numbers and symbols -->
<input type='range' name='range' id='range' min='0' max='50' /><!-- HTML5 slider, not as nice as jQueryMobile version -->

11,738

Author by

sushant

Updated on June 04, 2022

Comments

sushant almost 2 years

I am working on html 5 application, when i make shortcut to home screen on android, its app icon get default bookmark icon or fav-icon + bookmark icon. How to specify app icon for android just like we can specify in iPhone ?

Is there any tag for android to specify app icon ?