Keep getting 404's for apple-touch-icon.png

Question

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.

Answer 1

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