自定义“添加到主屏幕”图标答案

【问题标题】：Customize icon for "Add to home screen"自定义“添加到主屏幕”图标
【发布时间】：2017-04-18 08:56:35
【问题描述】：

是否有任何替代网络浏览器中的默认选项的替代品，例如允许我在我的网络应用程序中添加链接或按钮并在主屏幕中创建图标的 chrome？

例如，我有我的 web 应用程序，我想要 main.html 中的链接或按钮执行脚本并在主屏幕中创建图标。我认为这是不可能的。那么是否有任何替代方法可以在 Web 浏览器中模拟此默认选项？

我还想指定主屏幕中显示的图标。我该怎么做？

【问题讨论】：

您应该指定操作系统、设备以及您想要的示例。
操作系统是安卓和IOS。一个例子就像我描述的那样。我的 HTML 中执行任何脚本并在我的主屏幕中创建图标的任何按钮或链接。我搜索其他帖子，这是不可能的。我要求可能有其他选择。
抱歉我的解释不好。我改变了它，我希望它更有帮助。

标签： html icons homescreen

【解决方案1】：

我想指定显示在主屏幕上的图标。我该怎么做？

您可以使用<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">（是的，甚至适用于 Android 设备）。

有关 Apple 设备的详细信息，请查看iOS document。请注意，您甚至可以为整个网站定义图标。

有关 Android 设备的详细信息，请查看Android document。如果<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">不起作用，你可以试试<link rel="icon" sizes="192x192" href="nice-highres.png">，这是Android中推荐的方法。

是否有任何替代方案可以在网络浏览器中模拟此默认选项？

您可以查看http://cubiq.org/add-to-home-screen 以获取替代方案。 “添加到主屏幕”将显示一条叠加消息，鼓励用户将网络应用添加到主屏幕。

注意：感谢 adam0404 的评论，cubiq.org 链接现已断开。幸运的是，“add-to-home-screen”库已上传到GitHub，请查看https://github.com/cubiq/add-to-homescreen

【讨论】：

一个问题。如果我想在两个操作系统中都这样做，我还需要放置两个“链接”标签吗？这适用于 IOS 和这是我的“head”标签中的Android？
通常情况下，<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png"> 就足够了，因为它被 Android 支持（虽然不是推荐的方式）。但是，市场上有各种 Android 设备和浏览器，有些可能不支持。我的建议是：只使用apple-touch-icon，直到你发现它在某些Android设备上不起作用。
@shaochuancs cubiq.org 链接已损坏
感谢@adam0404，幸运的是cubiq.org的add-to-home-screen已经上传到GitHub：github.com/cubiq/add-to-homescreen
感谢您的出色回答。这在任何地方都很难找到。很高兴它在这里。