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 ?
Use this:
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/>
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 -->
use javascriptbridge
declare your javascriptbridge
private class JavaScriptBridge {
private Context mContext;
public JavaScriptBridge(Context context) {
mContext = context;
}
public void launchHome() {
Intent intent = new Intent(Intent.ACTION_MAIN);
intent.addCategory(Intent.CATEGORY_HOME);
intent.addCategory(Intent.CATEGORY_DEFAULT);
mContext.startActivity(intent);
}
}
add reference of that bridge in webview instance
mWebView.addJavascriptInterface(new JavaScriptBridge(theContext), "MyAndroidBridge");
html way to access that button
<html>
<head>
<script type="text/javascript">
function launchHome() {
if (typeof MyAndroidBridge === 'undefined') {
alert('bridge not declared');
} else {
MyAndroidBridge.lauchHome();
}
}
</script>
</head>
<body>
<a href="javascript:launchHome();">Launch Home</a>
</body>
</html>
Update for September 2014
<link rel="shortcut icon" sizes="196x196" href="icon-196x196.png">
is initially what you need to allow Chrome for Android to have a "Add to home screen" option show up in the settings.
A starting template like
<!doctype html>
<html>
<head>
<title>HTML5 app</title>
<link rel="shortcut icon" sizes="128x128" href="./icns/1410745473_39412.ico">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<h1>Adventures in HTML5 android apps</h1>
</body>
<script type="text/javascript">
navigator.standalone = navigator.standalone || (screen.height-document.documentElement.clientHeight<40)
alert(navigator.standalone == true);
alert(screen.height-document.documentElement.clientHeight)
</script>
</html>
Works with the latest Chrome for Android app ( version 35 ).
Add https://stackoverflow.com/users/67606/pablo-santa-cruz's answer and that should be iOS compatible as well ( I no longer own any iOS devices so I am not 100% sure ).
