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

【问题标题】：apple-touch-icon for MacOS chrome web apps适用于 MacOS chrome web 应用程序的 apple-touch-icon
【发布时间】：2021-11-07 08:28:15
【问题描述】：

我正在创建一个可在 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 中的结果：

【问题讨论】：

【解决方案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">

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

【讨论】：