Favicon Standard-2021-SVG，ICO，PNG和尺寸? [英] Favicon Standard - 2021 - svg, ico, png and dimensions?

问题描述

从2021年开始，应该使用哪些网站图标尺寸，文件格式和元/链接标签?其中包括Apple图标，Windows，Android和当今人们使用的其他设备.

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

我使用Opera，可以看到它支持svg格式.是当今使用svg的最佳解决方案吗?是否有一个文件适合所有"选项?

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

我一直在浏览许多网站，并检查了不同的网站图标生成器".他们都已经岁岁了，并且大多使用png文件.

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

例如:ico和svg应该使用什么代码?

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

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

或者如果ico包含更多尺寸，是否应该指定尺寸?我找不到一个好的答案.

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

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

推荐答案

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

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.

没有一刀切"的图标.您无法创建单个SVG图标并期望它可以在任何地方使用.

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

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

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.

因此，我建议您避免使用单个图标.在可能的情况下，而不是分别针对每个平台(并非总是如此).

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

iOS Safari期望使用触摸图标.截至今天，这是一个180x180的PNG图片.此图像不应使用透明度，并且添加到主屏幕后其角将自动变圆.声明为:

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:

<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浏览器依靠 Web应用清单.尽管此清单并非专用于Android Chrome，但它目前是其主要支持者.因此，目前，将Web App Manifest中的图标用于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.

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

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.

Android希望使用192x192 PNG图标，允许并鼓励透明.

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

清单文件声明为:

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

Edge和IE 12

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

Edge and IE 12

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

文件和背景色声明为:

<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文件中选择适当的图标(此格式可以嵌入图标的多个版本)，从而导致错误地使用了低分辨率的图标.

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.ico file, 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.

可能会尝试完全删除旧的 favicon.ico .尽管我想在RFG上取得飞跃，但我没有进行必要的测试来评估对旧浏览器的影响.

One could be tempted to drop the old favicon.ico entirely. 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 嵌入了16x16、32x32和48x48图标:

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

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

其他浏览器

其他浏览器可能具有专用图标.例如， Opera的Coast正在寻找一个228x228的图标.关注这些浏览器的需求并不明显.当找不到他们的"图标时，他们通常会使用触摸图标或其他图标.

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.

正如一开始所宣布的，这正是 RealFaviconGenerator 创建的.

As announced at the beginning, this is exactly what RealFaviconGenerator creates.

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