favicon - 简单但相当完整的策略

Question

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

• 在现代浏览器，iOS书签，地铁瓷砖等方面看起来相当不错
• 相当容易实施
• 最小化html标记

我不在乎：

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

我想在我的网站根目录中放一个favicon.ico，包含许多分辨率（例如：https://stackoverflow.com/a/23375619/3657991）。

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

如果我建议的策略不足，你能否提出另一种策略，即在覆盖范围和简单性之间做出妥协？

Answer 1

我使用Real Favicon Generator：http://realfavicongenerator.net/

我在这个问题上学习和阅读了很多，而且比你想象的要复杂得多！ Real Favicon Generator在覆盖尽可能多的浏览器和设备方面做得非常出色。它还有一个测试人员，因此您可以测试您提到的策略将如何做。

它将为您生成所有图像/图标和代码。按照指示。

Answer 2

由于你标记了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)" />

某些尺寸已更改，因此请随时编辑此答案。

一些文章：

• https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html（Safari，iOS）
• https://developer.chrome.com/multidevice/android/installtohomescreen（Chrome，Android）