移动设备网站图标

22

我正在研究移动站点用户体验,并发现整个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">

当然,对我来说更好的是代码和图像的数量已经显著减少。只要它在大多数现代移动设备上运行就可以让我满意。

通过这个"速查表"的组合,"本教程",以及Philippe B.的帮助,我成功将其变成了这样。

无论如何,感谢所有的帮助,希望在未来的几年里他们会为网站图标制定一个适当的标准!


1
我也认为仅仅为了图标而拥有大量的标签是很疯狂的,所以感谢你的提问。 - NateS
1个回答

34

为了在尽可能多的平台上使用少量的图标,你基本上需要四个图标:

  • 一个PNG图标,用于现代桌面浏览器。
  • 一个苹果触控图标,用于移动浏览器(当然包括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 被命名为这个并放置在网站的根目录中,因为这是苹果公司的惯例。如果您将其放置或命名不同,您可能会在服务器日志中注意到404错误。不必担心,但如果可以避免,则更好。
  • favicon.png 的大小为32x32。不太小也不太大。您可以使它更大,但没有明显的好处。
  • favicon.ico 在您的网站根目录中,因为这是IE的惯例。例如,Yandex搜索引擎期望它在此处。
  • 在这个例子中,我使用了 mstile-144x144.png ,并且没有使用 browserconfig.xml 。我这样做是因为它看起来更简单(这只涉及两行HTML和一张图片;没有额外的XML文件参与)。但这个选择是有争议的。Win 8.0 / IE 10引入的 msapplication-TileImagmsapplication-TileColor 元素已被 Win 8.1 / IE 11中的 browserconfig.xml 替换。因此,browserconfig.xml 是一个长期解决方案。此外,如果您将此文件放在站点的根目录中,则不必在HTML中声明它:IE 11将按惯例(“favicon.ico”样式)找到它。请注意,Opera Coast会为书签选择msapplication-TileImag。现在做出你的选择吧!

最后一条注释:你在问题中引用的大段代码是由RealFaviconGenerator生成的。作为这个工具的作者,你的问题让我很难过。


感谢您对这个问题的详细评论,涉及到的代码确实是由RealFaviconGenerator生成的,并与favicomatic导出的代码结合使用,同时进行了一些常规研究。尽管如此,所产生的代码基本保持不变。话虽如此,您提供的5行代码对我来说可能更有趣,而不是大块的代码。因为这更多是一个确认问题,所以我会去尝试并在必要时报告结果。无论如何,感谢您的帮助和反馈。 - Rafaël De Jongh
在我看来,Android Chrome现在需要manifest.json文件才能在添加桌面快捷方式时找到图标。 - Kout
@Kout 当然没问题。然而,几个月前,当Android Chrome找不到更好的图标时,会选用苹果触摸图标(我不知道这是否仍然正确;至少文档还是这么说的:https://developer.chrome.com/multidevice/android/installtohomescreen#icon)所以,如果你想要一个最轻量级的包,跳过清单可能是一个明智的选择。另外说一句,RealFaviconGenerator已经重构,生成了更少的图标,但保持与以前一样的兼容性。并且它确实会创建清单文件。 - philippe_b
@philippe_b 我使用了你的工具(感谢!),但我的担忧更多是关于应用程序/网站名称:我正在合作的电子商店支持多种语言(目前有13种),这将导致我创建13个清单。最终,我只是从生成的清单中删除了“名称”,并使用上面提到的<meta name="application-name">标签来控制应用程序名称(默认的<title>包含太多的SEO诗歌,仅仅是一个快捷方式(sic!)。 - Kout
@Kout 谢谢!好技巧。我不知道Android Chrome可以使用application-name(至少在这里没有记录https://developer.chrome.com/multidevice/android/installtohomescreen)。此外,当首次支持清单时,Android Chrome需要name字段(也许只适用于某些display模式?记不清了)。但是我再次测试了Android Chome 51,现在即使没有name,也会接受清单。在这种情况下,Chrome将使用application-name或经典的title,就像你说的那样。 - philippe_b

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接