浏览器选项卡和 'Add To Desktop' 的单独图标
Separate icon for browser tab and 'Add To Desktop'
我一直在研究如何让我正在开发的网络应用程序在正确的情况下显示正确的图标/图块。我们有一个透明的 .ICO 徽标版本，我们一直将其用于浏览器选项卡中显示的图标。背景没有边框，只有灰色选项卡上的徽标。
现在我们希望用户能够向我们的应用添加主屏幕 link。 link 的图标应该是灰色背景下的徽标。
对于苹果来说这很简单：
<link rel="apple-touch-icon" href="css/touch-icon-iphone.png" />
加上我们要添加的任何其他尺寸。 apple-touch 前缀使单独的文件变得容易。
但是，Android 出现了问题。目前 Android 将接受 apple touch 图标，但这已被列为已贬值且不会很快使用。 (https://developer.chrome.com/multidevice/android/installtohomescreen#icon) 添加用于 Android 的图标的元标记（Chrome 是唯一的问题）列为：
<link rel="icon" sizes="192x192" href="icon-name-192.png">
<link rel="icon" sizes="128x128" href="icon-name-128.png">
这显然会在浏览器看到该图标时覆盖它。这意味着如果我为这些图像提供所需的灰色背景，那么我浏览器选项卡中的图标将显示灰色方块。如果这些是透明的，那么当我在 ANdroid 上添加到桌面时，我得到的图标没有灰色方块。
我错过了什么吗？这似乎是一个很常见的请求，但我找不到解决方案。我尝试查看其他站点的元数据，其中 favicon 似乎是透明的，但桌面版本显示为灰色/另一种颜色，但我没有看到任何额外的标签，所以我假设他们使用的是 apple touch 版本，如前所述，到目前为止显然仍然合法。
处理此问题的公认方法是什么？
rel="shortcut icon" 可能就是您要找的
我一直在研究如何让我正在开发的网络应用程序在正确的情况下显示正确的图标/图块。我们有一个透明的 .ICO 徽标版本，我们一直将其用于浏览器选项卡中显示的图标。背景没有边框，只有灰色选项卡上的徽标。 现在我们希望用户能够向我们的应用添加主屏幕 link。 link 的图标应该是灰色背景下的徽标。
对于苹果来说这很简单：
<link rel="apple-touch-icon" href="css/touch-icon-iphone.png" />
加上我们要添加的任何其他尺寸。 apple-touch 前缀使单独的文件变得容易。
但是，Android 出现了问题。目前 Android 将接受 apple touch 图标，但这已被列为已贬值且不会很快使用。 (https://developer.chrome.com/multidevice/android/installtohomescreen#icon) 添加用于 Android 的图标的元标记（Chrome 是唯一的问题）列为：
<link rel="icon" sizes="192x192" href="icon-name-192.png">
<link rel="icon" sizes="128x128" href="icon-name-128.png">
这显然会在浏览器看到该图标时覆盖它。这意味着如果我为这些图像提供所需的灰色背景，那么我浏览器选项卡中的图标将显示灰色方块。如果这些是透明的，那么当我在 ANdroid 上添加到桌面时，我得到的图标没有灰色方块。
我错过了什么吗？这似乎是一个很常见的请求，但我找不到解决方案。我尝试查看其他站点的元数据，其中 favicon 似乎是透明的，但桌面版本显示为灰色/另一种颜色，但我没有看到任何额外的标签，所以我假设他们使用的是 apple touch 版本，如前所述，到目前为止显然仍然合法。
处理此问题的公认方法是什么？
rel="shortcut icon" 可能就是您要找的