html - 适用于 MacOS chrome web 应用程序的 apple-touch-icon

Question

我正在创建一个可在 iOS 和 OS X (MacOS) 上运行的 Web APP，但我在使用图标时遇到了困难。

按照Apple自己的手册，我创建了一个apple-touch-icon，一个PNG格式的图标，没有ALPHA通道，没有透明背景，尺寸为180x180。

在 iPhone 上它很棒，它运行良好，但在 MacOS 上它做得很好。

在我的 HTML 中，我只声明：

<link rel="apple-touch-icon" type="image/png" href="apple-touch-icon.png">

有没有办法通过 HTML 声明 iOS 特定图标和不同的 MacOS 图标？

在 iOS 中的结果：

在 MacOS 中的结果：

标签： htmliosmacosweb-applicationsapple-touch-icon

Answer 1

我已经放弃寻找答案或理解它是如何工作的，但我意外地发现，如果你声明一个 128x128 大小的图标，它会覆盖 MacOS (OS X) 上的 apple-touch-icon。

我还没有在任何地方找到这个记录。

据我了解，AppleTouchIcon 最终仅适用于 Safari。Google Chrome 和 Edge 遵循 WebApps 的标准规范。

<link rel="icon" type="image/png" href="icon2.png" sizes="128x128">

正如您在上图中看到的那样，图标的边缘是圆角的，它不像原生应用程序那样完美，但它是我所期望的方式。