HTML – 更好的存储您的favicon文件的地方?

1)我刚刚使用Real Favicon generator完成了我的第一个favicon文件.在该网站的常见问题解答中,它说最好的做法是将网站保留在网站的根目录中.我做到了,但现在ROOT文件夹有太多文件–26个新文件!
如果我将favicon文件移动到子文件夹,我将失去什么?例如:/favicon/favicon.ico

2)我注意到不同的网站在favicon代码方面使用不同的方法.例如,Bootstrap只有这些代码行:

< link rel = apple-touch-icon href = / apple-touch-icon.png>

<link rel=icon href=/favicon.ico>

其他人有很多像Wordpress.com这样的爱好者:

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="//s1.wp.com/i/favicon.ico" sizes="16x16 32x32">

<link rel="shortcut icon" type="image/x-icon" href="//s1.wp.com/i/favicon.ico" sizes="16x16 32x32">

<link rel="icon" type="image/x-icon" href="//s1.wp.com/i/favicon.ico" sizes="16x16 32x32">

<link rel="icon" type="image/png" href="//s1.wp.com/i/favicons/favicon-64x64.png" sizes="64x64">

<link rel="icon" type="image/png" href="//s1.wp.com/i/favicons/favicon-96x96.png" sizes="96x96">

<link rel="icon" type="image/png" href="//s1.wp.com/i/favicons/android-chrome-192x192.png" sizes="192x192">

<link rel="apple-touch-icon" sizes="57x57" href="//s1.wp.com/i/favicons/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="//s1.wp.com/i/favicons/apple-touch-icon-60x60.png">

<link rel="apple-touch-icon" sizes="72x72" href="//s1.wp.com/i/favicons/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="//s1.wp.com/i/favicons/apple-touch-icon-76x76.png">

<link rel="apple-touch-icon" sizes="114x114" href="//s1.wp.com/i/favicons/apple-touch-icon-114x114.png">

<link rel="apple-touch-icon" sizes="120x120" href="//s1.wp.com/i/favicons/apple-touch-icon-120x120.png">

<link rel="apple-touch-icon" sizes="144x144" href="//s1.wp.com/i/favicons/apple-touch-icon-144x144.png">

<link rel="apple-touch-icon" sizes="152x152" href="//s1.wp.com/i/favicons/apple-touch-icon-152x152.png">

<link rel="apple-touch-icon" sizes="180x180" href="//s1.wp.com/i/favicons/apple-touch-icon-180x180.png"> 

对于一个不希望出现在所有浏览器中的简单网站,我真的应该使用第二个例子的所有文件 – WordPress(由favicon生成器提供),还是我对最小的Bootstrap方法感到满意?

最佳答案
1)通过将图标放在子目录中,您会遇到一些小缺点:

>您需要在HTML中声明favicon.ico和browserconfig.xml.如果图标位于根文件夹中,则可以跳过两行代码,因为这是IE按惯例查看的位置.
> In your logs you will notice 404 with URLs such as /apple-touch-icon-precomposed-120x120.png.
> Yandex搜索引擎在其SERP中显示favicon.显然它只通过查看根文件夹找到它们(它不考虑链接标记). Yandex主要用于俄罗斯.

2)您只能保留一个Apple Touch图标.这够好了.一定要保持apple-touch-icon.png并使其为180×180. Next release of RealFaviconGenerator will generate only one Touch icon by default.

哦,作为RealFaviconGenerator的作者,我祝贺你出色的选择;-)

转载注明原文:HTML – 更好的存储您的favicon文件的地方? - 代码日志