Favicon Standard-2019-svg，ico，png和尺寸？

Posted 2021-04-12

截至2019年应使用哪些网站图标尺寸，文件格式和元/链接标签？这包括Apple图标，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">

请提供应该使用的图标的尺寸，文件格式和元/链接标签。

答案

免责声明：我是RealFaviconGenerator的作者，我希望它是最新的（大部分见下文）。因此，如果此答案与RFG生成的内容相匹配，请不要感到惊讶。

千篇一律的神话

没有“一刀切”的图标。您无法创建单个SVG图标，并希望它可以在任何地方使用。

从技术角度来看，单个SVG图标将是一件好事。但是从UI和UX的角度来看，这不是理想的结果。比较ios和Android。在iOS上，所有主屏幕图标都是带有圆角的正方形（iOS fills transparent regions of Touch icons with black）。在Android上，主屏幕图标通常使用非正方形的形状和透明度（包括Google应用程序图标）。提交一个触摸图标，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一起添加其他一些标签，例如OG标签，Twitter卡或MS应用程序。所有这些功能都具有相同的目的-视觉识别您的品牌，也应包括在内。

可以找到Twitter卡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。要使用推特卡保持相似的图像，我建议尺寸为1240px x 650px和jpg / png格式。 Facebook和Twitter不接受svg ...

---

[我发现一些全球品牌在其网站上使用此标签。一种尺寸为150x150像素和png格式。浏览器可能会使用此图像显示搜索结果。

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

---

Real Favicon Generator还包括Microsoft图标。还有许多其他用于MS应用程序的meta标签可优化弓形页面，并显示其他信息，例如图像。该主题也值得阅读。

我希望这对某人有用，并扩展了网站品牌的主题。