It would seem like the standard apple-touch tags aren't working correctly for me in iOS8.
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="icon-180.png">
Is there a new format to get this functionality to work? It looks like Apple hasn't yet updated their docs for iOS 8.
I was having issues getting these to work, and the reason was that because I was using a development SSL certificate, it wasn't fetching the images properly.
When on a machine with a proper SSL certificate, or by using absolute paths with a non-secure protocol (http://), I was able to fix this issue.
Moving the touch-icon link right after fixed it for me.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="icon-180.png">
Related
I'm currently struggling to get the apple-touch-icon to appear on mobile Phones. In Safari on my Laptop, the icon is displayed as as part of the tab and in my bookmarks. On mobile phones however, it does not show up. From my research, I should be doing it right but it still doesn't work. I'm testing it on a stage envrionment as the site I'm working on is not live yet.
This is my implementation of the apple-touch-icons:
<link rel="apple-touch-icon" href="/build/favicon/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/build/favicon/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="167x167" href="/build/favicon/apple-touch-icon-167x167.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/build/favicon/apple-touch-icon-180x180.png" />
My project also contains a manifest.json file which contains all the paths and I reference it like this:
<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
When I'm on the website, I can also open the manifest file in the dev tools, so the browser definitely has access to it.
Can anyone help me figure out what the problem might be here?
For anyone running into this issue - my "problem" ended up being testing on the stage environment. It worked in production. So the way I'm showing in the example is correct.
I'm at a loss for how to get this to work. I've tried just about every trick in the book and nothing seems to work. I've tried clearing my cache, using multiple web browsers, and multiple computers.
Here's the code I'm using. I can browse to this image via the URL just fine.
<head>
<title>Security</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" href="http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" type="image/x-icon">
<link rel="icon" href="http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" type="image/x-icon">
</head>
The icon doesn't appear when I load the site and the Console tab of the Developer Tools isn't giving any error indications.
I've tested on:
Chrome: Version 61.0.3163.100 (Official Build) (64-bit)
Firefox: Version 56.0 (64-bit)
IE: Version 11.0.9600.18793
I also tried generating my own using this website: https://www.favicon-generator.org/
Anyone have any ideas?
Here's the steps I followed:
Removed every trace of my previous attempts.
Went to https://www.favicon-generator.org/ and generated a new set of images.
Put the images in the following location /Images/Favicon
Copied the code provided by https://www.favicon-generator.org/ and placed that in my html section.
Completely cleared out everything from my Chrome history.
Closed and reopened Chrome.
Loaded the website again and it was there finally.
After going through the page source, I found:
<link rel="apple-touch-icon image_src" href="//cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=41f6e13ade69">
But even after I did that, my image still has a bored effect. My image is also a transparent png. Any ideas?
Here is my attempt (10.10.1 OS X Yosemite, Safari: Version 8.0.2):
I used this website to generate the favico:
http://realfavicongenerator.net
<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="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
Two things in this answer:
How I did to reproduce StackOverflow's behavior
Why this may not be a good idea
How to reproduce StackOverflow's behavior
What I did:
Download http:////cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png
Submit this picture to RealFaviconGenerator (full disclosure: I'm the author of this site)
Put the generated pics and HTML in a test web site
Access it with Safari and add a bookmark
I got your expected result, ie. a transparent background.
This is basically what you did, so there must be something wrong. A few tips:
There can be a lot of issues with favicon, whatever the browser. They often cache the old icon and do not load the new one. Sometimes they do not load your icon at all, but load it if you wait a few seconds. And so on. My advice: try to use another domain to make sure you start from a fresh state.
Maybe your test web site as some additional stuff that can conflict with your actual test. For example, if you have a file apple-touch-icon.png in your root directory, Safari may load it, even if it is not declared in your HTML code.
Why this may not be a good idea
Mac OS Safari relies on the Touch icon, primarily designed for iOS. It is mainly used for the "Add to home screen" feature. In that case, iOS prevents transparency and fills transparent regions with black. Add StackOverflow.com to the home screen and you get:
Honestly the result is okay, but is this really what SO expected? Your choice.
I figured out the problem here.
The farthest one on the right has a TLD of .io
The center one has a TLD of .com
They are exact clones, the same code on. So it must be because the domain TLD is not .com/.net
Edit:
To further recap information I found about this. It seems like adding a www in front of my domain, allows it to be fully transparent.
mysite.com works
www.mysite.com works
mysite.io doesn't work
www.mysite.io works
Transparent Apple Touch icons are indeed possible. What you need to do is strip all excess information from the PNG using ImageOptim for Mac or a similar program on Windows. I did extensive research and stumbled on the answer by looking at the Apple Touch icon used by the Virtual DJ site. This icon keeps its transparent background on iOS and MacOS Sierra. I looked at the file size and realized how small it was compared to the custom apple touch icons with transparency that I made for my favorites in Safari. Next I looked at the file information using the inspector in Mac's Preview app. All of my custom apple touch icons had four tabs in the inspector section named General, exif, PNG and TIFF. The virtual DJ icon only had two tabs named PNG and General. Once I ran my custom images through ImageOptim the file sizes plummeted by over 90% and the extra TIFF and exif tabs disappeared from the inspector in Preview. Sure enough once I reloaded my custom images and launched Safari all of my Favorites tabs have transparent backgrounds!
According to the Twitter bootstrap documentation, you set the apple-touch-icon-precomposed icons and your general favicon as follows:
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
This is all fine and dandy, but I can't seem to find any major websites that are actually using these link tags to do this - is there a reason or another way to make the icons available?
I have checked:
Google
Bing
Facebook
Twitter homepage
Do any of the major websites use apple-touch-icon-precomposed favicons?
If so, where are they / how do they do it? If not, why not?
If you include them directly under the document root that works too. We had a problem on our website where Apple was not able to find the icons. I wasn't involved in that, though, and I just heard about it, but the solution was just to put the icons directly under the document root.
I have a website that works fine with safari. As per the requirement I want to make this site accessible through iPhone properly. How can I do this? I'm new to iPhone.
If you give me a example of normal web page source code and its converted code(after making change) for iphone then it will be very helpful for me.
I tried iui library but when I attached its files to my web page it displays nothing. I don't know what to do. Can someone point me in the right direction, or give me a complete example?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="apple-touch-icon" href="../iui/iui-logo-touch-icon.png" />
<meta name="apple-touch-fullscreen" content="YES" />
<style type="text/css" media="screen">#import "../iui/iui.css";</style>
<script type="application/x-javascript" src="../iui/iui.js"></script>
Since you're new to iPhone, Start by reading some basic documentation on the topic.
Then, you can take advantage of Safari's iPhone meta tags to make the page look the way you want.
You can use WebKit for your devlopment.