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
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.
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/
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.
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 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.