Question

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

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

我不在乎：

带宽
＆＃34;长尾＆＃34;旧版浏览器版本，低容量浏览器和设备等。
完美的图像质量（但我不希望它在现代浏览器/设备环境中看起来很糟糕或坏掉）

我想在我的网站根目录中添加一个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）

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

2 个答案: