2021年如何投放网站图标：六个文件可满足大多数需求

现在是时候重新考虑我们如何为现代浏览器烹饪一组图标，并制止图标生成器的疯狂了。当前，前端开发人员必须处理20多个静态PNG文件，才能在浏览器选项卡或触摸屏上显示微小的网站徽标。请继续阅读以了解如何采取更智能的方法并采用最适合大多数现代需求的最小图标集。

图标被证明是任何人都希望得到的更详尽的话题，因此我还为遭受苦难并确切知道该怎么做的人总结了一篇仅用两个代码片段撰写的全文。尽管如此，我还是建议您放心使用它！

您只需要五个图标和一个JSON文件，而不是提供数十个图标即可。

＆lt; link rel =＆＃34; icon＆＃34; href =＆＃34; /favicon.ico" /＆gt; ＆lt;！-32×32-＆gt; ＆lt; link rel =＆＃34; icon＆＃34; href =＆＃34; /icon.svg"类型=＆＃34;图片/ svg + xml＆＃34; size =＆＃34;任何＆＃34; /＆gt; ＆lt; link rel =＆＃34; apple-touch-icon＆＃34; href =＆＃34; /apple.png" /＆gt; ＆lt;！-180×180-＆gt; ＆lt; link rel =＆＃34;清单＆＃34; href =＆＃34; /manifest.webmanifest" /＆gt;

// manifest.webmanifest {＆＃34; icons＆＃34; ：[{＆＃34; src＆＃34; ：＆＃34; /192.png" ，＆＃34;类型＆＃34; ：＆＃34; image / png＆＃34; ，＆size;＆＃34; ：＆＃34; 192x192＆＃34; }，{＆＃34; src＆＃34; ：＆＃34; /512.png" ，＆＃34;类型＆＃34; ：＆＃34; image / png＆＃34; ，＆size;＆＃34; ：＆＃34; 512x512＆＃34; }]}

这就对了。如果您想知道我是如何得出的，我必须采取的折衷办法，以及如何以循序渐进的方式从头开始构建这样的集合，请继续阅读本文的其余部分。

“达到完美，不是没有什么可添加的，而是没有剩余可带走的。”

自2000年代以来，“收藏夹图标”的概念就一直存在。我们所有人都在浏览器的标签栏中看到这些可爱的小图片，这些图片每天都有助于区分打开的网站。用户希望您的网站具有网站图标。这是使别人认真对待你的那些小事情之一。

即使是苹果公司，多年来一直都带有一些非美学的牛肉，其图标并非来自Cupertino，并且多年来在Safari中淡化了收藏夹图标，但终于放弃了，现在可以在所有设备上正确显示它们了。

如果您拥有面向公众的网站，则必须拥有一个网站图标。可悲的是，用户认为一个图标实际上是很多图标。

因此，将越来越多的屏幕和设备列表生成必要文件的繁琐任务分担给网站图标生成器工具是很常见的。他们的右脑中没有人愿意花费数小时手工创建它们。毕竟，我们在这里建立网站并不是让浏览器供应商满意。

作为NanoID的创造者和极简主义开源的拥护者，我倾向于朝着略有不同的方向思考。什么是最有效的网站图标集？哪些格式已经过时？可以以较小的折衷替换哪些图标类型？

因此，我着手创建一个图标图标的最小列表，这些图标将在所有情况下以及在所有浏览器中都可以使用，除非某些情况仍然可以使用，否则并不是100％完美。

我决定不创建许多不同大小的图像，而是决定依靠SVG和浏览器缩小比例。如果您担心性能，我在这里为您记录一下：

浏览器会在后台下载网站图标，因此较大的网站图标图像不会影响网站性能;

SVG是一种减少图像大小的好方法，这些图像最初不应该是位图;对于许多徽标，结果文件将比PNG小得多;

在此最小设置中只有三个PNG图像，您可以使用高级工具来优化其大小。它为没有无限数据计划的互联网用户解决了一个问题。

这是我在研究和实践中提出的最小图标集。它应该可以与所有旧的和新的流行浏览器和设备一起使用。

ICO文件实际上具有目录结构，并且可以打包具有不同分辨率的文件。我建议您坚持使用一张32×32的图像，除非您的图像不能很好地缩小到16×16（例如变得模糊）。在这种情况下，您可以要求您的设计师提出一个特殊版本的徽标，该徽标旨在适合小像素网格。

文件夹静态资产的文件夹结构和缓存无效化者不要太聪明。 https://example.com网站应在https://example.com/favicon.ico上具有一个图标。诸如RSS阅读器之类的某些工具只是向服务器请求/favicon.ico，而不必费心寻找其他地方。

SVG是一种矢量格式，用于描述曲线而不是像素。在大尺寸时，它比光栅图像更有效。截至撰写本文时，所有浏览器中有72％支持SVG图标。

您的HTML页面应具有＆lt; link＆gt;在＆lt; head＆gt;中标记使用rel =＆＃34; icon＆＃34 ;，键入=＆＃34; image / svg + xml＆＃34;和href，并带有指向SVG文件的链接作为属性。

SVG是XML格式，可以包含＆lt; style＆gt;描述CSS的标签。与任何CSS一样，它可以包含诸如@media之类的媒体查询（prefers-color-scheme：dark）。这将允许您在浅色和深色系统主题之间切换相同的图标。

如果您将网页作为快捷方式添加到iPhone或iPad上的主屏幕，则Apple touch图标是Apple设备将使用的图像。您的HTML页面应具有＆lt; link rel =＆＃34; apple-touch-icon＆＃34; href =＆＃34; icon.png＆＃34;＆gt; ＆lt; head＆gt;中的标签。

自iOS 8+起的iPad需要180×180的分辨率。其他设备将缩小图像，但是如果我们为源提供足够好的质量，则缩小将不会损害最终用户（我稍后会再讲）。

小提示：如果您在图标周围添加20px的填充并加上一些背景颜色，则Apple touch图标的外观会更好。您可以为此使用任何图像编辑器。

Web应用程序清单是一个JSON文件，其中包含用于浏览器的所有详细信息，以将您的网站作为系统应用程序安装。格式来自Google的PWA计划。

您的HTML页面应具有＆lt; link rel =＆＃34; manifest＆＃34; href =＆＃34; path.webmanifest＆＃34;＆gt;带有清单文件链接的标签。

清单应具有一个图标字段，该字段链接到两个图标：在主屏幕上显示的192×192和在PWA加载时将用作初始屏幕的512×512。

{＆＃34; icons＆＃34; ：[{＆＃34; src＆＃34; ：＆＃34; /192.png" ，＆＃34;类型＆＃34; ：＆＃34; image / png＆＃34; ，＆size;＆＃34; ：＆＃34; 192x192＆＃34; }，{＆＃34; src＆＃34; ：＆＃34; /512.png" ，＆＃34;类型＆＃34; ：＆＃34; image / png＆＃34; ，＆size;＆＃34; ：＆＃34; 512x512＆＃34; }]}

当然，那里有更多的图标图标风格，其中有些比较晦涩，因此让我们看看我们的设置如何搭配它们。也许是时候告别一些不太成功的格式了。

Microsoft Edge过去一直支持特殊图标格式以将网站固定到``开始''菜单。对于Windows的最新版本，不再需要此功能。

Safari曾经有一个单独的要求，即在固定选项卡中显示图标。但是，从Safari 12开始，我们可以将固定标签用作常规图标。即使apple.com也不再使用mask图标。

请注意，快捷方式不是，并且永远不是有效的链接关系。阅读十年前Mathias Bynens撰写的这篇精彩文章，它解释了为什么我们永远不需要快捷方式和rel =＆＃34; icon＆＃34;很好

Yandex Browser是来自最大的俄罗斯搜索引擎的基于铬的浏览器。在俄罗斯，它拥有20％的市场份额。它具有一项很好的功能，允许网站通过yandex-tableau-widget链接提供的特殊JSON清单在主屏幕上的小部件中显示实时数据。但是，该功能并不是很受欢迎，现在Yandex已从其网站上删除了其技术文档。常规图标清单也将正常工作。

Opera Coast是iOS的实验性浏览器，以前需要特殊的228×228图标。浏览器于2017年离开App Store，我怀疑自那时以来它在多个iOS更新中还没有幸免。

现在，当我们告别堕落的同志时，让我们看看如何为仍然站立的人制作一套最终的收藏夹图标。

以下是通过六个快速步骤构建最终极简图标集的方法。您只需要启动要使用的徽标的SVG文件即可。

确保SVG图像是正方形的。在系统查看器中打开源文件，然后检查图像的宽度和高度。在任何SVG编辑器中调整SVG大小都很容易。在Inkscape中，您可以在``文件''→``文档属性''中更改文档大小，并使用``对象''→``对齐并分配''将徽标居中。

将文件另存为icon.svg。现在，我们来摆弄我们的SVG，以便它与现代系统主题完美结合。询问您的设计师应如何将颜色转换为深色主题（对于B＆amp; W徽标，您只需将黑色更改为白色）即可。

现在，在文本编辑器中打开SVG文件。找到一个＆lt; path＆gt;黑暗或缺少填充物。添加一个CSS媒体查询，以触发主题更改并将更改填充为所需的颜色：

＆lt; svg xmlns =＆＃34; http：//www.w3.org/2000/svg" viewBox =＆＃34; 0 500 500＆＃34; +＆lt; style＆gt; + @media（prefers-color-scheme：黑暗）{+ .a {填充：＃f0f0f0} +} +＆lt; / style＆gt; -＆lt; path fill =＆＃34;＃0f0f0f＆＃34; d =＆＃34;…＆＃34; /＆gt; +＆lt; path class =＆＃34; a＆＃34; fill =＆＃34;＃0f0f0f＆＃34; d =＆＃34;…＆＃34; /＆gt; ＆lt; / svg＆gt;

在栅格图形编辑器中打开icon.svg文件。我推荐GIMP；它是免费的且跨平台的。

接受将SVG渲染到栅格。将宽度和高度设置为32像素。使用32 bpp，8位alpha，无调色板设置将文件导出到favicon.ico。

将图像缩小到16×16并检查图标可见性。如果变得太模糊，最好向您的设计师询问徽标的自定义小版本。

导出文件。 GIMP会将每个布局另存为一个单独的图标版本。

再次在光栅图形编辑器中打开源SVG文件，并创建512×512图像。将其导出为icon-512.png。将图像缩放为192×192并将其导出到icon-192.png。现在将图像本身缩放为140×140，并将画布设置为180×180，并导出为apple-touch-icon.png。

通过移动滑块比较之前/之后。如果看到差异，请增加颜色数量。

但是，我们建议使用捆绑器来生成缓存破坏器（将文件的哈希包含在名称中作为指纹）。如果您将Webpack与[html-webpack-plugin]结合使用：

使用链接定义HTML模板（示例使用ERB来包含文件，但可以是您选择的模板语言）：

＆lt;！DOCTYPE html＆gt; ＆lt; html lang =＆＃34; en＆＃34; ＆gt; ＆lt; head＆gt; ＆lt; meta charset =＆＃34; utf-8＆＃34; /＆gt; ＆lt; title＆gt;我的网站＆lt; / title＆gt; ＆lt;元名称=＆＃34;视口＆＃34; content =＆＃34; width = device-width，initial-scale = 1＆＃34; /＆gt; ＆lt; link rel =＆＃34; icon＆＃34; href =＆＃34; /favicon.ico" /＆gt; ＆lt; link rel =＆＃34; icon＆＃34;类型=＆＃34;图片/ svg + xml＆＃34; size =＆＃34;任何＆＃34; href =＆＃34;＆lt;％= require（＆＃39; ./ icon.svg＆＃39;）。default％＆gt;＆＃34; /＆gt; ＆lt; link rel =＆＃34; apple-touch-icon＆＃34; href =＆＃34;＆lt;％= require（＆＃39; ./ apple-touch-icon.png＆＃39;）。default％＆gt;＆＃34; /＆gt; ＆lt; / head＆gt; ＆lt; body＆gt;＆lt; / body＆gt; ＆lt; / html＆gt;

Favicon是区分生产环境和暂存环境的一种好方法。我发现使用替代图标在避免昂贵的混乱方面超级有效。

创建一个带有相同徽标的favicon-dev.ico，但是将颜色反转（或者做一些对您有意义的事情）。与SVG相同，创建icon-dev.svg。

＆lt;！doctype html＆gt; ＆lt; html lang =＆＃34; en＆＃34;＆gt; ＆lt; head＆gt; ＆lt;元字符集=＆＃34; utf-8＆＃34;＆gt; ＆lt; title＆gt;我的网站＆lt; / title＆gt; ＆lt;元名称=＆＃34;视口＆＃34; content =＆＃34; width = device-width，initial-scale = 1＆＃34;＆gt; -＆lt; link rel =＆＃34; icon＆＃34; href =＆＃34; /favicon.ico"＆gt; +＆lt; link rel =＆＃34; icon＆＃34; href =＆＃34;＆lt;％= + process.env.NODE_ENV ===＆＃39; production＆＃39; +吗？ ＆＃39; /favicon.ico' +：require（＆＃39; ./ favicon-dev.ico＆＃39;）。default +％＆gt;＆＃34;＆gt; ＆lt; link rel =＆＃34; icon＆＃34;类型=＆＃34;图片/ svg + xml＆＃34; size =＆＃34;任何＆＃34; href =＆＃34;＆lt;％=-require（＆＃39; ./ icon.svg＆＃39;）。default + process.env.NODE_ENV ===＆＃39; production＆＃39; +吗？ require（＆＃39; ./ icon.svg＆＃39;）。default +：require（＆＃39; ./ icon-dev.svg＆＃39;）。default％＆gt;＆＃34;＆gt; ＆lt; link rel =＆＃34; apple-touch-icon＆＃34; href =＆＃34;＆lt;％= require（＆＃39; ./ apple-touch-icon.png＆＃39;）。default％＆gt;＆＃34;＆gt; ＆lt; / head＆gt; ＆lt; body＆gt;＆lt; / body＆gt; ＆lt; / html＆gt;

{＆＃34; name＆＃34; ：＆＃34;我的网站＆＃34; ，＆＃34;图标＆＃34; ：[{＆＃34; src＆＃34; ：＆＃34; /icon-192.png" ，＆＃34;类型＆＃34; ：＆＃34; image / png＆＃34; ，＆size;＆＃34; ：＆＃34; 192x192＆＃34; }，{＆＃34; src＆＃34; ：＆＃34; /icon-512.png" ，＆＃34;类型＆＃34; ：＆＃34; image / png＆＃34; ，＆size;＆＃34; ：＆＃34; 512x512＆＃34; }]}

＆lt; title＆gt;我的网站＆lt; / title＆gt; +＆lt; link rel =＆＃34;清单＆＃34; href =＆＃34; /manifest.webmanifest"＆gt; ＆lt; link rel =＆＃34; icon＆＃34; href =＆＃34; /favicon.ico"＆gt; ＆lt; link rel =＆＃34; icon＆＃34; href =＆＃34; /icon.svg"类型=＆＃34;图片/ svg + xml＆＃34; size =＆＃34;任何＆＃34;＆gt; ＆lt; link rel =＆＃34; apple-touch-icon＆＃34; href =＆＃34 // apple-touch-icon.png＆＃34;＆gt;

插件：[…，新的WebpackPwaManifest（{名称：＆＃39;我的网站＆＃39;，图标：[{src：解析（＆＃39; ./icon-192.png＆＃39;），大小：＆ ＃39; 192x192＆＃39;}，{src：解析（＆＃39; ./icon512.png＆＃39;），尺寸：＆＃39; 512x512}]}）}）]] 感谢您的阅读！ 如您所见，使用现代Web标准，创建最终收藏夹图标集的任务变得非常简单。 即使手动执行这些步骤不会花费您太多时间，但拥有一个自动化工具来执行相同的操作将更加令人惊奇！ 如果您愿意建立一个，请随时在Twitter上与我联系； 我非常乐意提供帮助！