Html Favicon Standard - 2020 - svg、ico、png 和尺寸？

Favicon Standard - 2020 - svg, ico, png and dimensions?

提问by Jakub Muda

What favicon dimensions, file formats and meta/link tags should be used as of 2020? This includes apple icon, windows, android and other devices people use today.

到 2020 年应该使用哪些网站图标尺寸、文件格式和元/链接标签？这包括苹果图标、windows、android 和人们今天使用的其他设备。

I use Opera and I can see it supports svg format. Is it the best solution to use svg nowadays? Is there any option "one file fits all"?

我使用 Opera，我可以看到它支持 svg 格式。它是当今使用 svg 的最佳解决方案吗？有没有“一个文件适合所有人”的选项？

I've been browsing many websites and checked different "favicon generators". All of them are years old and work mostly with png files.

我浏览了许多网站并检查了不同的“图标生成器”。它们都有多年历史，主要使用 png 文件。

For example:What code should be used for ico and svg?

例如：ico 和 svg 应该使用什么代码？

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

or should dimensions be specified if ico contains more sizes? I didn't find one good answer.

或者如果 ico 包含更多尺寸，是否应该指定尺寸？我没有找到一个好的答案。

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

Please provide dimensions, file formats and meta/link tags of what favicons should be used.

请提供应使用哪些网站图标的尺寸、文件格式和元/链接标签。

回答by philippe_b

Disclaimer: I'm the author of RealFaviconGenerator, which I expect to be up-to-date (mostly, see below). So don't be surprised if this answer matches what RFG generates.

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

The one-size-fits-all myth

一刀切的神话

There is no "one size fits all" icon. You can't create a single SVG icon and expect it to work everywhere.

没有“一刀切”图标。您不能创建单个 SVG 图标并期望它在任何地方都能使用。

From a technical point of view, a single SVG icon would be a good thing. But from a UI and UX point of view, this is not a desirable outcome. Compare iOS and Android. On iOS, all home screen icons are squares with rounded corners (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, whereas a dedicated icon could.

从技术角度来看，单个 SVG 图标将是一件好事。但从 UI 和 UX 的角度来看，这不是一个理想的结果。比较 iOS 和 Android。在 iOS 上，所有主屏幕图标都是带圆角的正方形（iOS 用黑色填充 Touch 图标的透明区域）。在 Android 上，主屏幕图标通常使用非方形和透明度（包括 Google 应用程序图标）。提交一个触摸图标，Android Chrome 就会使用它。但是您将无法匹配Android 图标指南，而专用图标则可以。

So I advice to deliberately avoid using a single icon. Rather target each platform individually, when possible (this is not always the case).

所以我建议刻意避免使用单个图标。而是尽可能单独针对每个平台（情况并非总是如此）。

Icons, platform per platform

图标，每个平台的平台

iOS Safari

iOS Safari

iOS Safari expects a touch icon. As of today, this is a 180x180 PNG image. This image should not use transparency and its corners will be automatically rounded when added to home screen. Declared with:

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

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

Over the years, this icon has become the "default high resolution icon" for many browsers. So you will find it elsewhere, when adding to bookmark, etc.

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

Android Chrome

安卓浏览器

Android Chrome relies on the Web App Manifest. Although this manifest is not dedicated to Android Chrome, it is currently its main supporter. So at the moment, it is still quite safe to consider the icons from the Web App Manifest to be for Android Chrome.

Android Chrome 依赖于Web App Manifest。尽管此清单并非专用于 Android Chrome，但它目前是其主要支持者。因此，目前，将 Web App Manifest 中的图标视为适用于 Android Chrome 仍然是非常安全的。

As the name suggests, the Web App Manifest is for, well, web apps. But any web site can use it as a way to reference some icons.

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

Android expects a 192x192 PNG icon, transparency allowed and encouraged.

Android 需要 192x192 PNG 图标，允许并鼓励透明度。

The manifest is declared with:

清单声明为：

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

Edge and IE 12

Edge 和 IE 12

Microsoft introduced the browserconfig, an XML document which lists various icons that fit the Metro UI.

Microsoft 引入了browserconfig，这是一个 XML 文档，其中列出了适合 Metro UI 的各种图标。

The file and background colorare declared with:

文件和背景颜色声明为：

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

Classic desktop browsers

经典桌面浏览器

Windows/macOS Chrome, Windows/macOS Firefox, Safari, IE... This is were things are a little more blurry. Historically, there was a single favicon.icofile, still supported. However, most recent browsers rather pick PNG icons, which are lighter. Plus some browsers are not able to select the proper icon in the ICO file (this format can embed several versions of an icon), leading a low resolution icon being wrongly used.

Windows/macOS Chrome, Windows/macOS Firefox, Safari, IE ......这些东西有点模糊。从历史上看，favicon.ico仍然支持单个文件。然而，最近的浏览器更倾向于选择更轻的 PNG 图标。此外，有些浏览器无法在 ICO 文件中选择正确的图标（这种格式可以嵌入多个版本的图标），导致错误使用低分辨率图标。

One could be tempted to drop the old favicon.icoentirely. Although I would like to make this leap in RFG, I didn't run the necessary tests to evaluate the impact on the old browsers.

人们可能会想favicon.ico完全放弃旧的。虽然我想在 RFG 中实现这一飞跃，但我没有运行必要的测试来评估对旧浏览器的影响。

Thus the combo I still recommend today, with favicon.icoembedding 16x16, 32x32 and 48x48 icons:

因此，我今天仍然推荐的组合，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">

Other browsers

其它浏览器

Other browsers may have dedicated icons. For example Coast by Opera is looking for a 228x228 icon. The need to focus on these browsers is not obvious. They usually use the touch icon or other icons when they cannot find "their" icon.

其他浏览器可能有专用图标。例如，Coast by Opera 正在寻找一个 228x228 的图标。关注这些浏览器的必要性并不明显。当他们找不到“他们的”图标时，他们通常会使用触摸图标或其他图标。

Conclusion

结论

As announced at the beginning, this is exactly what RealFaviconGeneratorcreates.

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

回答by Jakub Muda

It is also worth mentioning that together with favicon some other tags should be added like OG tags, Twitter cards or MS-application. It all serves the same purpose - visual identification of your brand and should also be included.

还值得一提的是，应与 favicon 一起添加一些其他标签，例如 OG 标签、Twitter 卡片或 MS 应用程序。这一切都用于相同的目的 - 您的品牌的视觉识别，也应该包括在内。

Twitter card can be found HERE

推特卡可以在这里找到

I add following tags

我添加以下标签

<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">

I found that many users make images 1300px by 650px and jpg/png formats.

我发现许多用户制作 1300px x 650px 和 jpg/png 格式的图像。

After adding all tags they should be validated HERE

添加所有标签后，应在此处对其进行验证

---

---

Facebook OG has more option but general are as follows:

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 recommend specific ratio of the image and the file size is limited to 8Mb. To keep similar images with twitter card I recommend dimensions 1240px by 650px and jpg/png format. Facebook and twitter do not accept svg...

Facebook 推荐特定比例的图片，文件大小限制为 8Mb。为了与推特卡保持相似的图像，我建议尺寸为 1240px x 650px 和 jpg/png 格式。Facebook 和 Twitter 不接受 svg...

---

---

I found that some global brands use this tag on their websites. One had dimensions 150x150 pixels and png format. This image may be used by browsers to display in search results.

我发现一些全球品牌在他们的网站上使用这个标签。一个尺寸为 150x150 像素和 png 格式。浏览器可以使用此图像在搜索结果中显示。

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

---

---

Real Favicon Generator covers also Microsoft favicons. There are many other meta tags for MS-application to optimize bow the page and other infos such as image are displayed. This topic is also worth reading.

Real Favicon Generator 还涵盖 Microsoft 网站图标。MS 应用程序还有许多其他元标记来优化页面和其他信息（例如图像）的显示。这个话题也值得一读。

I hope this is usefull for someone and expands the topic of branding your website.

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