I have a web application that will be used on iPhones, and want to provide the icon to be shown when added as a homescreen shortcut.
How can I do this?
Use this HTML code in the <head> section of your start page:
<link rel="apple-touch-icon" href="my_icon.png" />
Related
Having read how to add a custom home screen icon for my web app, I have spent days trying to make it work and whatever I do, the Add to Home Screen process results in an icon based on the screen shot of the current web page.
I have tried using the default file names alone
I have tried using the <link rel="" href=""> definitions and the icons
I have tried putting the icons in the root directory and one level down
I have tried 57x57, 72x72 and 114x114 sized icons, with and without the sizes definition
I have tried precomposed and normal with and without the corresponding change to the rel name
But whatever I do the Add to Home Screen process on my iPhone 4 running iOS 6.3 ignores whatever icon I define and gives me a screen shot based icon. I am tearing my hair out.
How can I find what is going wrong? How do I debug this process to find what is wrong? I have mobile safari linked to safari on the desktop to see what is going on but I am none the wiser.
You might be missing some meta definitions. For example this works in our web apps. Check that the png you're using is valid image.
<!DOCTYPE html>
<head>
<link rel="apple-touch-icon" href="/img/appicon-57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/img/appicon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/img/appicon-114.png" />
<link rel="shortcut icon" href="favicon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
...
I want to make a simple webpage with a JavaScript game look like an app on the iPhone. I know I can save a bookmark to the homescreen and that looks like an app and I know I can set the apple-itouch-image for the thumbnail in my HTML. But when you click on the app on the homescreen, it's clear this is just a webpage. How can I get rid of the URL and search bar at the top like Google Reader does? It's fine to see that bar if you later scroll up.
Is it possible to dive right into full-screen mode when the webpage is clicked?
I'm not looking for anything like PhoneGap, I just want to make a simple webpage with JavaScript look like an app, I don't want it to actually be an app.
You can put some meta tags in your head block of the page. Try these:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
viewport sets width and controls scaling and zooming.
apple-mobile-web-app-capable informs the Apple iOS that the application can be installed to the users springboard so that it starts the Safari Mobile browser without a menu bar
apple-mobile-web-app-status-bar-style controls the look of the thin status bar at the top of the screen.
Another useful line is:
<link rel="apple-touch-icon-precomposed" href="myicon.png"/>
Which will give the app a custom icon once installed.
You need to define a few <meta> tags, most notably apple-mobile-web-app-capable. See a full tutorial here http://mobile.tutsplus.com/tutorials/iphone/iphone-web-app-meta-tags/
Add
<meta name="apple-mobile-web-app-capable" content="yes" />
Then it should work after it was saved to homescreen.
When I go to Trello on my iPhone and bookmark it to my home screen then go into the link from the home screen, it doesn't open the link in Safari, but in a new app. How is that done?
<meta name="apple-mobile-web-app-capable" content="yes" />
in your <head> block.
On iOS it's called a Web Clip. Have a look at this documentation: http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
And here's a JavaScript library that will do a nice little "add to home screen" popover: http://cubiq.org/add-to-home-screen
So I've only seen one website do this and I'm very curious to know how they do it. I'm using an iPhone 4 with iOS5 by the way.
Go to http://m.funnyordie.com/ (Will Ferrell's sketch comedy site) on mobile Safari, add it to the homescreen, and then click on the homescreen icon that was just added.
The mobile site shows up without any of the Safari buttons or address bar. It even shows up in the open app tray as an open stand-alone app (double-tab the home button to see what I mean when Funny or Die isn't in the foreground).
You can navigate the videos on the page and even search, but when you click one of the other tabs (Most Viewed, FoD Exclusives) it takes you to the Safari app for a new tab.
I've never seen anyone else do this and I'm very curious to know how they do this. Anyone know?
It's called a Web Clip and if you specify some meta data in your html you can have it appear on the home screen with an icon
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
To add an icon:
<link rel="apple-touch-icon" href="/custom_icon.png"/>
To have a startup image:
<link rel="apple-touch-startup-image" href="/startup.png">
To hide the navigation bar:
<meta name="apple-mobile-web-app-capable" content="yes" />
To change the status bar appearnace:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
(Note: on iOS 15, the method above won't work according to: https://developer.apple.com/forums/thread/683403)
To change the status bar appearnace on iOS 15:
<meta name="theme-color" content="#ecd96f">
Also for information it seems they are using jQueryMobile pretty heavily (jquerymobile.com) which I think can do a lot of all that for you.
On Apple iPhones and iPod Touches, you specify a link to an icon file like so:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
...but on this page, it recommends that you specify two different sizes of icon, one for iPhone < 4 and another for iPhone 4.
There is no documentation I can find that shows how to specify the two separate icons. Can anyone help?
There are plenty of documentation about this on Google.
Just use:
<!-- **normal** (iPhone/iPod **non retina** display) -->
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<!-- **normal** (iPhone/iPod **retina** display) -->
<link rel="apple-touch-icon" href="apple-touch-icon-72.png" sizes="72x72"/>
<!-- and **iPad** version -->
<link rel="apple-touch-icon" href="apple-touch-icon-114.png" sizes="114x114"/>
As an additional info, you can have the icon without the gloss effect if you use apple-touch-icon-precomposed instead of apple-touch-icon.
and there are several tags you can use in order to have all features of Safari Mobile like splash screen, etc
also, give this Mobile Tuts article a read and you will know almost everything you need to have a brilliant web app