android，主屏幕上的网络应用程序图标而不是通用图标，苹果触摸图标：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 的三星 Galaxy Note 3 上也有同样的体验。 Chrome 会使用自定义图标，但普通浏览器只会使用橙色的通用图标。

我的三星 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 之前不支持自定义主屏幕图标，那或许可以解释为什么它不起作用。