android，主屏幕上的Web应用程序图标，而不是常规图标，apple touche图标：apple-touch-icon-precomposed

Question

I have this in my index.html file :

<!-- WEB SEARCH META TAGS -->
    <meta charset="utf-8">
    <meta name="robots" content="index,follow" />
    <meta name="keywords" content="surfboards,surfboard,shaper,surfing,app,boards,board" />
    <meta name="description" content="" />
    <meta name="author" content="BoardLine Cie">
    <link rel="shortcut icon" href="images/apple-touch-icon-57x57-precomposed.png" />

    <!-- SAFARI WEB APP META TAGS -->
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="apple-mobile-web-app-title" content="BoardLine">
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <!-- CSS-->
    <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css" media="all" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

    <!-- iPhone + Android -->
    <link rel="apple-touch-icon" sizes="60x60" href="images/apple-touch-icon.png"/>
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image320x460.png">
    <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon-57x57-precomposed.png" />

    <!-- iPhone (Retina) -->
    <link rel="apple-touch-icon" sizes="120x120" href="images/apple-touch-icon-120x120.png">
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="images/apple-touch-startup-image640x920.png">

    <!-- iPhone 5 -->
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="images/apple-touch-startup-image640x1096.png">

    <!-- iPad -->
    <link rel="apple-touch-icon" sizes="76x76" href="images/apple-touch-icon-76x76.png">
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image768x1004.png">
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image748x1024.png">

    <!-- iPad (Retina) -->
    <link rel="apple-touch-icon" sizes="152x152" href="images/apple-touch-icon-152x152.png">
    <link href="img/splash/ios/splash1536x2008.png" media="(device-width: 768px) and (device-height: 1024px)    and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <link href="img/splash/ios/splash1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

The files are in the root folder, whose access is restricted by a .htaccess (for testing purposes).

All png fils have the pixel dimensions indicated in the file name.

But android (4.1.2 in my case) keeps using a standard icon for the home-screen shortcut (an orange picture)... Doesn't work on iphone4 neither.

Can you help me figure out what is wrong ?

thanks

Answer 1

Google似乎不再支持apple-touch-icon语法。

Answer 2

rel="apple-touch-icon" is deprecated in favor of rel="shortcut icon" but still supported as of Chrome 33.

In your example you have both, so it should work. However, it looks like the stock browser on some Android devices is not capable of using custom icon on home screen.

I experience the same on a Samsung Galaxy Note 3 with Android 4.3. Chrome will use the custom icon, but the stock browser will only use that orange generic icon.

User Agent for Chrome on my Samsung Galaxy Note 3 is:

"Mozilla/5.0 (Linux; Android 4.3; SM-N9005 Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.136 Mobile Safari/537.36"

User Agent for the stock browser is:

"Mozilla/5.0 (Linux; Android 4.3; nb-no; SAMSUNG SM-N9005 Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Mobile Safari/537.36"

which looks to be a Samsung packaged older version of Chrome (v28)? If Chrome didn't support custom home screen icon before v31 that could probably explain why it doesn't work.