We keep getting 404's for the following two files:
/apple-touch-icon-precomposed.png: 685 Time(s)
/apple-touch-icon.png: 523 Time(s)
I have been scouring my mobile website archive for the culprit to this 404, and there is no place in my code that is directing to apple-touch-icon.png
.
Performing a Find in folder...
in Sublime Text 2 provides zero results for apple-touch-icon
:
Searching 100 files for "apple-touch-icon"
0 matches across 0 files
We are using the Apple meta tags for webapps:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Will usage of these meta tags cause an iPhone to search for an apple-touch-icon
by default? We are not providing an icon, but should we be? We would really just like to remove this 404.
Browsing Apple's Developer Documentation provided no hints that reinforce my theory.
The plot thickens even further when we discovered this is happening on iOS and Android, regardless of browser. Firefox, Safari, & Chrome are all trying to find this apple-touch-icon
.
I used HTML5 Mobile Boilerplate as a starter for my WebApp, which has a file called helper.js
. helper.js
has this function inside of it which I removed from our code:
/**
* iOS Startup Image helper
*/
MBP.startupImage = function() {
var portrait;
var landscape;
var pixelRatio;
var head;
var link1;
var link2;
pixelRatio = window.devicePixelRatio;
head = document.getElementsByTagName('head')[0];
if (navigator.platform === 'iPad') {
portrait = pixelRatio === 2 ? 'img/startup/startup-tablet-portrait-retina.png' : 'img/startup/startup-tablet-portrait.png';
landscape = pixelRatio === 2 ? 'img/startup/startup-tablet-landscape-retina.png' : 'img/startup/startup-tablet-landscape.png';
link1 = document.createElement('link');
link1.setAttribute('rel', 'apple-touch-startup-image');
link1.setAttribute('media', 'screen and (orientation: portrait)');
link1.setAttribute('href', portrait);
head.appendChild(link1);
link2 = document.createElement('link');
link2.setAttribute('rel', 'apple-touch-startup-image');
link2.setAttribute('media', 'screen and (orientation: landscape)');
link2.setAttribute('href', landscape);
head.appendChild(link2);
} else {
portrait = pixelRatio === 2 ? "img/startup/startup-retina.png" : "img/startup/startup.png";
portrait = screen.height === 568 ? "img/startup/startup-retina-4in.png" : portrait;
link1 = document.createElement('link');
link1.setAttribute('rel', 'apple-touch-startup-image');
link1.setAttribute('href', portrait);
head.appendChild(link1);
}
//hack to fix letterboxed full screen web apps on 4" iPhone / iPod
if ((navigator.platform === 'iPhone' || 'iPod') && (screen.height === 568)) {
if (MBP.viewportmeta) {
MBP.viewportmeta.content = MBP.viewportmeta.content
.replace(/\bwidth\s*=\s*320\b/, 'width=320.1')
.replace(/\bwidth\s*=\s*device-width\b/, '');
}
}
};
After removing this, we still get 404's. I am stumped. Any help is greatly appreciated.
Similar to the Favicon, the Apple touch icon or apple-touch-icon. png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen, this icon is used.
You can specify what icon your app should use by including a <link rel="apple-touch-icon" href="/example. png"> tag in the <head> of your page. If your page doesn't have this link tag, iOS generates an icon by taking a screenshot of the page content.
Will usage of these meta tags cause an iPhone to search for an apple-touch-icon by default? We are not providing an icon, but should we be? We would really just like to remove this 404.
Yes. Wenn you add
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
to your site it means that the user can create a bookmark on his home screen which is not opened in Safari but in a webview which looks like a "native" app. You should provide these images as kind of app icon for the home screen.
This might be the hint you were looking for: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With