明星标准 -2022-svg，ico，png 和尺寸？

到2022年应该使用什么样的图标尺寸、文件格式和 meta/link 标签？这包括苹果图标，窗口，安卓和其他人们今天使用的设备。

我使用 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">

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

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

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

108219 次浏览
小开
最佳答案

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

一刀切的流言

没有“放之四海而皆准”的图标。您不能创建一个单独的 SVG 图标并期望它能在任何地方工作。

从技术角度来看，单个 SVG 图标将是一件好事。但是从用户界面和用户体验的角度来看，这不是一个理想的结果。比较 iOS 和 Android。在 iOS 系统中，所有的主屏幕图标都是带圆角的正方形(IOS 用黑色填充 Touch 图标的透明区域)。在 Android 上，主屏幕图标经常使用非正方形和透明度(包括谷歌应用程序图标)。提交一个简单的触摸图标，Android Chrome 就会使用它。但是您将无法匹配 Android 图标指南，而专用图标可以。

因此，我建议有意识地避免使用单个图标。在可能的情况下，应该针对每个平台单独开发(这种情况并不总是如此)。

图标，每个平台的平台

IOS Safari

IOS Safari 期望 触摸图标。到今天为止，这是一个180x180的 PNG 图像。这个图像不应该使用透明度和它的角落将自动圆角时，添加到主屏幕。声明:

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

多年来，这个图标已经成为许多浏览器的“默认高分辨率图标”。所以你可以在其他地方找到它，比如添加书签等等。

Android Chrome

Android Chrome 依赖于 网络应用程序清单。尽管这份清单并不是针对 Android Chrome 的，但它目前是其主要支持者。所以现在，考虑一下 Web 应用程序清单中的图标是否适用于 Android Chrome 仍然是相当安全的。

顾名思义，网络应用程序清单是为网络应用程序准备的。但是任何网站都可以使用它来引用一些图标。

Android 希望有一个192x192的 PNG 图标，允许并鼓励透明。

清单声明如下:

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

Edge 和 IE 12

微软推出了 Browserconfig (浏览器配置)，这是一个 XML 文档，其中列出了适合 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 文件中选择合适的图标(这种格式可以嵌入图标的多个版本) ，导致错误地使用低分辨率图标。

人们可能会试图完全放弃旧的 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 正在寻找一个228x228的图标。关注这些浏览器的必要性并不明显。他们通常使用触摸图标或其他图标时，他们无法找到“他们的”图标。

结论

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

小开

值得一提的是，除了图标之外，还应该添加其他一些标签，如 OG 标签、 Twitter 卡片或 MS-application。它们都是为了同样的目的——视觉识别你的品牌，并且也应该包括在内。

Twitter 卡可以找到 给你

我添加以下标记

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

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

在添加所有标记之后，应该验证 给你

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 卡我建议尺寸1240px 的650px 和 jpg/png 格式。Facebook 和 Twitter 不接受 svg..。

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

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

真正的收藏夹生成器也涵盖微软的收藏夹。还有许多其他元标签的 MS-应用程序优化弓的页面和其他信息，如图像显示。这个话题也值得一读。

我希望这是有用的人和扩大品牌的话题你的网站。

小开

几周前我也有同样的问题。令人惊讶的是，在互联网上很难找到关于图标的可靠的最新信息。事实上，MDN和 W3C都链接到维基百科以获得更多关于图标的信息。然而，维基百科的这篇文章非常简短，没有多大帮助。我花了几个小时研究现代浏览器的最佳图标是什么。

这就是我学到的:

没有“一个文件统治所有文件”的解决方案。然而，对于现代浏览器来说，实际上并不需要这么多。

  1. 浏览器中的标准图标大小仍然是16x16点，相当于高分辨率屏幕上的32x32像素。
  2. 除非您希望支持 IE 10或以上，否则不需要在根目录中包含 favicon.ico文件。
  3. SVG 是个不错的选择，但是并不是所有浏览器都支持 SVG，所以最简单的解决方案还是 使用 PNG 图像。
  4. 谷歌明确表示 它们不支持16x16或32x32图标。对于 Google 搜索结果，您需要至少包含一个48x48倍的图标。
  5. 当用户把你的网站钉在他们手机的启动屏幕上时，你需要一个192x192的 Android 图标，167x167的 iPad 图标和180x180的 iPhone 图标(而 IPhone 的链接标签是特殊的ー见下文)
  6. 理论上，你可以提供一个单一的192x192(或更高倍数的48)图标，它将被浏览器和所有其他服务缩放，但特别是对于16x16点版本，这些缩放结果可能会比你自己用专业图像编辑器缩放它时得到的结果更糟糕，甚至为这些低分辨率图标提供特殊版本。
  7. 您还可以添加一个包含更多元信息(如主题颜色)的 网络清单文件。但是这是 只有安卓系统支持，除非你真的期望你的用户把你的网站固定在他们的主屏幕上(在我看来，这对大多数网站来说是不太可能的) ，否则它几乎没有带来什么好处。

我的建议是在你的标题中使用以下内容:

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

我也写了一个 博客文章与一点散文和更多的背景信息。


提交答案