Favicon Standard-2022-SVG、ICO、PNG和Dimension？ [英] Favicon Standard - 2022 - svg, ico, png and dimensions?

问题描述

自2022年起，应使用哪些常用图标尺寸、文件格式和元/链接标记？这包括苹果图标、Windows、Android和人们今天使用的其他设备。

我使用Opera，可以看到它支持SVG格式。现在使用SVG是不是最好的解决方案？是否有任何选项"；一个文件适用于所有"；？

我浏览了很多网站，检查了不同的&Favicon Generators&Quot；。它们都已使用多年，主要使用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">

请提供应使用哪些收藏夹图标的尺寸、文件格式和元/链接标记。

推荐答案

免责声明：我是RealFaviconGenerator的作者，我希望它是最新的(主要是，见下文)。因此，如果此答案与RFG生成的内容匹配，请不要惊讶。

一刀切的神话

没有"一刀切"图标。您不能创建单个SVG图标并期望它在所有地方都适用。

从技术角度看，单个SVG图标是一件好事。但从UI和UX的角度来看，这不是理想的结果。比较iOS和Android。在iOS上，所有的主屏幕图标都是带圆角的正方形(iOS fills transparent regions of Touch icons with black)。在Android上，主屏图标通常使用非正方形和透明度(包括谷歌应用程序图标)。提交一个单点触控图标，Android Chrome就会使用它。但是您无法匹配Android icon guidelines，而专用图标可以。

所以我建议故意避免使用单个图标。如果可能，最好分别针对每个平台(情况并不总是如此)。

每个平台的图标、平台

iOS Safari

iOS Safari需要touch icon。到今天为止，这是一张180x180的PNG图像。此图像不应使用透明度，当添加到主屏幕时，其角将自动变圆。声明为：

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

多年来，该图标已成为许多浏览器的"默认高分辨率图标"。因此，当您添加到书签等时，您会在其他地方找到它。

Android Chrome

Android Chrome依赖Web App Manifest虽然这个清单不是专门针对Android Chrome的，但它目前是它的主要支持者。因此，目前仍然可以很安全地认为Web App Manifest中的图标适用于Android Chrome。

顾名思义，Web App Manifest是针对Web应用程序的。但任何网站都可以将其用作引用某些图标的方式。

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图标。此外，某些浏览器无法在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。关注这些浏览器的必要性并不明显。当找不到"他们的"图标时，他们通常使用触摸图标或其他图标。

结论

如开头所述，这正是RealFaviconGenerator创建的内容。

这篇关于Favicon Standard-2022-SVG、ICO、PNG和Dimension？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！