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.