这些图标中哪些是网站所需的？

Question

这些图标中哪些是网站所需的？

8

我正在使用这个在线网站图标生成器来为我的网站创建一个网站图标，该工具提供了许多图标，不仅仅是网站图标。我很好奇你认为哪些是网站必须的图标，哪些是不必要的:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

- san671

在我看来，你应该把它们全部都拿走。请参考https://dev59.com/xW865IYBdhLWcg3wCqHI#26807004 - Irshu

3个回答

1

你希望在这些标准尺寸中至少拥有ICO图片：16x16、32x32和48x48的ICO格式图片。但是，在某些情况下，你可能希望拥有高达196x196的图片。我建议保留所有尺寸，以便每个客户端配置都可以选择其首选项。

参考文献：Ref1 Ref2 Ref3

- Manu

0

如果您想将其限制为仅必要的内容，您可能需要考虑使用三个网站图标。

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

您可以选择其中之一，决定因素是大小，这会影响图标的质量。

- Vasili Syrakis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- philippe_b · Accepted Answer

除非您有特定的需求，否则您的网站应该支持所有主要平台：桌面浏览器、iOS Safari、Android Chrome等。

您提到的“在线图标生成器”是指RealFaviconGenerator吗？如果是这样，您可能想知道它正在进行一次巨大的重构，以产生一个极简的图标集。

虽然其输出仍处于测试阶段，但以下是输出结果：

一个单独的180x180 Touch图标。如果需要，iOS Safari会将其缩小。
一个manifest.json文件，用于Android Chrome，包含两个192x192和512x512的图标。
一个browserconfig.xml文件，用于Windows 8.1和10，包含一个图标。
Mac OS Safari的蒙版图标。
桌面浏览器的经典图标：favicon.ico和两个16x16和32x32的图标。其中一些图标可能会被删除。

最终，代码如下：

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#14b036">

如果您将文件放在根目录中，则不需要声明browserconfig.xml和favicon.ico。否则，您需要进行声明。

完整披露：我是RealFaviconGenerator的作者。