移动网站图标

Posted 2023-02-18

【中文标题】移动网站图标

【英文标题】：Mobile Favicons

【发布时间】：2015-08-29 17:11:47

【问题描述】：

所以我正在做一些关于移动网站用户体验的研究，并偶然发现整个 favicon.ico 已经完全过时了。

环顾四周，我发现我需要各种新的图像/图标集才能在各种移动设备（如 android、iphone 和 windows 手机）上正确呈现“favicon”。

现在的问题是，我有以下代码：

<link rel="apple-touch-icon" sizes="57x57" href="images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/favicons/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="images/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="images/favicons/manifest.json">
<meta name="apple-mobile-web-app-title" content="JoJo Productions">
<meta name="application-name" content="JoJo Productions">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="msapplication-TileImage" content="images/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
<meta name="theme-color" content="#555555">
<link rel="shortcut icon" href="favicon.ico">

但对我来说，这只是一个太大的代码块，无法正确显示网站图标。所以我想知道我可以删除哪些内容，以及我绝对应该保留哪些内容才能在“大多数”移动设备上正确呈现。

大多数使用的其他网站只使用上述代码中的一小部分，即：57x57、72x72、114x114 和 144x144，这些都是 apple-touch-icons。那么图像/代码部分对 iPhone 或其他移动用户来说真的那么重要吗？还是可以优化一下？

无论如何感谢您的信息。

---

编辑

所以通过一些进一步的研究，我得到了这个结果，它似乎在大多数现代设备上都可以正常工作：

<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
<meta name="msapplication-TileImage" content="images/favicons/mstile-large.png">
<meta name="msapplication-TileColor" content="#ae8160">
<meta name="application-name" content="JoJo Productions">
<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

这对我来说当然更好，因为代码/图像的数量已显着减少。只要它能在大多数现代移动设备上运行，我就很高兴。

结合"cheat sheet"、this tutorial 和 Philippe B 的帮助。我设法做到了。

无论如何感谢所有帮助，希望在未来几年他们能为网站图标制定适当的标准！

【问题讨论】：

我也认为有一大堆标签只是为了图标很疯狂，所以谢谢你的问题。

【参考方案1】：

要在没有大量图标的情况下处理尽可能多的平台，您基本上需要四个图标：

PNG 图标，适用于现代桌面浏览器。 适用于移动浏览器的 Apple Touch 图标（当然是 ios Safari，还有 Android Chrome 和许多其他浏览器；还有 Mac OS Yosemite Safari）。 favicon.ico，适用于旧版浏览器（想想 IE 9、8、...）。 Windows 8 和 10 上 IE 的磁贴图标。

这给了我们：

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-TileColor" content="#00aba9">

关于这段代码的几点说明：

apple-touch-icon.png 是 180x180，这是 iOS（iPhone 6+ 和 Retina iPad 上的 iOS 8）支持的最高分辨率。较小的平台会缩小图标。 apple-touch-icon.png 以这种方式命名并放置在网站的根目录中，因为这是一个convention from Apple。如果您放置或命名不同，您可能会在服务器日志中注意到 404 错误。没什么好担心的，但如果你能避免它们...... favicon.png 是 32x32。不能太小也不能太大。您可能会扩大规模，但不会带来显着的好处。 favicon.ico 位于您网站的根目录中，因为这是 IE 的约定。例如，Yandex 搜索引擎在此处期望它。 在这个例子中，我使用了mstile-144x144.png，没有使用browserconfig.xml。我这样做是因为它看起来更容易（这只是两行 html 和一张图片；不涉及额外的 XML 文件）。但这个选择是有争议的。 Win 8.0 / IE 10 引入的msapplication-TileImag 和msapplication-TileColor 元数据已被browserconfig.xml in Win 8.1 / IE 11 取代。所以browserconfig.xml 是一个长期的解决方案。另外，如果您将此文件放在站点的根目录中，则不必在 HTML 中声明它：IE 11 会按照约定（“favicon.ico”样式）找到它。请注意Coast by Opera picks msapplication-TileImag for bookmarks。现在就做出选择吧！

最后一点：您在问题中引用的大代码块是由RealFaviconGenerator 生成的。作为这个工具的作者，你的问题让我很伤心;-)

【讨论】：

感谢您对这个问题的扩展评论，有问题的代码确实是使用 RealFaviconGenerator 生成的，并结合了 favicomatic 导出并进行了一些一般性研究。生成的代码几乎保持不变。也就是说，你提供的 5 行代码对我来说可能比一大段代码更有趣，所以这更像是一个确认问题，我会去尝试一下，如有必要再报告。无论哪种方式，感谢您的帮助和反馈。

在我看来，Android Chrome 现在需要manifest.json 才能在添加桌面快捷方式时找到图标。

@Kout 绝对。然而，几个月前，当 Android Chrome 找不到更好的东西时，它会选择 Apple Touch 图标（我不知道这是否仍然正确；至少文档仍然这样说：developer.chrome.com/multidevice/android/…）。因此，如果您想要最轻的包，跳过清单可能是一个明智的选择。顺便说一句，RealFaviconGenerator 被重构以生成更少的图标，同时保持与以前一样多的平台的兼容性。它确实会创建清单。

@philippe_b 我​​使用了你的工具（谢谢！），但我更关心的是应用程序/网站名称：我正在合作的电子商店支持多种语言（目前有 13 种语言） ，这将导致我创建 13 个清单。最后我只是从生成的清单中删除了name ，并使用上面提到的<meta name="application-name">标签来控制应用程序名称（默认的<title>包含太多的SEO诗歌，只是一个快捷方式（原文如此！）。跨度>

@Kout 谢谢！好把戏。我不知道 Android Chrome 可以使用 application-name（至少在 developer.chrome.com/multidevice/android/installtohomescreen 此处没有记录）。另外，当清单第一次被支持时，Android Chrome 需要name 字段（可能只适用于某些display 模式？不记得了）。但是我用 Android Chome 51 再次测试了这个，现在即使清单没有name，它也被接受了。在这种情况下，Chrome 使用的是application-name 或经典的title，就像你说的那样。