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.
Related
I have an app with editable webview. In Android O (8) Google added new feature Smart Text Selection:
https://developer.android.com/preview/api-overview.html#sh
I want to disable opening hyperlinks, google maps, dialler from smart text selection like:
I tried to add
<head>
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
</head>
but it doesn't work (smart selection menu item still appears). I need to disable only opening this 3 apps from webview content.
Do you now how to disable this new feature?
Thank you in advance.
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
I notice that there are a lot of ways to add website icons. Because of the various of devices and systems, there are also very different formats to add icon. So how can I meet all of their requirements? What is the safest solution?
For example:
Method One:
<link rel="shortcut icon" href="img/favicon.ico">
Method Two:
<link rel="icon" type="image/vnd.microsoft.icon" href="img/favicon.ico" />
Method Three:
<link rel="apple-touch-icon" href="img/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/touch-icon-ipad-retina.png">
I understood that method three is to add icon to the home-screen of apple devices. And ico file is a file format that stores various size of icons.
So if I use method three(Apple's way), does it get the same effect as the two others? What are the relationships between these three methods? If putting them together, what would happen? How do they influence each other?
These is no one-to-one relationship between browsers and icons. However, the following list gives a good overview of the topic:
Legacy desktop browsers (eg. old versions of IE): favicon.ico, declared with <link rel="shortcut icon" href="/favicon.ico">
Modern desktop browsers (eg. latest Chrome): 16x16 PNG icon, declared with <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">. Yet, modern browsers can deal with the legacy favicon.ico, so this is not a strict requirement.
Safari with Mac OS Yosemite: Apple Touch icon, declared with <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
iPhone and iPad: several Apple Touch icons, from 57x57 (first generations of iPhone) to 180x180 (iOS 8, ie. iPhone 6 and latest iPad), declared with <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
Android Chrome, prior M39 / Android 5 / Lollipop: 192x192 PNG icon, declared with <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">. It also uses the Apple Touch icon as the bookmark icon.
Android Chrome M39+ / Android 5 / Lollipop: up to 6 icons declared in a manifest, declared with <link rel="manifest" href="/manifest.json">. It also uses the Apple Touch icon as the bookmark icon.
IE 10 / Windows 8: a 144x144 icon, declared with <meta name="msapplication-TileImage" content="/mstile-144x144.png">
IE 11 / Windows 8.1: up to 4 icons declared in a manifest, declared with <meta name="msapplication-config" content="/browserconfig.xml">
Coast by Opera: a 228x228 PNG icon, declared with <link rel="icon" type="image/png" href="/favicon-228x228.png" sizes="228x228">
Google TV: a 96x96 PNG icon, declared with <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
... Yandex Browser, etc.
In addition to the huge amount of icons, there is also a design issue. The most common pitfall is transparency. Favicons are often transparent, which is fine. However, iOS forbids it and fills the transparent regions with black. For an example of this, compare the SO touch icon and what you actually get when you add SO to the home screen of your iPhone/iPad. So it is important to keep design in mind, not just resize your master picture blindly.
For these reasons, I advice you to use this favicon generator. It generates all the required icons you need to support all major platforms and also let you design icon platform-per-platform. Full disclosure: I'm the author of this service.
Method 1 is the simplest, method 2 is for older versions of Internet Explorer, and, as you say Method 3 is for apple devices.
You should be able to use all 3 for maximum support. They will suplement each other, with devices each using the relevant one and ignoring the others.
See Favicon on Wikipedia for more information.
I have been working on a jQueryMobile App wrapped in phonegap with fixed footer.
In windows8 phones, while changing the orientation to landscape mode, the fixed footer is not aligned correctly in landscape mode only. The footer seems to have a bottom padding like behavior in landscape mode. In Portrait mode, it is aligned perfectly.
I am using jquery.mobile-1.3.2, and Phonegap 2.7.0.
I have been trying the fixes mentioned in the below URL's, but did not help:
https://forum.jquery.com/topic/jquery-mobile-fixed-footer-not-at-the-bottom-on-windows-phone-7-and-8
stackoverflow.com/questions/16602585/jquery-mobile-position-fixed-in-windows-phone-8-and-viewport-height
gilesey.wordpress.com/2013/08/15/jquerymobilephonegap-hintshacks-for-windows-phone-8-0iosandroid/
Also tried some of the JS, jQM and CSS tricks, but no change affected for the footer.
A screen-shot of the page in Landscape mode is shown in the below link (You can see the black footer, even the footer text is not clearly visible):
http://goo.gl/8RICNG
For more clarity, a part of the header section is pasted below:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
And my App footer code is:
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-hide-during-focus="" class="footer-cls">
<div align="center" class="footer-txt"><script>document.write(footerText);</script></div>
</div>
Can any one please help me with a perfect work around as I am stuck with this issue?
Thanks in advance..
In Mainpage.xaml try changing the property
shell:SystemTray.IsVisible="True"
to
shell:SystemTray.IsVisible="False"
This will render the app in fullscreen mode and will reset your CSS to the entire page.This might fix your issue
I am trying to accomplish a simple slide in popup animation in jquery mobile. I tested this on the desktop browser (chrome and firefox) and works fine. But in mobile i get the following results on pressing the button:
The popup comes in fine but creates a white space to the right of the screen which is visible if the user slides to the right. Dismissing the popup removes this white space. This only happens if the popup is triggered using "slide" transition. Does anyone know the reason for this behavior.
I can manually resize the window but I am not sure what event fires after the popup is done sliding in.
(I had images to show this but I don't have 10 rep so I cannot post them :( )
Does anyone know why this is happening. I am testing with Droid Razr Maxx (running Jelly Bean). I have tested with chrome, firefox and the default browser on the device. They all produce the same result. Here is my code:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page">
Pop Up
<div data-role="popup" id="pop" data-overlay-theme="a">
<p>Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup</p>
</div>
</div>
</body>
</html>
Upon further research, I found out that this issue was fixed in the latest version of jquery mobile (1.4) which is still in alpha phase.
http://jsbin.com/edeluh/32