我正在研究移动站点用户体验,并发现整个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.的帮助,我成功将其变成了这样。
无论如何,感谢所有的帮助,希望在未来的几年里他们会为网站图标制定一个适当的标准!