Web App
I wanted my website to have a special iOS faveicon. So I decided to to find a sample code. Apple's developer.apple.com here is where Apple has there special iOS only. Here is what was was found.
<link rel="apple-touch-icon-precomposed" href="Your-sight.com/icon.png">
<link rel="shortcut icon" href="Your-sight.com/icon.png/>
<link rel="shortcut icon" href="Your-sight.com/icon.png/>
<link rel="apple-touch-icon-precomposed" href="Your-sight.com/icon.png">
<link rel="shortcut icon" href="Your-sight.com/icon.png"/>
Apple recommends a favicon with a 152 by 152, but I pushed the limits with a 2400 by 2400 icon. When designing an icon it was the iOS 7 template that was a tons of help. Then there's the code for making a app out of my sight I found a code here it is.
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
The default and black where acting a bit weird and putting the black bar on the bottom with the information in the top still at least in iOS 8. This all can go in the settings SEO header code for Weebly, and gets saved.
<meta name="mobile-web-app-capable" content="yes">
This peace of code is used for Google Crome Mobile as the web app enabler. This code was found on Google Crome's developer page.
<script>
if(("standalone" in window.navigator) && window.navigator.standalone){
document.addEventListener('click', function(event) {
noddy = event.target;
// Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
noddy = noddy.parentNode;
}
if(noddy.href.indexOf(window.location.hostname) !== -1)
{
event.preventDefault();
document.location.href = noddy.href;
}
},false);
}
</script>
Putting the above in the HTML footer code in the SEO section of settings will alow for the web appto remain in the web app at least for IOS.
<link rel="apple-touch-icon-precomposed" href="Your-sight.com/icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
|
If you have any suggestions you can email me on the "Contact Me" page.
|
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.