I can't figure out which icon dimensions I need to use for the install to home screen prompt for a PWA. For now, the icon next to the PWA's name has a white border. Twitter for instance managed to have a full-bleed icon.
So far I tried:
<link rel="apple-touch-icon" sizes="192x192" href="assets/icons/apple-touch-icon-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16x16.png">
// and a manifest
<link rel="manifest" href="assets/icons/site.webmanifest">
Thanks for any input!
Documentation: https://web.dev/install-criteria/
this shows 192x192 and 512x512 px.
I have the following icons in my application:
<link rel="apple-touch-icon" sizes="57x57" href="images/ios/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="images/ios/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/ios/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="images/ios/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/ios/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="images/ios/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="images/ios/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="images/ios/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="512x512" href="images/ios/apple-touch-icon-512x512.png" />
This will cover different iPhone screen sizes, I have tried in iPhone 6, XS and 12 and I get the same result.
You can use this website to generate most of them: https://favicomatic.com/
Related
Trying to display my Web app Icon on the iPhone Home screen.
When creating a Shortcut from my Home Screen to my Flutter Web App, a screenshot of the app is displayed, not the Favicon.
By short cut I mean on your Iphone in Safari click share Icon > Add to Home-Screen > Add
In index.html I added
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="icon" type="image/x-icon" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
Created all images with https://www.favicon-generator.org/ (so they have the right size) and stored them at the root.
The Favicon works in Safari and Chrome and when creating a shortcut from Home screen to Web app on Android the Proper Logo is displayed. But not on IOS, what else do I need to configure.
It's also possible to somehow configure this icon, as you can see if you try adding https://flutter.dev/ to your home screen
I suppose you’re working on windows and as a result didn’t build the Web App in Xcode yet.
Had the same issue sometime ago and that fixed it.
Let me know if it worked.
Ive noticed with website favicons that have transparent backgrounds, when a shortcut is made on iOS and the favicon becomes the shortcut image, the background turns black. So if the favicon is a black logo on a transparent background, it looks a bit strange.
Does anyone know the reason this happens?
Thanks
This is a known behavior of iOS. Although this is not documented anywhere, this is probably to enforce iOS UI guidelines, where all home screen icons are squares with rounded corners.
Oh, and you are not the only one trying to use transparency on iOS. Check StackOverflow's Touch icon and add it to your home screen!
Note: I'm the author of the article mentioned above.
iOS doesn't allow home screen icons to have transparent backgrounds
The home screen icons doesn't support transparency. And why are you using favicon? You should use below in the head tag.
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
As described in the answer: https://stackoverflow.com/a/21144916/468724
Update: Answered below!
I have a responsive web page that is optimized for iPads in full screen. Since upgrading to iOS8 though, a new empty bar started appearing at the bottom of the full page app.
I saw a couple of answers suggesting I add a meta tag to the base layout. Mine is an AngularJS app and the following has been added to the index.html:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link href="assets/css/tapp2.css" rel="stylesheet">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<link rel="shortcut icon" type="image/png" href="assets/img/favicon.png"/>
<link rel="apple-touch-icon" href="assets/img/favicon-150X150.png" sizes="150x150">
<link rel="apple-touch-icon" href="assets/img/favicon-72X72.png" sizes="72x72">
<link rel="apple-touch-icon" href="assets/img/favicon-76X76.png" sizes="76x76">
<link rel="apple-touch-icon" href="assets/img/favicon-144X144.png" sizes="144x144">
<link rel="apple-touch-icon" href="assets/img/favicon-152X152.png" sizes="152x152">
<link rel="apple-touch-icon" href="assets/img/favicon-114X114.png" sizes="114x114">
<link rel="apple-touch-icon" href="assets/img/favicon-114X114.png" sizes="120x120">
<link rel="apple-touch-icon" href="assets/img/favicon-57X57.png" sizes="57X57">
But the bar is still there and I'm stuck. Am I missing something here?
Wokay I found my answer thanks to https://stackoverflow.com/a/25975227/1409180!
Turns out all I had to do was delete the Shortcut from the Home screen and re-add it.
I just create a IOS Phonegap app using Terminal, then change
UIWebViewBounce t= false in config.xml, and delete all contents inside
body, and delete all CSS data.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova-2.4.0.js"></script>
</head>
<body>
</body>
</html>
This is my HTML page, my index.css is empty and my Phonegap version is 2.4. Then I run the app:
When I try to scroll the empty page, a scroll bar appears:
Why? Can anyone please help me?
**UPDATE Solved : just remove height=device-height from meta tag OR Remove status bar **
Yes, This is due to the device status bar, me also faced this issue, it will take almost 20px of window height. Better make sure that you have checked "Hide status bar" option in xcode Targets.
None of these solutions worked for me. I had to manually disable the iOS's WebView's ScrollView's ScrollIndicator, in the XCode project.
self.webView.scrollView.showsVerticalScrollIndicator = NO;
I have the following media queries set up to target the various iOS devices (iPad3, iPad2, iPhone4, iPhone3). When I load this page with an iPhone3 and an iPad2, the correct divs are colored in. When I load this page with an iPad3 however, the iPad2 AND the iPhone4 styles are loaded, but NOT the iPad3. (Can't test the iPhone4 at the moment.) Any ideas?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="ipad3.css" media="only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" />
<link rel="stylesheet" href="ipad2.css" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
<link rel="stylesheet" href="iphone4.css" media="only screen and (min-device-width:640px) and (max-device-width:960px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" />
<link rel="stylesheet" href="iphone3.css" media="only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
</head>
<body>
<div id="ipad3" style="width:200px;height:200px;border:1px solid black"></div>
<div id="ipad2" style="width:200px;height:200px;border:1px solid black"></div>
<div id="iphone4" style="width:200px;height:200px;border:1px solid black"></div>
<div id="iphone3" style="width:200px;height:200px;border:1px solid black"></div>
ipad3 should be RED
<br>
ipad2 should be GREEN
<br>
iphone4 should be BLUE
<br>
iphone3 should be ORANGE
</body>
</html>
..and the 4 css files are coded accordingly (this example is the iPad3.css file):
#ipad3 { background-color: red; }
Because you have the width of the viewport set to device-width, the iPad3 screen resolution will still get reported as 1024x768, but the device-pixel-ratio will be 2.
To target the iPad 3 you can use:
<link rel="stylesheet" href="ipad3.css" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1.5)" type="text/css" />
The pixel dimensions are the same, but the pixel-ratio changes compared to the original iPad and the iPad 2.
Robbo, your code is using: -webkit-min-device-pixel-ratio:0 which is an invalid statement. The non-retina devices will have a pixel ration of 1. That's probably why the iPad 3 picks up both stylesheets.