html - 更好的地方来存储您的网站图标文件？

Question

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

2) 我注意到不同的网站在网站图标代码方面使用不同的方法。
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(并且由网站图标生成器提供)，或者我会满足于最小引导方法？

Answer 1

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 中显示网站图标。显然它只能通过查看根文件夹找到它们(它不考虑 link 标记)。 Yandex 主要在俄罗斯使用。

2) 您只能保留一个 Apple Touch 图标。这已经足够好了。确保保留 apple-touch-icon.png 并将其设为 180x180。 Next release of RealFaviconGenerator will generate only one Touch icon by default .

哦，作为 RealFaviconGenerator 的作者，我祝贺您的绝佳选择；-)