Html5-boilerplate: 当只有一个可以工作时，是否需要 6 种不同的苹果触摸图标？
只有一个 Apple-touch-icon png，设置为 144x144px，也将用于旧设备（自动缩小），所以我认为不需要创建 6 个不同的版本。
neilcreagh
所有28条评论
这在这里解释： http :
mathiasbynens
于 2013-05-30
“缺点是这些设备会加载大的高质量图像，而小得多的文件也能正常工作。”
因此，只有当有人点击“添加到主屏幕”时，才会加载稍重的 png（仅大几千字节）……就我而言，这是完全可以接受的，而且比创建 6 个不同大小的图标……如果您在页面上包含 HTML 以加载所有六个图标，效果会更好。
neilcreagh
于 2013-05-30
尼尔，
如果您需要一种简单的方法来创建这些图标，我可以推荐H5BP 多层 FavIcons 存储库吗？ 我知道这是一个无耻的插件，但我今天再次使用它并在 10 分钟内完成了所有 7 个图像，包括多层图标。
希望能帮助到你！
jonrandahl
于 2013-05-30
好，谢谢。 但我仍然不同意为每个单独的设备创建多个特定的图形是正确的方法（不是一种非常“响应式”的方法）。 创建一个图像仍然更快/更容易和更干净，并且当它没有给页面加载增加任何权重时，我没有看到将它传递到旧设备的问题（它仅在添加到主页的“请求”之后加载屏幕），我们只是在谈论这些图像之间的差异中的几个 k。
neilcreagh
于 2013-05-30
如果它仅在添加到主屏幕时才下载，那么我可以理解您的观点。 就个人而言，我也走单图标路线。
necolas
于 2013-05-31
+1 表示单个图标（和 favicon.ico）没有 html 链接方法。
@mathiasbynens感谢您对触摸图标的详尽解释。 不过，当我阅读摘要时，我不得不笑。 不是因为您的建议，而是因为我讨厌专有 BS。 让我总结一下你的总结。
- 为了完全支持安卓，你必须使用苹果专有的 html 标签。
- 如果您只关心 iOS，那么您就不需要使用苹果专有的 html 标签。
- “懒惰”的方法就是做apple.com 所做的事情。
ryanswedal
于 2013-05-31
回顾一下，为什么拥有许多不同的触摸图标是最佳解决方案，主要有两个原因：
- 性能/限制数据计划使用：避免在添加到主屏幕时加载不必要的大图像。
- 艺术指导：根据我的经验，设计师一般不喜欢依赖自动调整大小，而是自己提供适当尺寸的图标。
也就是说，我很懒，我也使用单图标解决方案。 但这并不意味着它应该是首选解决方案恕我直言。
@ryanswedal :D
mathiasbynens
于 2013-05-31
如果页面上包含 HTML 链接，是否有人知道它们是否在页面加载时被调用？ 如果是这样，那么对于单一图标方法来说，这是一个更大的论据……并且不包括 HTML 链接。
neilcreagh
于 2013-05-31
当我研究这个时，IIRC 我的测试证实页面加载时没有请求触摸图标，即使是<link> 。
mathiasbynens
于 2013-05-31
很高兴知道。 谢谢！
neilcreagh
于 2013-05-31
是的，单一图标方法+1。 触摸图标不是自我记录的，因此在根目录中有 6 个而无法记录同步它们的工具是混乱和维护繁重的。
tchalvak
于 2013-05-31
如果根目录中有所有图标，我同意可维护性问题。 我真的没有看到一个好的解决方案，而是添加<link>标签（符号链接并不能真正解决该问题）。
但我认为我们现在不应该用这些标签来膨胀 index.html 的标记。 Mobile Boilerplate 就是这样做的。
无论如何，我很确定很容易找到如何将图标移动到另一个文件夹。 我们甚至在我们的文档中有一个关于这个主题的简短部分。
drublic
于 2013-05-31
我们可以在这里找到解决方案吗？ 我们是要保持原样还是转向单一图标方法？
drublic
于 2013-07-24
好吧，我的投票肯定会支持单一图标方法
2013 年 7 月 24 日星期三，Hans Christian Reinl 写道：
我们可以在这里找到解决方案吗？ 我们是要保持原样还是移到
一个图标方法？—
直接回复本邮件或在Gi tHub上查看
.
尼尔·克里格
从手机发送：087 2174891
neilcreagh
于 2013-07-24
越少，越简单，越好。 如果只有一个就足够了，为什么我们不去呢？
sarukuku
于 2013-07-24
+1 一个！
Volker-E
于 2013-07-29
我也想采用一种简单且响应迅速的方式，但对于图标曾经有一个例外：不同比例的图标可能需要重新设计以使其在该尺寸下清晰可见。
如果您有一个复杂的图标，比如 120x120，并想在 32x32 中使用它，它可能会变得无法识别。 将小图标缩放到更大的图标不是矢量格式的问题，但设计师可能想要添加更多细节。
http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077#module -67936509
从上面的链接向下滚动几页以查看 32x32 和 16x16 的图标......也许它与这个主题不太接近，但我认为这是在谈论各种大小的图标时应该考虑的问题。
shunner
于 2013-07-30
IMO 在大多数情况下，一个图标就足够了。 在文档中提供一个大的 H5BP 图标并附上关于创建较小图标以优化清晰度和文件大小的注释将是一个很好的解决方案。
也就是说，H5BP 是半自以为是，所以无论简单性如何，无论被认为是“正确”的方法，都应该在 repo 中。
robwierzbowski
于 2013-08-03
我提出了一个 Pull Request，它删除了 #1425 中六个 Apple Touch 图标中的五个。
非常感谢反馈。
请把主要讨论保留在这个问题内。
drublic
于 2013-08-30
+1
sarukuku
于 2013-08-30
：+1：
webhat
于 2013-08-30
+1
neilcreagh
于 2013-08-30
如果我承认我一开始不知道为什么有六个并且我很高兴会有一个这样我就不会觉得我很懒惰不知道“为什么”，这可以吗？
roblarsen
于 2013-08-30
达到完美，不是当没有什么可以添加的时候，而是当没有什么可以带走的时候。
— 安东尼·德·圣-埃克苏佩里
：+1：
FagnerMartinsBrack
于 2013-08-30
我没有时间缩短它。
— 布莱斯·帕斯卡
：竖起大拇指：
robwierzbowski
于 2013-08-30
我只用单个图像运行了一段时间。 一个缺点是许多移动浏览器会请求其他文件。 没有必要在 HTML 中使用链接标记来引用它们，但我已经回过头来将所有大小的根目录文件包含在正常和预组合中，只是为了避免我的日志充满这些请求的 404 错误。
douglsmith
于 2013-11-10
mathiasbynens
于 2015-04-16
相关问题
archimj03
·
6评论
gaurav21r
·
21评论
alrra
·
18评论
tomasz1986
·
5评论
roblarsen
·
8评论
最有用的评论
“缺点是这些设备会加载大的高质量图像，而小得多的文件也能正常工作。”
因此，只有当有人点击“添加到主屏幕”时，才会加载稍重的 png（仅大几千字节）……就我而言，这是完全可以接受的，而且比创建 6 个不同大小的图标……如果您在页面上包含 HTML 以加载所有六个图标，效果会更好。