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

时间:2014-05-21 20:18:06

标签: ios microsoft-metro favicon

我正在寻找一个(如果可能的话)的小图标策略:

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

我不在乎:

  • 带宽
  • "长尾"旧版浏览器版本,低容量浏览器和设备等。
  • 完美的图像质量(但我不希望它在现代浏览器/设备环境中看起来很糟糕或坏掉)

我想在我的网站根目录中添加一个favicon.ico,其中包含许多分辨率(例如:https://stackoverflow.com/a/23375619/3657991)。

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

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

2 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分:0)

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

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

一些文章: