2023 年《如何制作网站图标》权威版

太长不看

<head>在HTML 文档的元素中插入

<link rel="icon" href="/favicon.ico" sizes="48x48" ><!-- REVISED (Aug 11, 2023)! -->
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"><!-- REVISED (Aug 11, 2023)! -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="manifest" href="/site.webmanifest" />

其中site.webmanifest有一个 JSON 文件，内容如下：

{
    "name": "Your website name",
    "short_name": "A shorter version of your website name",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#4a4a4a",
    "background_color": "#4a4a4a",
    "display": "standalone"
}

"theme_color"将和的值更改"background_color"为您的网站图标设计规范

然后创建 SVG 格式的网站图标。

使用RealFaviconGenerator将此 SVG 图像转换为favicon.ico、apple-touch-icon.png、android-chrome-192x192.png和。android-chrome-512x512.png

最后，请确保favicon.ico文件名保持不变（不要更改），并保存在根目录下。（否则，macOS Safari 和 IE 将无法识别网站图标。）

就这样！：-）

动机

我原以为给网站添加网站图标很简单：创建一个名为 `.favicon` 的文件favicon.ico，将其保存在根目录下，然后在<head>HTML 文件的 `<head>` 部分添加以下代码：

<link rel="icon" href="/favicon.ico" type="image/x-icon">

我错了。

2020年代，网站图标（favicon）的使用更加先进，部分原因是我们需要兼顾iOS和Android主屏幕上的快捷方式图标。如今，网站图标的配色方案也需要能够响应深色主题。

然而，对于如何使用网站图标（favicon）并没有统一的共识。Adam 、Nathan 和 Patrick (2021) 的研究<link rel="icon">表明，访问量排名前 10 万的网站的网站图标在图像尺寸、图像格式以及HTML 代码编写方式等方面存在着很大的差异（而且常常是错误的）。

对于任何想要在自己开发的网站上添加网站图标的网页开发者来说，这都是一场噩梦。

造成误解的原因之一是人们没有提供证据来支持他们的说法。事实证明，关于网站图标的很多说法都是错误的。

在本文中，我尽力通过广泛引用信息来源来佐证每一个论点。希望以下内容能够成为“2023 年如何制作网站图标”的最终答案。

文献综述

（如果您只想学习推荐的HTML代码，请跳过此小节。）

过去几年里，不同的人提出了不同的网站图标使用解决方案。Gant (2019)、Schwarz (2020)、RealFaviconGenerator (未注明日期)、Bailey (2020)和Boulanger (2020)的观点并不一致。

分歧不仅限于博客圈，就连一些主流网站似乎也持不同意见：

“顶级网站在图标的声明方式（通过页面头部的元素）方面出奇地不一致。”（Vidas 2019）

“但截至撰写本文时，apple.com完全没有任何网站图标的标记。他们只有一个/favicon.ico文件，除此之外什么也没有——这种老式的方法在任何地方仍然有效。”（Reamsnyder 2021）。

最近，Sitnik (2020) （其文章被Coyier (2021a)引用）提出了一种极简解决方案，仅需 4 行 HTML 代码、一个 JSON 文件和五个网站图标文件。然而，Reamsnyder (2021)对该方案的部分内容提出了质疑。

Sitnik (2020)随后根据subzey (2021)的建议更新了他提出的解决方案。在本文的先前版本中，我采用了该解决方案作为使用网站图标的推荐方法。作为记录，以下是该解决方案：

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="manifest" href="/site.webmanifest" />

然而，到了 2023 年，由于 Chromium 浏览器的行为方式发生了变化，这种解决方案不再有效（正如Waldron (2023)和Noakes (2023a)所报告的那样，这两篇文章都是对本文的评论）。

值得庆幸的是，本文的另一条评论xcuses (2023a)提出了一种解决方法。该方案以及其他几种替代方案已在最新版本的 Chrome、Firefox 和 Safari 浏览器中进行了测试，并被Noakes (2023b)确认为最佳方案。

因此，在 2023 年 8 月 11 日，我修改了这篇文章，推荐xcuses (2023a)的解决方案作为2023 年 favicon 的实现方式。

好了，冗长的介绍终于结束了。让我们进入细节部分。

1. SVG 格式的网站图标

1.1 面向未来

网站图标（favicon）问题的一个原因是，随着时间的推移，浏览器和操作系统能够处理更高分辨率的图像。对于 PNG 图像来说，这意味着我们需要准备同一图像的不同尺寸版本（参见Bernard 2019）。而 SVG 图像则只需一个文件即可处理所有尺寸，包括未来的尺寸。为了确保兼容性，我们应该使用 SVG 网站图标。

为了说明 SVG 图标具有面向未来的特性，让我们回到 2019 年 5 月，当时 Google 开始在其搜索结果中显示网页图标（Leach 2019）：

左图：2019 年 5 月之前的 Google 搜索结果；右图：2019 年 5 月之后的 Google 搜索结果（图片来源：Leach (2019)）

Google 要求您的网站图标必须是 48 像素正方形的倍数（48x48、96x96、144x144 等）（Google Developers，无日期）。但如果您的网站图标是 SVG 图像，那么在得知 Google 搜索结果将开始显示网站图标后，您就不必再创建另一个版本的网站图标图像文件了。

1.2 HTML 代码

要使用 SVG 图像作为网站图标，请将以下代码添加到<head>HTML 文件的 <head> 元素中：

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Boulanger (2020)认为该type属性是不必要的。但Can I Use (2021a)指出，所有支持 SVG 网站图标的浏览器（Chrome 80+、Edge 80+、Firefox 41+、Opera 67+）都要求“提供的 MIME 类型为 SVG image/svg+xml”。（不过，我对这个问题的理解有限：Robinson (2022)在本文的评论中指出，该type属性确实不必要。）

1.3 SVG网站图标的其他优点

SVG 图标的另一个优点是，您可以切换其配色方案以适应深色模式。Sitnik (2020)给出了以下 SVG 图像文件的示例代码：

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

这样，如果用户在浏览器中启用了深色主题，fill颜色就会从黑色变为#0f0f0f黑色。（有关媒体查询的详细信息，请参阅Kravets 2021。）#f0f0f0prefers-color-scheme

有关 SVG favicon 的其他优点，请参阅Bailey (2020)。

2.`.ico`网站图标（适用于 Safari 和 IE）

2.1 Safari 不支持 SVG 格式的网站图标

截至2023年7月，完全兼容SVG网站图标的浏览器占据了全球页面浏览量的73.81%（Can I Use 2023a）。不出所料，IE不支持SVG网站图标。但即使是最新版本的Safari，也并非完全支持SVG网站图标。它仅支持在标签中指定单一颜色的无色SVG图像（详见下文第5节）。正如Reamsnyder（2021）<link>所指出的，这种SVG网站图标会阻止我们根据用户选择的深色模式来切换配色方案，正如上文所述。

因此，我们需要为这些“旧版”浏览器提供一个备用方案，即使用所有浏览器（包括 IE 5）都支持的.icofavicon 。

2.2 创建`.ico`文件

创建图标.ico文件需要一些专用软件。RealFaviconGenerator让这一切变得非常简单。它允许您上传 SVG 格式的图标文件，然后下载.ico对应于 16x16、32x32 和 48x48 像素的文件版本（一个.ico文件可以包含同一 PNG 图像的多个尺寸）。详情请参阅RealFaviconGenerator (nd) 。

2.3 提及`.ico`网站图标

注意：本节于 2023 年 8 月 11 日进行了大幅修订（相当于语义版本控制术语中的“重大变更”），以反映本文评论部分中的讨论。

要引用.ico网站图标的版本，请使用以下 HTML 代码（xcuses 2023a）：

<link rel="icon" href="/favicon.ico" sizes="48x48">

注意这个sizes="48x48"属性。这是一个技巧，可以欺骗最新版本的 Chromium 浏览器（Chrome、Edge、Opera 等），使它们选择 SVG 格式的网站图标，而不是.ico版本号的网站图标。

事情的经过如下。如果我们不sizes="48x48"按以下方式操作：

<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Chromium 浏览器随后将使用favicon.ico而不是。虽然 Chromium 开发人员似乎认为这是预期行为，但favicon.svg该问题已被报告为“错误”（匿名用户 2020；另见RealFaviconGenerator 2020和subzey 2021 ）。

这实际上禁用了上述 SVG 图像根据用户选择的深色模式切换网站图标颜色方案的功能（Armadillo 2020）。这是不希望看到的。

Reamsnyder (2021)解释了 Chrome 出现这种行为的原因：

.ico文件通常包含几种不同尺寸的图标，其中一种可能正好是浏览器当时需要的尺寸，因此即使有完全合适的尺寸.svg可用，Chrome 也认为使用这种尺寸的图标是明智之举。( Reamsnyder 2021 )

要充分理解这个问题，我们需要知道当存在多个<link rel="icon">语句时浏览器应该如何运行：

如果存在多个<link rel="icon">图标，浏览器会根据它们的媒体、类型和大小属性来选择最合适的图标。如果多个图标同样合适，则使用最后一个图标。如果之后发现最合适的图标不合适（例如，因为它使用了不支持的格式），浏览器会继续选择次合适的图标，依此类推。（MDN 贡献者 2021a）

现在我们明白了问题所在。那么有什么解决方法呢？答案是sizes给<link>元素添加一个属性，它可以实现以下功能：

此属性定义资源中包含的视觉媒体图标的大小。仅当rel包含值为 `<value>`icon或非标准类型（例如 Apple 的 `<icon>` apple-touch-icon）时，才必须存在此属性。（MDN 贡献者 2021b）

通过设置sizes="48x48"，Chromium 浏览器会认为该图标过大而无法使用，因为浏览器标签页图标通常为 16x16 像素（或在 Retina 显示屏上为 32x32 像素）（Cardello 2023）。事实上，xcuses (2023b)报告称，当设置了sizes="16x16"或时sizes="32x32"，某些版本的 Chrome 会选择使用该.ico文件而不是 SVG 文件。

鉴于“如果多个图标同样合适，则使用最后一个图标”（MDN Contributors 2021a），最好.ico先声明网站图标：

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Chromium 内核的浏览器（以及 Firefox）会选择使用 SVG 格式的网站图标文件，即使它们认为两种文件格式同样合适。而 Safari（以及 IE）则会使用.icoSVG 格式的网站图标文件。

Noakes (2023b)证实了浏览器的这种预期行为，他广泛测试了 Chrome、Firefox 和 Safari 的 favicon 行为。

2.4 添加`sizes="any"`对 SVG 网站图标的引用

除了添加sizes="48x48"用于引用网站图标.ico的 `<favicon>` 标签外，xcuses (2023a)和Noakes (2023b)都建议添加sizes="any"用于引用 SVG 网站图标的 `<favicon>` 标签。因此，HTML 代码应为：

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">

截至 2023 年，无论sizes="any"是否包含该功能，浏览器的行为均符合预期（Noakes 2023b）。然而，如果我理解正确，添加该功能也使得 Chromium 浏览器在未来sizes="any"更有可能选择 SVG 格式的网站图标而非默认图标。.ico

显然，自 2022 年 12 月 15 日以来，Chromium 浏览器改变了其解释方式。sizes="any"根据Söderquist (2022)的说法，Chromium 代码库中的一条提交信息显示，Chromium 浏览器过去会忽略<link rel="icon">包含sizes="any".

这就是为什么在 2021 年，欺骗 Chromium 浏览器忽略.ico网站图标的推荐方法是：

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

这是subzey (2021)发现的一个黑客攻击。

然而，由于 2022 年 12 月 15 日提交的代码修复了一个已报告的错误，Chromium 浏览器现在将此视为sizes="any"优先级指示。因此，通过上述方法，Chromium 浏览器不再忽略网站图标.ico(favicon)。

为了确保 Chromium 浏览器将 SVG 图标视为首选图标，sizes="any"建议添加此设置。（这是我的个人理解。如果您是网站图标文件选择算法方面的专家，请指正。）

2.5 游乐场

我推荐你试试subzey (2021)制作的网站图标演示网页。分别用 Chrome 和 Safari 的开发者工具打开它，然后编辑 HTML 代码。你就能看到显示的是哪个网站图标了。

2.6 其他主题

（如果您只对推荐的网站图标 HTML 代码感兴趣，请跳过此部分。）

在结束第二部分之前，我想谈谈关于网络上出现的网站图标的三点建议。

（1）Safari 的 PNG 格式网站图标？

Reamsnyder (2021)建议为 Safari 创建 PNG 版本的 favicon 图像，并使用以下标签引用它<link>：

<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">

如上所述，如果存在多个<link rel="icon">标签，浏览器会选择最合适的网站图标文件；如果存在多个最佳选择，则选择最后一个。因此，兼容 SVG 的浏览器会选择这段 HTML 代码中的 SVG 网站图标。

不过就我个人而言，我并不觉得为 Safari 创建 PNG 文件有什么好处。它最终只会作为浏览器标签页上的一个小图标显示。相比低分辨率的 ICO 图片，高分辨率的 PNG 图片并不划算。RealFaviconGenerator （未注明日期）认为 32x32 像素的分辨率已经足够了。

（2）alternate属性值

为了防止浏览器选择该.ico文件而不是 SVG 文件，Bailey (2020)建议使用alternate属性值，如下所示：

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

然而，一些用户反映该alternate属性值在 Chrome 84 中不起作用（Armadillo 2020）。毕竟，规范中并没有将该alternate值与一起使用（ WHATWG 2021）。icon

（3）shortcut属性值

其他人（包括Google Developers，nd）建议使用rel="shortcut icon"。但Bynens (2010)认为这样做弊大于利。

3. 苹果触控图标

3.1 iOS/Android 主屏幕上的快捷方式图标

SVG 图标非常适合桌面浏览器标签页和 Google 搜索结果（Leach 2019）。

但是，当移动设备用户“安装”该网站以在 iOS 和 Android 的主屏幕上创建快捷方式图标时，它存在局限性，因为移动设备需要不同的图标设计（详情请参阅Bernard (2018) ）。

因此，我们需要对原有的 SVG 网站图标进行一些修改，使其符合 iOS 和 Android 的设计要求。对于 iOS，我们需要一个苹果触控图标（我们将在本节中讨论）。对于 Android，我们需要一个 Web 应用清单文件（参见下文第 4 节）。

3.2 HTML 代码

对于 iOS 系统，请在元素中添加以下<link>标签<head>：

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

Bernard (2019)提到，link即使 iOS 设备会自动找到它，我们也应该添加标签来引用苹果触摸图标图像，因为其他操作系统也使用苹果触摸图标（包括 Windows 8+——更多内容请参见下文第 6 节）。

3.3 创建 Apple 触控图标

现在的问题是图像分辨率。RealFaviconGenerator (nd)认为我们应该使用 180x180 分辨率，以兼容 iOS 8 及更高版本。

Sitnik (2020)建议在原始网站图标周围添加 20px 的内边距和一些背景颜色，以使 Apple 触摸图标看起来更好。

RealFaviconGenerator可以非常轻松地将原始 SVG 格式的网站图标转换为苹果触控图标。它允许您上传 SVG 格式的网站图标文件，通过图形方式调整原始图像以适应 iOS 主屏幕上的图标大小，并下载 180x180 像素的 PNG 文件。

4. Web应用程序清单

对于 Android 设备上的主屏幕图标，我们需要一个 Web 清单，它最初是为渐进式 Web 应用设计的（参见LePage、Beaufort 和 Steiner 2018）。

4.1 HTML 代码和 JSON 文件

将以下<link>标签添加到<head>元素中：

<link rel="manifest" href="/site.webmanifest" />

（JSON 文件）的文本内容/site.webmanifest类似于这样：

{
    "name": "Triangulum Color Picker",
    "short_name": "Triangulum",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#4a4a4a",
    "background_color": "#4a4a4a",
    "display": "standalone"
}

以上代码是RealFaviconGenerator为我构建并命名为 Triangulum Color Picker 的 Web 工具生成的。
该文件也可以称为manifest.json。参见W3C (2021)和Arseniy-II (2018)。
Reamsnyder (2021)报告称，省略name, short-name, theme_color, background_color, 和display属性会导致Lighthouse报错。

4.2 创建 PNG 图标

如果按照LePage、Beaufort 和 Steiner (2018)的建议， PNG 图像需要 192x192 和 512x512 两种尺寸。但Boulanger (2020)认为我们只需要 512x512 的尺寸即可。

4.3 图标的“可遮罩”版本

Reamsnyder (2021)指出，为了通过 Lighthouse 审核，这些 PNG 图片需要“可遮罩”，以便不同的 Android 设备可以裁剪图标，将其变成圆形、圆角矩形等等 ( Oakes和Steiner 2019 )。RealFaviconGenerator无法处理这一点。Maskable.app可以帮助您使图标“可遮罩”。

"property": "maskable"然后，按如下方式添加对可遮罩PNG图像的引用site.manifest：

{
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable" // <-- New property value `"maskable"`
    },
    …
  ],
  …
}

有关更多详细信息，请参阅Oakes 和 Steiner (2019) 。

这是额外的工作，但好处是能得到像这样的图标：

而不是

（两张图片均取自Oakes 和 Steiner 2019 年的研究）。

如果将网站作为渐进式 Web 应用 (PWA) 在 Android 设备上使用是你的网站的关键功能，那么进行这项额外的图像编辑是值得的。否则，我建议跳过这一步。

现在我们来看网站图标的可选要求。您可以忽略所有这些要求。

5. macOS Safari 固定标签页（可选）

macOS 上的 Safari 浏览器允许用户固定网页。这会在新标签页中创建一个带有网站图标（favicon）的标签页。

直到 2018 年 9 月发布的 12 版本（根据Sitnik (2020)的说法），Safari 并没有使用标准的 favicon，而是使用单色的 SVG 图像来实现固定标签页功能。

如果您想支持 Mac OS 上的旧版 Safari（根据Can I Use (2023b)<link>的数据，2023 年 6 月 Safari 的全球页面浏览量占比为 0.06%），请按如下方式添加额外的标签：

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#4a4a4a" />

此处color应将属性值更改为所需的颜色代码。

创建这种版本的网站图标相当棘手，因为它必须是单色的，颜色必须与标签link（#4a4a4a如上文代码片段所示）中指定的颜色一致，而不是与 SVG 文件本身中指定的颜色一致。有关具体的设计要求，请参阅Apple (2016) 。

6. Windows Metro 磁贴（可选）

Windows 8 或更高版本允许用户在“开始”菜单（称为Windows Metro 磁贴）中创建网页快捷方式图标。默认情况下，Windows 会使用苹果触控图标来实现此功能（Boulanger 2020）。因此，我们无需创建另一个版本的网站图标 (favicon)。

如果您仍然想要自定义 Windows Metro 磁贴的网站图标，请参阅Bernard (2019)。

RealFaviconGenerator会处理一切。

7. Android 版 Chrome 标签页颜色（可选）

这其实不是网站图标。但你可以用以下方法指定安卓版 Chrome 标签栏的颜色：

<meta name="theme-color" content="#4a4a4a" />

此处content应将属性值更改为所需的颜色代码。

根据Valkhof (2020)的说法， Discord也使用这种主题颜色作为网站共享链接的边框。

就这样！

写完这篇文章后，我对网站图标（favicon）的理解清晰多了。

希望这篇文章能让你免受网站图标（favicon）困扰。🙂

欢迎提出任何意见和建议。 ;-)

更新日志

2023年8月11日（v4.0.0）：对第2节进行重大修改：由于Chromium浏览器在2022年12月进行了规范变更，我不再建议添加指向网站sizes="any"图标（favicon）的引用。.ico相应地修改标题、特色图片、TL;DR（太长不看）部分和引言。为第1.1节中的图片添加替代文本。承认我在第1.2节中可能存在的误解。修正参考文献中的拼写错误。

2021年11月8日（v3.0.0）：对第2.3节进行重大更改：我不再建议.ico在HTML代码中故意省略对网站图标文件的引用。请相应地修改“TL;DR”（太长不看）和“简介”部分。

2021年10月27日（v2.1.1）：修复了Markdown标记中的一些错误。内容无变化。

2021 年 10 月 22 日（v2.1.0）：提及Adam、Nathan 和 Patrick (2021)的研究结果，作为主要网站在如何处理网站图标方面存在分歧的证据。

2021年7月15日（v2.0.1）：修正了一些拼写错误并改进了表述。

2021年7月7日（v2.0.0）：对整篇文章进行重大修改：（1）移除了<link>标签favicon.ico；（2）Safari固定标签页的专用网站图标文件现在被列为可选，而非强制性。将文章标题更改为“2021年如何设置网站图标的权威版本”。

2021 年 1 月 27 日（v1.0.0）：发布第一个版本，标题为“Favicon 噩梦：如何保持理智 :-)”。

参考

Adam、Nathan 和 Patrick (2021)“我们分析了 425,909 个网站图标”，iconmap.io，2021 年 10 月 20 日。

匿名用户 (2020)“问题 1162276：如果存在“sizes”属性，则 SVG favicon 无法加载，而是加载常规 favicon ”，Chromium Bug Reports，2020 年 12 月 30 日。

Apple (2016)“创建固定标签图标”，Safari Web 内容指南，2016 年 12 月 12 日。

Armadillo (2020)“ Chromium 似乎显示 ico 而不是 svg favicon ”，Stack Overflow，2020 年 8 月 15 日。

Arseniy-Il (2018)“除了命名之外，没有太大区别…… ”，Stack Overflow，2018 年 9 月 3 日。

Bailey (2020)“ SVG、网站图标以及我们可以用它们做的所有有趣的事情”，CSS-Tricks，2020 年 4 月 24 日。

Bernerd, Philippe (2018)“联合圣文森特和格林纳丁斯网站图标神话”，网站图标博客，2018 年 3 月 13 日。

Bernard, Philippe (2019)“网站图标、触摸图标、平铺图标等。你需要哪一个？ ”，CSS-Tricks，2019 年 1 月 11 日。

Blazak, Ben (2021) “非常感谢！可能更正：我刚刚做了一个简单的测试（macos 10.14：safari 14，chrome 94），网站图标没有显示…… ”，开发者，2021 年 10 月 6 日。

Boulanger, Antoine (2020)“你还在使用 SVG 网站图标吗？现代浏览器指南”，Start It Up，2020 年 4 月 20 日。

Bynens, Mathias (2010)“rel="shortcut icon"被认为有害”，mathiasbynens.be，2010 年 4 月 14 日。

Can I Use (2023a)“ SVG favicons ”，Can I Use?，访问于 2023 年 7 月 2 日。

Can I Use (2023b)“浏览器使用情况表”，Can I Use?，访问于 2023 年 7 月 2 日。

Cardello, Jeff (2021) “网站图标：2021 年你需要知道的一切”，Webflow 博客，2021 年 9 月 8 日。

Coyier, Chris (2021a)“ 2021 年如何使用 Favicon ”，CSS-Tricks，2021 年 2 月 10 日。

Coyier, Chris (2021b) “ Favicons: 如何确保浏览器只下载 SVG 版本”, CSS-Tricks , 2021 年 11 月 5 日。

Gant, Greg (2019)“ 2020 年适用于几乎所有人和所有浏览器的 FavIcons 指南”，Emerge，2019 年 10 月 28 日。

Google Developers（无日期）“定义要在搜索结果中显示的网站图标”，Google 搜索中心，访问日期为 2021 年 7 月 7 日。

Kravets, Una (2021)“新的响应式：组件驱动世界中的 Web 设计”，web.dev，2021 年 5 月 19 日。

Leach, Jamie (2019)“谷歌搜索的新面貌”，《关键词》，2019 年 5 月 22 日。

LePage, Pete、François Beaufort 和 Thomas Steiner (2018)“添加 Web 应用程序清单”，2018 年 11 月 5 日。

MDN 贡献者 (2021a)“链接类型”，MDN Web 文档，2021 年 6 月 22 日（最后更新）。

MDN 贡献者 (2021b) “ <link>：外部资源链接元素”，MDN Web Docs，2021 年 10 月 24 日（最后更新）。

Noakes, Darryl (2023a) “似乎从 Chrome 113 开始，ICO 上的 sizes="any" 就不再起作用了…… ”，开发者社区，2023 年 5 月 31 日。

Noakes, Darryl (2023b) “我在 Chrome 中使用 subzey 的测试页面进行了测试chrome-svg-favicon-bug.karlhorky.r...，而且它似乎运行良好！... ”, Dev Community , 2023 年 6 月 20 日。

Oakes、Tiger 和 Thomas Steiner (2019)“ PWA 中具有可遮罩图标的自适应图标支持”，web.dev。2019年 12 月 19 日。

RealFaviconGenerator（nd）“常见问题解答”，Real Favicon Generator，访问于 2021 年 1 月 27 日。

RealFaviconGenerator（2020），“当它找到 SVG 和 ICO 格式的网站图标时…… ”，Twitter，2020 年 4 月 11 日。

Reamsnyder, Lee (2021)“ 2021 年如何设置网站图标”，leereamsnyder.com，2021 年 4 月 19 日。

Robinson, Mike (2022) “您把 HTML 中的 type 属性和提供的 mime 类型混淆了…… ”，Dev Community，2022 年 5 月 16 日。

Schwarz, Daniel (2020)“什么是网站图标：综合指南”，Sympli，2020 年 2 月 5 日。

Sitnik, Andrey (2020)“ 2021 年如何使用 Favicon：满足大多数需求的六个文件”，Evil Martins，2020 年 12 月 23 日。

Söderquist, Fredrik (2022) “考虑初始 favicon 评分中的‘any’ size 关键字... ”）”，Google Git，2022 年 12 月 15 日。

subzey (2021) “ Google Chrome 可能会忽略您精美的 SVG 网站图标... ”，Twitter，2021 年 7 月 19 日。

Valkhof, Kilian (2020)“我注意到你没有定义主题颜色…… ”，Twitter，2020 年 12 月 29 日。

Vidas, Šime (2019)“每周平台新闻：Favicon 指南、可访问性测试、Web 年鉴”，CSS-Tricks，2019 年 5 月 31 日。

W3C（2021）Web应用程序清单。2021年7月1日。

Waldron, Doug (2023) “这是一篇很棒的文章，绝对是我找到的最详尽的文章！不过我有一些坏消息…… ”，Dev Community，2023 年 3 月 27 日。

WHATWG（2021）HTML 生活标准，最后更新于 2021 年 7 月 2 日。

xcuses (2023a) “嗨，这对我有用：<link rel="icon" sizes="48x48" href="/favicon.ico">…… ”，开发者社区，2023 年 5 月 1 日。

xcuses (2023b) “是的，我选择 48x48 是有原因的…… ”，开发者社区，2023 年 6 月 23 日。

文章来源：https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7

分享

2023 年《如何制作网站图标》权威版

2023 年《如何制作网站图标》权威版

太长不看

动机

文献综述

1. SVG 格式的网站图标

1.1 面向未来

1.2 HTML 代码

1.3 SVG网站图标的其他优点

2..ico网站图标（适用于 Safari 和 IE）

2.1 Safari 不支持 SVG 格式的网站图标

2.2 创建.ico文件

2.3 提及.ico网站图标

2.4 添加sizes="any"对 SVG 网站图标的引用

2.5 游乐场

2.6 其他主题

3. 苹果触控图标

3.1 iOS/Android 主屏幕上的快捷方式图标

3.2 HTML 代码

3.3 创建 Apple 触控图标

4. Web应用程序清单

4.1 HTML 代码和 JSON 文件

4.2 创建 PNG 图标

4.3 图标的“可遮罩”版本

5. macOS Safari 固定标签页（可选）

6. Windows Metro 磁贴（可选）

7. Android 版 Chrome 标签页颜色（可选）

更新日志

参考

2.`.ico`网站图标（适用于 Safari 和 IE）

2.2 创建`.ico`文件

2.3 提及`.ico`网站图标

2.4 添加`sizes="any"`对 SVG 网站图标的引用