# Meta 的 iOS "添加到主屏幕" 图标不好 **URL:** \ **Category:** Site feedback\ **Created:** [2023年三月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:** 17\ **Page:** 1
**Author:** ![dfabulich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dfabulich/32/108716_2.png) [@dfabulich](https://meta.discourse.org/u/dfabulich)\ **Post date:** [2023年三月29日 00:09 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/1 "2023-03-29T00:09:23Z")
现在 iOS 16.4 已经发布，我使用“添加到主屏幕”（A2HS）将一些 Discourse 论坛添加到了我的 iPhone 主屏幕，包括这个论坛 Meta。 当我将 Meta 添加到 iOS 主屏幕时，它看起来是这样的： ![IMG_C14E1841BEDA-1](https://global.discourse-cdn.com/meta/original/4X/5/8/e/58e1c519c93b5c18d80f1c87c7b214f4cbb6c286.jpeg) 如果你仔细看，你会发现它实际上是一个带有 **近乎** 黑色边框的透明图像，周围是黑色背景。一旦你注意到了，就无法忽视它。 我认为这就是“apple touch icon”： [https://global.discourse-cdn.com/meta/optimized/3X/a/c/ac166452701ce353fa6c8865e99879e8cacfb960\_2\_180x180.png](https://global.discourse-cdn.com/meta/optimized/3X/a/c/ac166452701ce353fa6c8865e99879e8cacfb960_2_180x180.png) ![image](https://global.discourse-cdn.com/meta/original/4X/e/d/f/edff6d014081cc08cabe41695939f8a4d8b152fd.png) Apple 会自动为这个图标添加黑色背景，导致图标上出现两种不同深浅的黑色。 更糟糕的是，当你点击图标然后返回主屏幕时，iOS 会短暂显示透明图标，然后一秒钟后才绘制黑色背景。 ![image](https://global.discourse-cdn.com/meta/original/4X/2/9/a/29aead9baa247ede98ee6a25138bc2bc4a640fb4.png) （可惜 Apple 不直接保留透明效果！这个图标看起来很不错……只是一瞬间。） 我认为最好的做法是替换 Meta 的“apple touch icon”，使用一个没有透明度的图标。我使用 Photoshop 的吸管工具填充了方形区域，使其具有匹配的、近乎黑色的背景，如下所示： ![replacement](https://global.discourse-cdn.com/meta/original/4X/8/6/9/869e7038a3526f272b544ac9182338a7479e073d.png) ![image](https://global.discourse-cdn.com/meta/original/4X/7/e/9/7e93105c49488d7ae5d7006225156e727854a9c1.png) 好多了。如果你愿意，可以随意使用我的版本，或者自己制作一个！ ---
**Author:** ![dfabulich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dfabulich/32/108716_2.png) [@dfabulich](https://meta.discourse.org/u/dfabulich)\ **Post date:** [2023年三月29日 00:11 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/2 "2023-03-29T00:11:05Z")
我进一步建议 Discourse 在“设置”中显示“apple touch icon”，并带有黑色背景，以便让网站管理员更清楚地了解如果他们尝试使用透明图标作为“apple touch icon”会发生什么。 编辑：如果管理员设置中的“apple touch icon”显示为圆角和黑色背景，那就更好了，这样网站管理员就能看到图像将具有 Apple 提供的边框半径。我参与的另一个论坛有一个带有彩色边框的“apple touch icon”，当 Apple 添加圆角时，它看起来糟透了…… ---
**Author:** ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)\ **Post date:** [2023年三月29日 02:29 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/3 "2023-03-29T02:29:15Z")
不过，颜色周围的区域是徽标的一部分。我不确定黑色配黑色是否看起来合适。深灰色配黑色比其他选项看起来更好。该区域构成了 Discourse 的 D，没有它，我们只能看到重叠的对话气泡。 暗模式版本反转了黑色： ![IMG_7930](https://global.discourse-cdn.com/meta/original/4X/a/7/4/a74b09b63e3ec999c72957afd832f479dbbec0c3.jpeg) ---
**Author:** ![dfabulich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dfabulich/32/108716_2.png) [@dfabulich](https://meta.discourse.org/u/dfabulich)\ **Post date:** [2023年三月29日 02:45 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/4 "2023-03-29T02:45:04Z")
嗯，我猜是这样。这个呢？ ![white-3](https://global.discourse-cdn.com/meta/original/4X/5/4/d/54d5c7ec141ce935f720c99a3cc796de125d8218.png) ![Simulator Screen Shot - iPhone 14 Pro - 2023-03-28 at 19.43.36](https://global.discourse-cdn.com/meta/original/4X/0/0/d/00d9d126cbb60cbf9e830fdbd5e306c6815e922c.png) ……我不知道。也许你们想找个真正的设计师谈谈！ ---
**Author:** ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)\ **Post date:** [2023年三月29日 12:23 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/6 "2023-03-29T12:23:09Z")
我已经将 Meta 的 Apple Touch 图标更新为白色背景，正面带有我们的徽标。现在看起来会好很多 👍 感谢您提请我们注意此事。 ---
**Author:** ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)\ **Post date:** [2023年三月30日 02:14 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/7 "2023-03-30T02:14:46Z")
比例有明显改变吗？它看起来确实有点小，被一片白色淹没了。 ---
**Author:** ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)\ **Post date:** [2023年三月30日 05:08 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/8 "2023-03-30T05:08:18Z")
是的，比例确实改变了，因为有白色背景也意味着图标缩小了一点，这样白色空间就包围了图标。 不过，由于反馈显示它似乎比人们期望的要小，所以可以进行调整。 ---
**Author:** ![twofoursixeight](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/twofoursixeight/32/574822_2.png) [@twofoursixeight](https://meta.discourse.org/u/twofoursixeight)\ **Post date:** [2023年三月30日 07:04 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/9 "2023-03-30T07:04:20Z")
移动设备上使用的旧徽标发生了什么变化？为什么我们要使用不同的设计？ ---
**Author:** ![ClawdiaWolf](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/clawdiawolf/32/262518_2.png) [@ClawdiaWolf](https://meta.discourse.org/u/ClawdiaWolf)\ **Post date:** [2023年三月30日 07:13 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/10 "2023-03-30T07:13:57Z")
更改徽标的原因是，之前使用的透明 PNG 文件在固定到主屏幕时，透明部分会被黑色替换，从而遮挡了徽标的一部分。 现已替换为使用显式白色背景的图标，以便徽标在固定到主屏幕时能够正确显示。 ---
**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\ **Post date:** [2023年三月31日 00:52 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/11 "2023-03-31T00:52:01Z")
> [@jordan.vidrine](#): > > 是的，尺寸确实改变了，因为有白色背景也意味着图标缩小了一点，这样白色空间就包围了图标。 我明白你的意思，但我觉得我们可以做得更大一些，肯定可以。 目前 - DiscourseHub 有一个大的 Discourse 标志（被白色包围） - Meta PWA 有一个小的 Discourse 标志（被白色包围） 我们能不能改一下，在 DiscourseHub 中使用旧的标志，它能更好地利用空间？ ---
**Author:** ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)\ **Post date:** [2023年三月31日 02:30 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/12 "2023-03-31T02:30:19Z")
它们并排放在一起： ![IMG_7955](https://global.discourse-cdn.com/meta/original/4X/0/6/9/069c626b29916ed1399943655abbc0286b7dc64c.jpeg) ---
**Author:** ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)\ **Post date:** [2023年四月4日 16:30 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/13 "2023-04-04T16:30:29Z")
从设计角度来看，我认为我们也应该缩小 DiscourseHub 应用中的徽标。 从并排查看来看，左侧的图标比右侧的 Hub 版本更能平衡徽标。 ---
**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\ **Post date:** [2023年四月4日 19:05 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/14 "2023-04-04T19:05:26Z")
现在这是我的 Firefox 新标签页。看起来图标上的白色背景非常不标准 ![image](https://global.discourse-cdn.com/meta/original/4X/3/7/b/37b570dd5065c2c82446ab6fcf7468d82bf28b72.png) ---
**Author:** ![dfabulich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dfabulich/32/108716_2.png) [@dfabulich](https://meta.discourse.org/u/dfabulich)\ **Post date:** [2023年四月4日 19:25 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/15 "2023-04-04T19:25:20Z")
为什么 Firefox 会使用 Apple Touch 图标？我期望 Firefox 使用从 [https://meta.discourse.org/manifest.webmanifest](https://meta.discourse.org/manifest.webmanifest) 链接的一个图标。 事实上，我认为这正是 Discourse 有两个独立设置，“manifest icon”和“apple touch icon”的原因，因为 Apple 会忽略透明度并应用圆角蒙版，而其他浏览器应该遵循 Web Manifest 标准，允许透明度。 > **[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. ---
**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\ **Post date:** [2023年四月4日 19:28 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/16 "2023-04-04T19:28:39Z")
Chrome（Android 标签图标）和 Firefox（标签页起始页）都使用 apple-touch-icon 作为 favicon 的高 DPI 版本，并且都受到了此更改的影响。 > [@dfabulich](#): > > 我期望 Firefox 使用从 [https://meta.discourse.org/manifest.webmanifest](https://meta.discourse.org/manifest.webmanifest) 链接的图标之一。 据我所知，那只用于 PWA 功能，例如添加到主屏幕时的图标。 ---
**Author:** ![dfabulich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dfabulich/32/108716_2.png) [@dfabulich](https://meta.discourse.org/u/dfabulich)\ **Post date:** [2023年四月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) ---
**Author:** ![dfabulich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dfabulich/32/108716_2.png) [@dfabulich](https://meta.discourse.org/u/dfabulich)\ **Post date:** [2023年四月4日 20:06 UTC](https://meta.discourse.org/t/metas-ios-add-to-home-screen-icon-is-not-good/259776/18 "2023-04-04T20:06:48Z")
> [@Falco](#): > > Chrome（Android 标签页图标）和 Firefox（标签页起始页）都使用 apple-touch-icon 作为 favicon 的高 DPI 版本，两者都受到了此更改的影响。 我无法在 Chrome Android 上重现这一点。对于 Chrome Android，新的标签页图标似乎只是 favicon。 ![image](https://global.discourse-cdn.com/meta/original/4X/4/b/e/4be08a0d0975a811670f7d5dffd6d3d668fb0915.png) 您能否找到关于 Firefox 用于标签页起始页的图标的任何文档？ 如果 Firefox 没有为标签页起始页使用 Manifest 图标，那么我至少会期望它使用 [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#icon) 图标之一。 也许 Firefox 回退到使用 apple touch 图标是因为 `link rel=icon` 太小了？ 您知道，您可以拥有多个 `link rel=icon` 元素，并带有多个 `sizes` 属性。我认为最好有两个 `link rel=icon` 元素，第一个指向 favicon，第二个指向带有更大 `sizes` 的 manifest 图标。我敢打赌，这将使 Firefox 使用更好、更大的图标。🤔 更广泛地说，我认为这个故事的寓意是： 1. 这实际上是一个项目，弄清楚图标在哪里以及为什么被使用 2. Discourse 管理员站点没有为管理员提供足够的指导来正确处理这个问题 管理员站点应该： - 禁止在 manifest 图标和 apple touch 图标中使用透明度 - 像 Chrome Dev Tools 那样，使用 40% 半径的圆形渲染 manifest 图标 - 像 Apple 那样，使用圆角边框渲染 apple touch 图标 有了这些功能，我认为设计师可以开始尝试上传在以下所有场景中看起来都不错的图标： - iOS A2HS - Android A2HS - Firefox、Chrome 和 Safari 的标签页起始页