How to Favicon in 2024: Six files that fit most needs
2024 年如何使用 Favicon：满足大多数需求的六个文件

The topic of favicons has proven to be more exhaustive than anyone could’ve ever wished, so I’ve also summarized the entire article in just two code snippets for those who’ve already suffered enough and who know exactly what to do. Still, I recommend geeking out to the rest of it!
事实证明，网站图标主题比任何人所希望的都要详尽，因此我还用两个代码片段总结了整篇文章，供那些已经受够了痛苦并且确切知道该怎么做的人使用。不过，我还是建议你去看看剩下的部分！

The extremely short version
极短版本

Instead of serving dozens of icons, all you need is just five icons and one JSON file.
您不需要提供数十个图标，而只需要五个图标和一个 JSON 文件。

For the browser using HTML:
对于使用 HTML 的浏览器：

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

And in your web app manifest:
在您的网络应用程序清单中：

// manifest.webmanifest
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

That’s it. If you want to know how I got here, the compromises I had to make, and how to build a set like this from scratch in a step-by-step fashion, stay tuned in for the rest of the article.
就是这样。如果您想知道我是如何走到这一步的，我必须做出的妥协，以及如何从头开始一步步构建这样的一套，请继续关注本文的其余部分。

The long version, where everything is explained
长版本，所有内容都有解释

The concept of a favicon, which is short for “favorite icon”, have been around since the early 2000s. We’ve all seen those cute little images in our browser’s tab bar which help us differentiate our open websites. Users expect your website to have a favicon. It’s one of those little things that make other people take you seriously.
favicon 的概念是“favorite icon”的缩写，自 2000 年代初就已存在。我们都在浏览器的标签栏中看到过那些可爱的小图像，它们帮助我们区分我们的开放网站。用户希望您的网站有一个网站图标。这是让其他人认真对待你的小事之一。

Even Apple, which has always had some kind of aesthetic beef with icons that don’t come from Cupertino, downplaying favicons in Safari for years, has finally given up and now properly displays them across all of its devices.
即使是苹果公司，多年来一直对非库比蒂诺的图标有一定的审美缺陷，在 Safari 中淡化图标，现在终于放弃了，现在可以在所有设备上正确显示它们。

If you have a public-facing website, it has to have a favicon. Sadly, what users perceive as one icon is actually a lot of them.
如果您有一个面向公众的网站，它必须有一个网站图标。可悲的是，用户认为是一个图标的实际上是很多图标。

So, it’s common to offload the grueling task of generating these necessary files for an ever-growing list of screens and devices to favicon generator tools. No one in their right mind would ever want to spend hours creating them by hand. We’re here to build websites, after all, not to make browser vendors happy.
因此，通常会将为不断增长的屏幕和设备列表生成这些必要文件的繁重任务转移到网站图标生成器工具上。任何头脑正常的人都不会愿意花几个小时手工制作它们。毕竟，我们来这里是为了构建网站，而不是为了让浏览器供应商满意。

As a creator of NanoID and a proponent of minimalistic open source, I tend to think in a slightly different direction. What is the most efficient set of website icons? Which formats are outdated? Which icon types can be replaced with small compromises?
作为 NanoID 的创建者和简约开源的支持者，我倾向于以稍微不同的方向思考。最有效的网站图标集是什么？哪些格式已经过时？哪些图标类型可以通过小的妥协来替换？

Thus, I set out to create a minimal list of favicons that will work in all cases and in all browsers—barring some edge cases—and even then, this will still work, just not 100% perfectly.
因此，我着手创建一个最小的网站图标列表，该列表将在所有情况和所有浏览器中工作（除了某些边缘情况），即使如此，这仍然可以工作，只是不是 100% 完美。

The Ultimate Favicon Setup
终极网站图标设置

Instead of creating many images with different sizes, I decided to rely on SVG and browser downscaling. If you’re concerned about performance, I’m here to set the record straight:
我决定依靠 SVG 和浏览器缩小尺寸，而不是创建许多不同尺寸的图像。如果您担心性能，我在这里澄清一下：

• Browsers download favicons in the background, so a bigger favicon image does not affect website performance.
  浏览器在后台下载网站图标，因此较大的网站图标图像不会影响网站性能。
• SVG is a great way to reduce image size for images that aren’t supposed to be bitmaps in the first place; for many logos the resulting file will be much smaller than a PNG.
  对于原本不应该是位图的图像，SVG 是减小图像大小的好方法；对于许多徽标，生成的文件将比 PNG 小得多。
• With just three PNG images in this minimum set, you can use advanced tools to optimize their size. This solves a problem for Internet users that don’t have unlimited data plans.
  在这个最小集合中只有三个 PNG 图像，您可以使用高级工具来优化其大小。这解决了没有无限数据计划的互联网用户的问题。

Now I’ll reveal the minimal set of icons that I came up with during my research and practice. This list should work with all popular browsers and devices, both old and new.
现在我将展示我在研究和实践中想到的最小图标集。此列表应适用于所有流行的新旧浏览器和设备。

I. favicon.ico for legacy browsers
I. 用于旧版浏览器的 favicon.ico

ICO files actually have a directory structure and can pack files with different resolutions. I recommend sticking to a single 32×32 image, unless the one you have doesn’t downscale well to 16×16 (if it becomes blurry, for instance). In that case, you can ask your designer to come up with a special version of the logo that’s tailored to fit small pixel grids.
ICO文件实际上有一个目录结构，可以打包不同分辨率的文件。我建议坚持使用单个 32×32 图像，除非您拥有的图像不能很好地缩小到 16×16（例如，如果它变得模糊）。在这种情况下，您可以要求设计师设计一个特殊版本的徽标，专为适合小像素网格而定制。

Don’t get smart with the folder static asset folder structure and cache busters. https://example.com website should have a favicon on https://example.com/favicon.ico. Some tools, like RSS readers, just request /favicon.ico from the server and don’t bother looking elsewhere.
不要对文件夹静态资源文件夹结构和缓存破坏器变得聪明。 https://example.com 网站应该在 https://example.com/favicon.ico 上有一个图标。有些工具，比如 RSS 阅读器，只是从服务器请求 /favicon.ico ，而不去寻找其他地方。

We need sizes="32x32" for <link> to .ico file in order to fix the Chrome bug where it chooses an ICO file over an SVG.
我们需要 sizes="32x32" 来表示 <link> 到 .ico 文件，以修复Chrome选择ICO文件而不是SVG的错误。

II. A single SVG icon with a light/dark version for modern browsers
二.适用于现代浏览器的具有浅色/深色版本的单个 SVG 图标

SVG is a vector format that describes curves instead of pixels. At large sizes, it’s more efficient than raster images. As of this writing, 72% of all browsers support SVG icons.
SVG 是一种描述曲线而不是像素的矢量格式。在大尺寸下，它比光栅图像更有效。截至撰写本文时，72% 的浏览器支持 SVG 图标。

Your HTML page should have a <link> tag in its <head> with rel="icon", type="image/svg+xml" and with the href containing a link to the SVG file as attributes.
您的 HTML 页面的 <head> 中应该有一个 <link> 标记，其中包含 rel="icon" 、 type="image/svg+xml" 和 href ，其中包含指向 SVG 文件的链接作为属性。

SVG is an XML format and can contain a <style> tag to describes CSS. As with any CSS, it can contain media queries like @media (prefers-color-scheme: dark). This will allow you to toggle the same icon between light and dark system themes.
SVG 是一种 XML 格式，可以包含 <style> 标签来描述 CSS。与任何 CSS 一样，它可以包含媒体查询，例如 @media (prefers-color-scheme: dark) 。这将允许您在浅色和深色系统主题之间切换相同的图标。

III. 180×180 PNG image for Apple devices
三．适用于 Apple 设备的 180×180 PNG 图像

The Apple touch icon is an image that Apple devices will use if you add the webpage as a shortcut to your home screen on an iPhone or iPad. Your HTML page should have <link rel="apple-touch-icon" href="apple-touch-icon.png"> tag inside <head>.
如果您将网页添加为 iPhone 或 iPad 上主屏幕的快捷方式，则 Apple 触摸图标是 Apple 设备将使用的图像。您的 HTML 页面应该在 <head> 内有 <link rel="apple-touch-icon" href="apple-touch-icon.png"> 标记。

Since iOS 8+, iPads have required an image with a 180×180 resolution. Other devices will downscale it, but if we provide the source with a high-enough quality, the downscaling won’t hurt the end-user (I’ll come back to this later).
从 iOS 8+ 开始，iPad 需要 180×180 分辨率的图像。其他设备会缩小它的规模，但如果我们提供足够高质量的源，缩小规模不会伤害最终用户（我稍后会再讨论这一点）。

Small note: an Apple touch icon will look better if you place 20px padding around the icon and add some background color. You can use any image editor to do this.
小提示：如果您在图标周围放置 20px 填充并添加一些背景颜色，Apple 触摸图标会看起来更好。您可以使用任何图像编辑器来执行此操作。

IV. Web app manifest with 192×192 and 512×512 PNG icons for Android devices
四．适用于 Android 设备的 Web 应用程序清单，包含 192×192 和 512×512 PNG 图标

• A web app manifest is a JSON file containing all the details for a browser to install your website as a system application. This format came about from Google via its PWA initiative.
  Web 应用程序清单是一个 JSON 文件，其中包含浏览器将您的网站安装为系统应用程序的所有详细信息。这种格式来自 Google 通过其 PWA 计划。
• Your HTML page should have a <link rel="manifest" href="path.webmanifest"> tag with a link to the manifest file.
  您的 HTML 页面应该有一个 <link rel="manifest" href="path.webmanifest"> 标记，其中包含指向清单文件的链接。
• The manifest should have an icon field that links to two icons: 192×192, for display on the home screen, and 512×512 which will be used as a splash screen as PWA is loading.
  清单应该有一个 icon 字段，链接到两个图标：192×192，用于在主屏幕上显示，512×512，将在 PWA 加载时用作启动屏幕。

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Did we forget anyone?
我们忘记了什么人吗？

There are, of course, more favicon flavors out there, some of them quite obscure, so let’s see how our setup fares with them. Maybe, it’s time to say farewell to some of the less successful formats out there.
当然，还有更多的图标风格，其中一些非常晦涩难懂，所以让我们看看我们的设置与它们的配合如何。也许，是时候告别一些不太成功的格式了。

Windows Tile Icon Windows 平铺图标

Microsoft Edge used to support a special icon format to pin websites to the start menu. For recent versions of Windows, this is no longer required.
Microsoft Edge 过去支持一种特殊的图标格式，将网站固定到开始菜单。对于最新版本的 Windows，不再需要这样做。

Safari Pinned Icon Safari 固定图标

Safari formerly had a requirement of SVG monochrome icon for pinned tabs. However, since Safari 12, we can use a regular favicon for pinned tabs. Even apple.com doesn’t use the mask-icon anymore.
Safari 以前要求固定选项卡使用 SVG 单色图标。然而，从 Safari 12 开始，我们可以使用常规的图标来固定标签。甚至 apple.com 也不再使用 mask-icon 。

rel=“shortcut” rel=“快捷方式”

A lot of (now outdated) tutorials will include a favicon.ico into HTML like this:
许多（现在已经过时）教程将在 HTML 中包含 favicon.ico ，如下所示：

<link rel="shortcut icon" href="/favicon.ico" sizes="32x32">

Be warned that shortcut is not, and never has been, a valid link relation. Read this amazing article by Mathias Bynens from ten years ago that explains why we never needed shortcuts and why rel="icon" is just fine.
请注意， shortcut 现在不是、也从来不是有效的链接关系。阅读十年前 Mathias Bynens 撰写的这篇精彩文章，它解释了为什么我们从不需要快捷方式以及为什么 rel="icon" 就可以了。

Opera Coast 歌剧院海岸

In the past, Opera Coast, an experimental browser for iOS, required a special 228×228 icon. This browser left the App Store in 2017, and I doubt it survived the multiple iOS updates since that time.
过去，Opera Coast（iOS 的实验性浏览器）需要特殊的 228×228 图标。这款浏览器于 2017 年离开了 App Store，我怀疑它是否能在从那时起的多次 iOS 更新中幸存下来。

Now, as we wave good-bye to our fallen comrades, let’s see how to produce an ultimate favicon set for those who are still standing.
现在，当我们向倒下的战友挥手告别时，让我们看看如何为那些仍然站着的人制作一套终极图标集。

How to build our Ultimate Favicon Set
如何构建我们的终极网站图标集

Here’s how to build our ultimate, minimalistic favicon set in six quick steps. All you need to start is an SVG file for the logo that you want to use.
以下是如何通过六个快速步骤构建我们终极、简约的图标集。您所需要做的就是为您要使用的徽标创建一个 SVG 文件。

Step 1: Prepare the SVG
第 1 步：准备 SVG

Be sure that the SVG image is square. Open the source file in your system viewer and check the image’s width and height. It’s easy to adjust the SVG size using any SVG editor. In Inkscape, you can change document size by selecting File → Document Properties and then center the logo using Object → Align and Distribute.
确保 SVG 图像是正方形的。在系统查看器中打开源文件并检查图像的宽度和高度。使用任何 SVG 编辑器都可以轻松调整 SVG 大小。在 Inkscape 中，您可以通过选择“文件”→“文档属性”来更改文档大小，然后使用“对象”→“对齐和分布”将徽标居中。

Save your file as icon.svg. Now let’s fiddle with our SVG and make it play well with modern system themes. Ask your designer how the colors should be inverted for a dark theme (for B&W logos, you just change black to white).
将文件另存为 icon.svg 。现在让我们摆弄我们的 SVG，让它与现代系统主题很好地配合。询问您的设计师如何反转深色主题的颜色（对于黑白徽标，您只需将黑色更改为白色）。

Now, open your SVG file in a text editor. Find a <path> with a dark or missing fill. Add a CSS media query that will trigger on theme changes and change fill to the colors you want:
现在，在文本编辑器中打开 SVG 文件。查找带有深色或缺失 fill 的 <path> 。添加将在主题更改时触发的 CSS 媒体查询，并将 fill 更改为您想要的颜色：

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+   <style>
+     @media (prefers-color-scheme: dark) {
+     .a { fill: #f0f0f0 }
+     }
+   </style>
-   <path fill="#0f0f0f" d="…" />
+   <path class="a" fill="#0f0f0f" d="…" />
  </svg>

You may also use this media query technique with SVGs to add wide-gamut P3 colors to your favicons.
您还可以将这种媒体查询技术与 SVG 结合使用，以将广色域 P3 颜色添加到您的收藏夹图标中。

Step 2: Create an ICO file
步骤 2：创建 ICO 文件

Open your icon.svg file in a raster graphics editor. I recommend GIMP; it’s free and multi-platform.
在光栅图形编辑器中打开 icon.svg 文件。我推荐 GIMP；它是免费的，并且是多平台的。

Accept rendering SVG to raster. Set the width and height to be 32 pixels. Export file to favicon.ico using 32 bpp, 8-bit alpha, no palette settings.
接受将 SVG 渲染为光栅。将宽度和高度设置为 32 像素。使用 32 bpp、8 位 Alpha、无调色板设置将文件导出到 favicon.ico 。

If you do not have GIMP you can install Inkscape and ImageMagick and convert SVG to ICO in the terminal:
如果您没有 GIMP，您可以安装 Inkscape 和 ImageMagick 并在终端中将 SVG 转换为 ICO：

inkscape ./icon.svg --export-width=32 --export-filename="./tmp.png"
# In Windows call `magick convert ./tmp.png ./favicon.ico`
convert ./tmp.png ./favicon.ico
rm ./tmp.png

Scale the image down to 16×16 and check the icon visibility. If it has become too blurry, it would be better to ask your designer for a custom tiny version of the logo.
将图像缩小到 16×16 并检查图标的可见性。如果它变得太模糊，最好向您的设计师询问徽标的定制小版本。

To include a separate 16×16 version of an icon:
要包含单独的 16×16 版本的图标：

1. Open favicon.ico with the 32×32 icon.
   使用 32×32 图标打开 favicon.ico 。
2. Create a new layer with a 16×16 size.
   创建一个大小为 16×16 的新图层。
3. Put the 16×16 version of an icon into this layer.
   将 16×16 版本的图标放入该层。
4. Export the file. GIMP will save each layout as a separate version of the icon.
   导出文件。 GIMP 会将每个布局保存为图标的单独版本。

Or you can do the same in ImageMagick by:
或者您可以在 ImageMagick 中执行相同的操作：

convert ./icon-32.png ./icon-16.png ./favicon.ico

Step 3: Create PNG images
第 3 步：创建 PNG 图像

Open your source SVG file in a raster graphics editor again and create a 512×512 image. Export it as icon-512.png.
再次在光栅图形编辑器中打开源 SVG 文件并创建 512×512 图像。将其导出为 icon-512.png 。
Scale the image to 192×192 and export it to icon-192.png. Now scale the image itself to 140×140 and set the canvas to 180×180, and then export it as apple-touch-icon.png.
将图像缩放至 192×192 并将其导出到 icon-192.png 。现在将图像本身缩放为 140×140 并将画布设置为 180×180，然后将其导出为 apple-touch-icon.png 。

Or you can do the same in Inkscape:
或者您可以在 Inkscape 中执行相同的操作：

inkscape --export-type="png" --export-width=512 --export-filename="./icon-512.png" ./icon.svg
inkscape --export-type="png" --export-width=192 --export-filename="./icon-192.png" ./icon.svg

Step 4: Optimize PNG and SVG files
步骤 4：优化 PNG 和 SVG 文件

The best tool for optimizing SVGs is SVGO. To use it, run:
优化 SVG 的最佳工具是 SVGO。要使用它，请运行：

npx svgo --multipass icon.svg

Squoosh is a great web app to optimize raster images:
Squoosh 是一款出色的网络应用程序，用于优化光栅图像：

1. Open your icon-512.png in Squoosh.
   在 Squoosh 中打开你的 icon-512.png 。
2. Change the Compress setting to OxiPNG.
   将压缩设置更改为 OxiPNG 。
3. Enable “Reduce palette”.
   启用“减少调色板”。
4. Set 64 colors. 设置 64 种颜色。
5. Compare the before/after by moving the slider. If you see a difference, increase the number of colors.
   通过移动滑块来比较之前/之后。如果发现差异，请增加颜色数量。
6. Save the file. 保存文件。

Repeat these steps for icon-192.png and apple-touch-icon.png.
对 icon-192.png 和 apple-touch-icon.png 重复这些步骤。

Step 5: Add the icons to HTML
第 5 步：将图标添加到 HTML

You need to add links to favicon.ico and to apple-touch-icon.png into your HTML.
您需要将 favicon.ico 和 apple-touch-icon.png 的链接添加到 HTML 中。

For static HTML: 对于静态 HTML：

  <title>My website</title>
+ <link rel="icon" href="/favicon.ico" sizes="32x32">
+ <link rel="icon" href="/icon.svg" type="image/svg+xml">
+ <link rel="apple-touch-icon" href="/apple-touch-icon.png">

However, we recommend using a bundler to generate cache busters (include the file’s hash in the name as a fingerprint). If you are using Webpack with HtmlWebpackPlugin:
但是，我们建议使用捆绑程序来生成缓存破坏程序（在名称中包含文件的哈希值作为指纹）。如果您将 Webpack 与 HtmlWebpackPlugin 一起使用：

1. Create an index.html template. 创建一个 index.html 模板。

2. Add the template to the plugin options:
   将模板添加到插件选项中：

   new HtmlWebpackPlugin({ template: "./view/index.html" });

3. Define an HTML template with links (the examples use HtmlWebpackPlugin to include files, but it can be your templating language of choice):
   定义带有链接的 HTML 模板（示例使用 HtmlWebpackPlugin 来包含文件，但它可以是您选择的模板语言）：

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="utf-8">
       <title>My website</title>
       <meta name="viewport" content="width=device-width,initial-scale=1">
       <link rel="icon" href="/favicon.ico" sizes="32x32">
       <link rel="icon" type="image/svg+xml" href="<%=
         require('./icon.svg').default
       %>">
       <link rel="apple-touch-icon" href="<%=
         require('./apple-touch-icon.png').default
       %>"
      >
     </head>
     <body></body>
   </html>

4. Use copy-webpack-plugin to copy favicon.ico without adding a hash to file name.
   使用 copy-webpack-plugin 复制 favicon.ico ，而不向文件名添加哈希值。

Bonus tip: create a separate icon for staging
额外提示：为暂存创建一个单独的图标

Favicons are a nice way to distinguish your production environment from a staging one. I find that using an alternative icon for staging is super effective for avoiding any costly cases of confusion.
网站图标是区分生产环境和暂存环境的好方法。我发现使用替代图标进行分期对于避免任何代价高昂的混乱情况非常有效。

Create a favicon-dev.ico with the same logo, but invert the colors (or do something that makes sense to you). Do the same for SVG and create icon-dev.svg.
创建一个具有相同徽标的 favicon-dev.ico ，但反转颜色（或做一些对您有意义的事情）。对 SVG 执行相同操作并创建 icon-dev.svg 。

Now, replace the icons in your HTML template depending on the process.env.NODE_ENV === 'production' condition:
现在，根据 process.env.NODE_ENV === 'production' 条件替换 HTML 模板中的图标：

  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>My website</title>
      <meta name="viewport" content="width=device-width,initial-scale=1">
-     <link rel="icon" href="/favicon.ico" sizes="32x32">
+     <link rel="icon" sizes="32x32" href="<%=
+       process.env.NODE_ENV === 'production'
+         ? '/favicon.ico'
+         : require('./favicon-dev.ico').default
+     %>">
      <link rel="icon" type="image/svg+xml" href="<%=
-       require('./icon.svg').default
+       process.env.NODE_ENV === 'production'
+         ? require('./icon.svg').default
+         : require('./icon-dev.svg').default
      %>">
      <link rel="apple-touch-icon" href="<%=
        require('./apple-touch-icon.png').default
      %>">
    </head>
    <body></body>
  </html>

Step 6: Create a web app manifest
第 6 步：创建 Web 应用程序清单

For static HTML, create a JSON file named manifest.webmanifest:
对于静态 HTML，创建一个名为 manifest.webmanifest 的 JSON 文件：

{
  "name": "My website",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Link it in your HTML:
将其链接到您的 HTML 中：

  <title>My website</title>
+ <link rel="manifest" href="/manifest.webmanifest">
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

With Webpack, you can use webpack-pwa-manifest plugin:
通过 Webpack，您可以使用 webpack-pwa-manifest 插件：

  plugins: [
    …,
    new WebpackPwaManifest({
      name: 'My website',
      icons: [
        { src: resolve('./icon-192.png'), sizes: '192x192' },
        { src: resolve('./icon-512.png'), sizes: '512x512' }
      ]
    })
  ]

Thank you for reading! As you can see, with modern web standards, the task of creating our Ultimate Favicon Set becomes quite straightforward. And even though following the steps manually shouldn’t take much of your time, having an automated tool to do the same will make things even more amazing! Feel free to ping me on Twitter if you’re willing to build one; I’ll be more than happy to help!
感谢您的阅读！正如您所看到的，利用现代网络标准，创建终极网站图标集的任务变得非常简单。尽管手动执行这些步骤不会花费您太多时间，但拥有一个自动化工具来做同样的事情会让事情变得更加令人惊奇！如果您愿意构建一个，请随时在 Twitter 上联系我；我非常乐意提供帮助！

Changelog 变更日志

2023-11-19

• Fixed CLI commands for ICO and PNG generation.
  修复了 ICO 和 PNG 生成的 CLI 命令。

2023-07-11

• sizes="any" for ICO file was replaced to sizes="32x32" to fix bug when Chrome downloaded both ICO and SVG files.
  ICO 文件的 sizes="any" 已替换为 sizes="32x32" 以修复 Chrome 同时下载 ICO 和 SVG 文件时的错误。

2021-07-19

• sizes="any" was added to ICO file to fix bug when Chrome took ICO file instead of SVG.
  sizes="any" 被添加到 ICO 文件中，以修复 Chrome 采用 ICO 文件而不是 SVG 时的错误。

2021-01-19

• Inkscape commands were added to convert SVG to PNG.
  添加了 Inkscape 命令以将 SVG 转换为 PNG。

2021-01-15

• ImageMagick commands were added for users who do not have GIMP.
  为没有 GIMP 的用户添加了 ImageMagick 命令。