Ios favicon-简单但合理完整的策略

我正在寻找一个favicon策略，该策略（如果可能的话）：

• 在现代浏览器、iOS书签、metro互动程序等中看起来相当不错
• 它相当容易实现
• 最小化html标记

我不在乎：

• 带宽
• 传统浏览器版本、低容量浏览器和设备等的“长尾”
• 完美的图像质量（但我不希望它在现代浏览器/设备环境中看起来明显糟糕或破损）

我正在考虑在我的站点根目录中放置一个favicon.ico，其中包含许多分辨率（例如：）

如上所述，我关心的任何情况都会忽略站点根目录中的favicon.ico吗

---

如果我建议的策略不充分，您能否建议另一种在覆盖率和简单性之间折衷的策略？

我使用的是真正的Favicon生成器：

关于这个问题，我已经研究和阅读了很多，它比你想象的要复杂得多！真正的Favicon生成器在覆盖尽可能多的浏览器和设备方面做得很好。它也有一个测试仪，所以你可以测试你提到的策略会如何

---

它将为您生成所有图像/图标和代码。只需按照说明操作。

既然您标记了

ios

我猜您关心的是，如果将页面添加到主屏幕，图标会是什么样子。因此，考虑添加更多图标和可能的飞溅屏幕：

<!-- Icons and iOS splash -->
<link rel="apple-touch-icon-precomposed" href="client_files/images/app_icon_57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="client_files/images/app_icon_72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="client_files/images/app_icon_114.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="client_files/images/app_icon_144.png">
<link rel="apple-touch-startup-image" href="client_files/images/splash_320x460.png" />
<link rel="apple-touch-startup-image" sizes="640x920" href="client_files/images/splash_640x920.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="client_files/images/splash_768x1004.png" media="(min-device-width: 720px) and (orientation: portrait)" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="client_files/images/splash_1024x748.png" media="(min-device-width: 720px) and (orientation: landscape)" />

一些尺寸已更改，请随意编辑此答案

一些文章：

• （Safari，iOS）
• （Chrome、Android）

---

谢谢。我知道那个网站，我很可能最终会使用它，但如果可能的话，我希望有一个更简单的解决方案。我已经开始使用这个解决方案。它很容易实现，而且在我到目前为止尝试过的任何地方都很好，包括各种桌面浏览器、iOS书签和metro互动程序。成本是17行标记和22个文件。。。叹息。。。我想知道我需要多久重复一次这个过程，以保持最新。如果你完成了这个问题，你应该标记它的答案。我一直在等待，看看是否会有更多的观点出现，但在过去8天内没有任何活动，所以我现在标记它的答案。再次感谢你的回复。如果我没有像上面那样包含标记，iOS设备会使用我的网站根favicon.ico中相同大小的图像，还是会忽略favicon.ico而使用通用默认图像？我不确定，我知道Android会抓取类似的屏幕截图，我想iPhone也会这样做。