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

Question

我的index.html文件中有此文件：

<!-- 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">

这些文件位于根文件夹中，该文件夹的访问受.htaccess限制（出于测试目的）。

所有png文件都具有文件名中指示的像素尺寸。

但是android（在我的情况下为4.1.2）一直在使用标准图标作为主屏幕快捷方式（橙色图片）...在iphone4上也不起作用。

你能帮我弄清楚哪里出了问题吗？

谢谢

Answer 1

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

Answer 2

不推荐使用rel="apple-touch-icon"而推荐使用rel="shortcut icon"但从Chrome 33开始仍受支持。

在您的示例中，您同时拥有两者，因此应该可以使用。 但是，某些Android设备上的常规浏览器似乎无法在主屏幕上使用自定义图标。

我在装有Android 4.3的Samsung Galaxy Note 3上也遇到了同样的情况。 Chrome将使用自定义图标，但是常规浏览器将仅使用该橙色通用图标。

我的Samsung Galaxy Note 3上的Chrome用户代理为：

"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"

股票浏览器的用户代理是：

"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"

哪个看起来像是三星包装的旧版Chrome（v28）？ 如果Chrome在v31之前不支持自定义主屏幕图标，则可能可以解释为什么它不起作用。