Note that there are some explanatory texts on larger screens.

plurals
  1. POKeep getting 404's for apple-touch-icon.png
    primarykey
    data
    text
    <p>We keep getting 404's for the following two files:</p> <pre><code>/apple-touch-icon-precomposed.png: 685 Time(s) /apple-touch-icon.png: 523 Time(s) </code></pre> <p>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 <code>apple-touch-icon.png</code>.</p> <p>Performing a <code>Find in folder...</code> in Sublime Text 2 provides zero results for <code>apple-touch-icon</code>:</p> <pre><code>Searching 100 files for "apple-touch-icon" 0 matches across 0 files </code></pre> <p>We are using the Apple meta tags for webapps:</p> <pre><code>&lt;meta name="apple-mobile-web-app-capable" content="yes"&gt; &lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt; </code></pre> <p>Will usage of these meta tags cause an iPhone to search for an <code>apple-touch-icon</code> by default? We are not providing an icon, but should we be? We would really just like to remove this 404.</p> <p>Browsing Apple's <a href="http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">Developer Documentation</a> provided no hints that reinforce my theory.</p> <p>The plot thickens even further when we discovered this is happening on iOS and Android, regardless of browser. Firefox, Safari, &amp; Chrome are all trying to find this <code>apple-touch-icon</code>.</p> <p>I used HTML5 Mobile Boilerplate as a starter for my WebApp, which has a file called <code>helper.js</code>. <code>helper.js</code> has this function inside of it which I removed from our code:</p> <pre><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') &amp;&amp; (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/, ''); } } }; </code></pre> <p>After removing this, we still get 404's. I am stumped. Any help is greatly appreciated.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload