# Meta 的 iOS "添加到主屏幕" 图标不好 **URL:** \ **Category:** Site feedback\ **Created:** [2023 年3 月 29 日 00:09 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776 "2023-03-29T00:09:23Z")\ **Posts on this page:** 1\ **Showing post:** 17
作者： ![dfabulich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dfabulich/32/108716_2.png) [@dfabulich](https://meta.discourse.org/u/dfabulich)\ 发布日期： [2023 年4 月 4 日 19:49 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/17 "2023-04-04T19:49:58Z")
我刚注意到这个论坛的 Android PWA 图标也有点坏了。 我刚启动了 Android Studio，运行了 Android API 31 的 Pixel 4 模拟器，安装了最新版本的 Google Chrome，并将 Meta 添加到了主屏幕。图标看起来是这样的： ![image](https://global.discourse-cdn.com/meta/original/4X/e/7/3/e73cca9a3d45b5ba8cc5dd274535356d864e4819.png) 根据我的理解，问题在于 `https://meta.discourse.org/manifest.webmanifest` 中有一个提供两个图标的选项，一个用于“any”目的，另一个用于“maskable”目的。“maskable”图标声称可以从中切出一个半径为 40% 的圆。 > **[Adaptive icon support in PWAs with maskable icons  |  Articles...](https://web.dev/articles/maskable-icon)** > > Maskable icons are a format that give you more control and let your Progressive Web App use adaptive icons. A maskable icon can look great on all Android devices. > 幸运的是，有一个定义良好且[标准化](https://w3c.github.io/manifest/#icon-masks)的“最小安全区域”，所有平台都会遵守。您的图标的重要部分，例如您的徽标，应位于图标中心的一个圆形区域内，其半径等于图标宽度的 40%。外围 10% 的边缘可能会被裁剪。 > > 您可以使用 Chrome 开发者工具检查图标的哪些部分落在安全区域内。打开您的渐进式 Web 应用，启动开发者工具，然后导航到 **Application** 面板。在 **Icons** 部分，您可以选择 **Show only the minimum safe area for maskable icons** 。您的图标将被裁剪，以便仅显示安全区域。如果您的徽标在此安全区域内可见，则一切正常。 当我在 Chrome 开发者工具中选中“Show only the minimum safe area for maskable icons”时，Meta 的 Manifest 面板看起来是这样的： ![image](https://global.discourse-cdn.com/meta/original/4X/3/2/2/322b060da51b6bbda7fbe70cf835f0f1acbba201.png) 由于图标被设置为可遮罩，Android/Chrome 正在从中截取一个圆形的块，效果不佳。 我测试使用了 @Stephen 描述为“被一片白色淹没”的 Apple Touch Icon，作为 Chrome 开发者工具中的可遮罩清单图标。但即使那个图标也仅仅是略微\_太大\_，相对于标准的遮罩大小……左下角被切掉了。 ![image](https://global.discourse-cdn.com/meta/original/4X/1/f/7/1f75851714bdc8574540b0ecc3d769073f131a7a.jpeg) --- _[View the full topic](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776)._