Favicon 标准 - 2022 - svg、ico、png 和尺寸？
Favicon Standard - 2022 - svg, ico, png and dimensions?
自 2022 年起，应使用哪些网站图标尺寸、文件格式和 meta/link 标签？这包括苹果图标、windows、android 和人们今天使用的其他设备。
我用的是Opera，可以看到它支持svg格式。现在使用 svg 是最好的解决方案吗？是否有“一个文件适合所有人”的选项？
我浏览了很多网站并检查了不同的“网站图标生成器”。他们都是年老的，主要使用 png 文件。
例如：
ico和svg应该用什么代码？
<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
或者如果 ico 包含更多尺寸，是否应该指定尺寸？我没有找到一个好的答案。
<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">
请提供应使用的网站图标的尺寸、文件格式和 meta/link 标签。
免责声明：我是 RealFaviconGenerator 的作者，我希望它是 up-to-date（主要是，见下文）。因此，如果此答案与 RFG 生成的内容匹配，请不要感到惊讶。
one-size-fits-all 神话
没有 "one size fits all" 图标。您不能创建一个 SVG 图标并期望它在任何地方都能工作。
从技术的角度来看，单个 SVG 图标是一件好事。但从 UI 和用户体验的角度来看，这不是一个理想的结果。比较 iOS 和 Android。在 iOS 上，所有主屏幕图标都是带圆角的正方形（iOS fills transparent regions of Touch icons with black). On Android, home screen icons often use non-square shapes and transparency (including Google app icons). Submit a single touch icon and Android Chrome will use it. But you won't be able to match Android icon guidelines，而专用图标可以。
所以我建议刻意避免使用单个图标。而是尽可能单独针对每个平台（情况并非总是如此）。
图标，每个平台的平台
iOS 野生动物园
iOS Safari 需要 touch icon。从今天开始，这是一张 180x180 PNG 图像。此图像不应使用透明度，添加到主屏幕时其角会自动变圆。声明方式：
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
多年来，此图标已成为许多浏览器的 "default high resolution icon"。所以你会在其他地方找到它，当添加到书签等时
Android Chrome
Android Chrome依赖于Web App Manifest。虽然这份清单并不是献给AndroidChrome，但它目前是它的主要支持者。所以目前，将 Web App Manifest 中的图标视为 Android Chrome.
仍然是相当安全的
顾名思义，网络应用程序清单适用于网络应用程序。但是任何网站都可以使用它作为引用某些图标的方式。
Android 需要 192x192 PNG 图标，允许并鼓励透明度。
清单声明为：
<link rel="manifest" href="/icons/site.webmanifest">
Edge 和 IE 12
Microsoft 推出了 browserconfig，这是一个 XML 文档，其中列出了适合 Metro UI 的各种图标。
文件和 background color 声明为：
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">
经典桌面浏览器
Windows/macOS Chrome, Windows/macOS Firefox, Safari, IE... 这有点模糊。过去，只有一个 favicon.ico 文件，仍然受支持。然而，大多数最新的浏览器宁愿选择更轻的 PNG 图标。此外，一些浏览器无法 select ICO 文件中的正确图标（这种格式可以嵌入多个版本的图标），导致低分辨率图标被错误使用。
人们可能会想完全放弃旧的 favicon.ico。虽然我想在 RFG 中实现这一飞跃，但我没有 运行 必要的测试来评估对旧浏览器的影响。
因此我今天仍然推荐的组合，favicon.ico 嵌入 16x16、32x32 和 48x48 图标：
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">
其他浏览器
其他浏览器可能有专用图标。例如 Coast by Opera is looking for a 228x228 icon。关注这些浏览器的必要性并不明显。他们通常在找不到 "their" 图标时使用触摸图标或其他图标。
结论
如开头所述，这正是 RealFaviconGenerator 创建的内容。
还值得一提的是，除了 favicon 之外，还应添加一些其他标签，如 OG 标签、Twitter 卡片或 MS-application。这一切都服务于相同的目的 - 您的品牌的视觉识别，也应该包括在内。
推特卡可以找到HERE
我添加以下标签
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">
我发现很多用户制作 1300px x 650px 和 jpg/png 格式的图像。
添加所有标签后，应验证它们 HERE
Facebook OG 有更多选项，但一般如下：
<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">
<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->
Facebook 推荐图片的特定比例，文件大小限制为 8Mb。为了与 Twitter 卡片保持相似的图像，我建议尺寸为 1240 像素 x 650 像素和 jpg/png 格式。 Facebook 和 twitter 不接受 svg...
我发现一些全球品牌在他们的网站上使用这个标签。一个尺寸为 150x150 像素，格式为 png。浏览器可能会使用此图片显示在搜索结果中。
<meta name="thumbnail" content="path/to/image/thumb-150x150.png">
Real Favicon Generator 还包括 Microsoft favicons。 MS-application 还有许多其他元标记可以优化页面和显示图像等其他信息。这个话题也值得一读。
我希望这对某人有用，并扩展了网站品牌化的主题。
几周前我遇到了完全相同的问题。在 Internet 上很难找到关于网站图标的可靠 up-to-date 信息。事实上 MDN and W3C 都 link 到维基百科以获取有关网站图标的更多信息。然而，维基百科的文章很短而且帮助不大。我花了几个小时研究现代浏览器的最佳图标是什么。
这是我学到的：
没有“一个文件可以解决所有问题”的解决方案。但是，对于现代浏览器来说，其实并不需要那么多。
- 浏览器中的标准网站图标大小仍然是 16x16 点，对应于高分辨率屏幕上的 32x32 像素。
- 没有必要在您的根目录中包含
favicon.ico 文件，除非您想要支持 IE 10 or older。
- SVG 会很好，但并非所有浏览器都支持。所以最简单的解决方案仍然是 use PNG images.
- Google 明确表示 they don't support 16x16 or 32x32 icons。对于 Google 结果，您需要至少包含一个图标，该图标是 48x48 的倍数。
- 当用户将您的网站固定在他们 phone 的启动屏幕上时，您需要 192x192 图标用于 Android、167x167 用于 iPad 和 180x180 用于 iPhone（而 link tags for iPhone are special — 见下文）
- 理论上，您可以提供单个 192x192（或 48 的更高倍数）图标，该图标会被浏览器和所有其他服务缩小，但特别是对于 16x16 点版本，这些缩放结果可能会比当您使用专业的图像编辑器自行缩放或什至为这些低分辨率图标提供特殊版本时，您会得到什么。
- 您也可以添加一个 web manifest file that includes more meta info like theme colors. But that is only supported on Android 并带来很少的好处，除非您真的希望很大一部分用户将您的网站固定在他们的主屏幕上（以我的拙见，这对大多数网站来说不太可能） .
我的建议是在您的 header 中使用以下内容：
<!-- For all browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<!-- For Google and Android -->
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
<!-- For iPad -->
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
<!-- For iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">
我还写了一篇blog post，其中有更多的散文和更多的背景信息。
自 2022 年起，应使用哪些网站图标尺寸、文件格式和 meta/link 标签？这包括苹果图标、windows、android 和人们今天使用的其他设备。
我用的是Opera，可以看到它支持svg格式。现在使用 svg 是最好的解决方案吗？是否有“一个文件适合所有人”的选项？
我浏览了很多网站并检查了不同的“网站图标生成器”。他们都是年老的，主要使用 png 文件。
例如： ico和svg应该用什么代码？
<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
或者如果 ico 包含更多尺寸，是否应该指定尺寸？我没有找到一个好的答案。
<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">
请提供应使用的网站图标的尺寸、文件格式和 meta/link 标签。
免责声明：我是 RealFaviconGenerator 的作者，我希望它是 up-to-date（主要是，见下文）。因此，如果此答案与 RFG 生成的内容匹配，请不要感到惊讶。
one-size-fits-all 神话
没有 "one size fits all" 图标。您不能创建一个 SVG 图标并期望它在任何地方都能工作。
从技术的角度来看，单个 SVG 图标是一件好事。但从 UI 和用户体验的角度来看，这不是一个理想的结果。比较 iOS 和 Android。在 iOS 上，所有主屏幕图标都是带圆角的正方形（iOS fills transparent regions of Touch icons with black). On Android, home screen icons often use non-square shapes and transparency (including Google app icons). Submit a single touch icon and Android Chrome will use it. But you won't be able to match Android icon guidelines，而专用图标可以。
所以我建议刻意避免使用单个图标。而是尽可能单独针对每个平台（情况并非总是如此）。
图标，每个平台的平台
iOS 野生动物园
iOS Safari 需要 touch icon。从今天开始，这是一张 180x180 PNG 图像。此图像不应使用透明度，添加到主屏幕时其角会自动变圆。声明方式：
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
多年来，此图标已成为许多浏览器的 "default high resolution icon"。所以你会在其他地方找到它，当添加到书签等时
Android Chrome
Android Chrome依赖于Web App Manifest。虽然这份清单并不是献给AndroidChrome，但它目前是它的主要支持者。所以目前，将 Web App Manifest 中的图标视为 Android Chrome.
仍然是相当安全的顾名思义，网络应用程序清单适用于网络应用程序。但是任何网站都可以使用它作为引用某些图标的方式。
Android 需要 192x192 PNG 图标，允许并鼓励透明度。
清单声明为：
<link rel="manifest" href="/icons/site.webmanifest">
Edge 和 IE 12
Microsoft 推出了 browserconfig，这是一个 XML 文档，其中列出了适合 Metro UI 的各种图标。
文件和 background color 声明为：
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">
经典桌面浏览器
Windows/macOS Chrome, Windows/macOS Firefox, Safari, IE... 这有点模糊。过去，只有一个 favicon.ico 文件，仍然受支持。然而，大多数最新的浏览器宁愿选择更轻的 PNG 图标。此外，一些浏览器无法 select ICO 文件中的正确图标（这种格式可以嵌入多个版本的图标），导致低分辨率图标被错误使用。
人们可能会想完全放弃旧的 favicon.ico。虽然我想在 RFG 中实现这一飞跃，但我没有 运行 必要的测试来评估对旧浏览器的影响。
因此我今天仍然推荐的组合，favicon.ico 嵌入 16x16、32x32 和 48x48 图标：
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">
其他浏览器
其他浏览器可能有专用图标。例如 Coast by Opera is looking for a 228x228 icon。关注这些浏览器的必要性并不明显。他们通常在找不到 "their" 图标时使用触摸图标或其他图标。
结论
如开头所述，这正是 RealFaviconGenerator 创建的内容。
还值得一提的是，除了 favicon 之外，还应添加一些其他标签，如 OG 标签、Twitter 卡片或 MS-application。这一切都服务于相同的目的 - 您的品牌的视觉识别，也应该包括在内。
推特卡可以找到HERE
我添加以下标签
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">
我发现很多用户制作 1300px x 650px 和 jpg/png 格式的图像。
添加所有标签后，应验证它们 HERE
Facebook OG 有更多选项，但一般如下：
<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">
<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->
Facebook 推荐图片的特定比例，文件大小限制为 8Mb。为了与 Twitter 卡片保持相似的图像，我建议尺寸为 1240 像素 x 650 像素和 jpg/png 格式。 Facebook 和 twitter 不接受 svg...
我发现一些全球品牌在他们的网站上使用这个标签。一个尺寸为 150x150 像素，格式为 png。浏览器可能会使用此图片显示在搜索结果中。
<meta name="thumbnail" content="path/to/image/thumb-150x150.png">
Real Favicon Generator 还包括 Microsoft favicons。 MS-application 还有许多其他元标记可以优化页面和显示图像等其他信息。这个话题也值得一读。
我希望这对某人有用，并扩展了网站品牌化的主题。
几周前我遇到了完全相同的问题。在 Internet 上很难找到关于网站图标的可靠 up-to-date 信息。事实上 MDN and W3C 都 link 到维基百科以获取有关网站图标的更多信息。然而，维基百科的文章很短而且帮助不大。我花了几个小时研究现代浏览器的最佳图标是什么。
这是我学到的：
没有“一个文件可以解决所有问题”的解决方案。但是，对于现代浏览器来说，其实并不需要那么多。
- 浏览器中的标准网站图标大小仍然是 16x16 点，对应于高分辨率屏幕上的 32x32 像素。
- 没有必要在您的根目录中包含
favicon.ico文件，除非您想要支持 IE 10 or older。 - SVG 会很好，但并非所有浏览器都支持。所以最简单的解决方案仍然是 use PNG images.
- Google 明确表示 they don't support 16x16 or 32x32 icons。对于 Google 结果，您需要至少包含一个图标，该图标是 48x48 的倍数。
- 当用户将您的网站固定在他们 phone 的启动屏幕上时，您需要 192x192 图标用于 Android、167x167 用于 iPad 和 180x180 用于 iPhone（而 link tags for iPhone are special — 见下文）
- 理论上，您可以提供单个 192x192（或 48 的更高倍数）图标，该图标会被浏览器和所有其他服务缩小，但特别是对于 16x16 点版本，这些缩放结果可能会比当您使用专业的图像编辑器自行缩放或什至为这些低分辨率图标提供特殊版本时，您会得到什么。
- 您也可以添加一个 web manifest file that includes more meta info like theme colors. But that is only supported on Android 并带来很少的好处，除非您真的希望很大一部分用户将您的网站固定在他们的主屏幕上（以我的拙见，这对大多数网站来说不太可能） .
我的建议是在您的 header 中使用以下内容：
<!-- For all browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<!-- For Google and Android -->
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
<!-- For iPad -->
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
<!-- For iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">
我还写了一篇blog post，其中有更多的散文和更多的背景信息。