一个网站图标必须是32×32或16×16吗？

Question

一个网站图标必须是32×32或16×16吗？

favicon

835

我希望能够使用一张图片作为常规favicon和iPhone/iPad友好的favicon。

这种做法可行吗？如果将一个iPad友好的72×72 PNG链接到常规浏览器的favicon上，它会被自动缩放吗？还是说我必须使用单独的16×16或32×32图标？

- Alex G

1

考虑到这个问题的答案可能会不断发展，建议查阅一个经常更新的存储库，以获取有关该主题的最新信息。更好的方法是，在发现新信息时提交拉取请求。以下是在 GitHub 上搜索一些优秀候选项的链接：https://github.com/search?o=desc&q=favicon&s=stars&type=Repositories - Kay V

21个回答

623

简短回答

Favicon应该是一组16x16、32x32和48x48的ICO格式图片。ICO格式与PNG格式不同。不支持非正方形图片。

为了生成Favicon，出于许多原因，在此建议您使用favicon生成器。完全透明：我是这个网站的作者。

长而全面的回答

Favicon必须是正方形。桌面浏览器和苹果iOS不支持非正方形图标。

Favicon由几个文件支持：

一个favicon.ico图标。
其他一些PNG图标。

为了在桌面浏览器（Windows/IE、MacOS/Safari等）中获得最佳结果，需要结合两种类型的图标。

`favicon.ico`

虽然所有桌面浏览器都可以处理这个图标，但它主要是为旧版IE设计的。

ICO格式与PNG格式不同。这一点很棘手，因为有些浏览器足够聪明，能正确处理PNG图片，即使它被错误地重命名为ICO扩展名。

ICO文件可以包含多个图片，微软建议在favicon.ico中放置16x16、32x32和48x48版本的图标。例如，IE将使用16x16版本作为地址栏图标，而使用32x32版本作为任务栏快捷方式。

使用以下代码声明网站图标：

<link rel="icon" href="/path/to/icons/favicon.ico">

然而，建议将favicon.ico文件放置在网站的根目录中,或者完全不声明该文件，让现代浏览器自行选择PNG图标。

PNG图标

现代桌面浏览器（IE11、最新版本的Chrome、Firefox等）更喜欢使用PNG图标。通常期望的尺寸为16x16、32x32和“尽可能大”。例如，如果196x196是MacOS/Safari能找到的最大图标，则会使用该图标。

推荐的尺寸是多少？请选择您喜欢的平台：

PNG图标声明如下：

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

注意：Firefox不支持“sizes”属性，会使用它找到的最后一个PNG图标。请确保将32x32的图片声明为最后一个：这对于Firefox来说已经足够好了，并且可以防止它下载不需要的大图片。编辑：2016年修复。

另外请注意：Chrome不支持“sizes”属性，倾向于加载所有声明的图标。最好不要声明太多图标。编辑：2018年修复。

移动平台：

本问题是关于桌面网站图标，因此无需深入探讨此主题。

苹果为iOS平台定义了触摸图标。iOS不支持非正方形图标。它只是重新缩放非正方形图片使其成为正方形（可以看看Kioskea的例子）。

Android Chrome依赖于苹果触摸图标，并且定义了一个192x192的PNG图标。

微软定义了磁贴图片和browserconfig.xml文件。

结论

生成一个在所有地方都能正常使用的网站图标相当复杂。我建议您使用这个 favicon生成器。完全透明：我是这个网站的作者。

- philippe_b

14

XSLT用户的小学问：请关闭您的标签 :) <link /> - Nathan Hornby

9

所以您是在使用“自闭合标记”？ :) 严肃地说，自闭合标签用于XHTML（和XSLT，所以您有权抱怨），但所有其他版本（如HTML5）都禁止它们。更多信息请参见：https://github.com/RealFaviconGenerator/realfavicongenerator/issues/62 - philippe_b

8

我同意其他人的观点：无论是否必需，正确关闭标签都是有效和语义化的。如果添加斜杠可以增加兼容性而没有任何缺点，那么我认为没有理由省略它，就像添加</div>和</form>一样，即使现代浏览器通常不需要它；） - Nathan Hornby

2

感谢@Sebastian！正如我多次观察到的那样，FF（Firefox）几乎是随机选择图标的。请参阅realfavicongenerator.net/favicon_compatibility。您还可以运行兼容性测试（http://realfavicongenerator.net/favicon_compatibility_test）：在4个测试期间，FF应始终显示相同的图标。但这可能不是情况。 - philippe_b

5

买入卖弄学问：<link/> 是有效的 __XHTML__，但不是 __HTML__。末尾的空格只对无法正确处理 /> 的旧版IE浏览器有帮助，而在任何XML规范中都不是必需的。HTML5有两种形式。只有当文档作为XML文档提供时，XHTML5才是有效的。在HTML5或任何其他非XHTML变体中包含闭合斜杠是无效的，但被所有浏览器所容忍。考虑到IE从未能够正确处理适当提供的XHTML，因此成为将其作为HTML提供的标准做法，但这意味着关闭斜杠因此不合适。 - Manngo

显示剩余10条评论

159

我没有看到这里列出任何最新的信息，所以我来回答：

如果您希望您的图标在任何地方都看起来很棒，那么仅仅使用两个favicon是不够的。请参考以下尺寸:

16 x 16 – 浏览器标准尺寸
24 x 24 – IE9用户界面固定网站图标大小
32 x 32 – IE新页面选项卡、Windows 7+任务栏按钮、Safari“阅读列表”侧边栏
48 x 48 – Windows 网站
57 x 57 – iPod touch，iPhone 直到3G
60 x 60 – iPhone touch 直到iOS7
64 x 64 – Windows 网站，Safari“阅读列表”侧边栏中HiDPI / Retina
70 x 70 – Win 8.1 Metro 平铺瓷砖
72 x 72 – iPad touch 直到iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone retina touch 直到iOS6
120 x 120 – iPhone retina touch iOS7
128 x 128 – Chrome Web Store应用程序，Android
144 x 144 – 固定的IE10 Metro平铺瓷砖，iPad retina 直到iOS6
150 x 150 – Win 8.1 Metro 平铺瓷砖
152 x 152 – iPad retina touch iOS7
196 x 196 – Android Chrome
310 x 150 – Win 8.1 宽 Metro 平铺瓷砖
310 x 310 – Win 8.1 Metro 平铺瓷砖

- Matt

12

这个列表有参考资料吗？ - Abdulhameed

@Abdulhameed，之前有一段内容，但因为已经失效而被编辑掉了（不幸的是，该页面也没有在Wayback Machine上）。 - Jasper

这个列表还有效吗？我有一种感觉它已经过时了。 - Greeso

@Greeso 嗯... iOS6 和 iOS7 在列表上... 不知道。哈哈哈 - George

121

感谢faviconit，使得2021年的标准更加完善

我使用faviconit.com以获得最佳的浏览器和设备支持。您上传一张图片，该网站会为您提供代码、转换后的图像和browserconfig文件。

我们可以手动上传一个16x16的网站图标，它可能会在几乎所有浏览器中显示。

但是，当您将其标记为智能手机或平板电脑上的收藏夹时，我们需要更大的图像（60x60到144x144）。

假设我们的用户在桌面上创建了一个快捷方式。那么，196x196看起来更好！

下面是faviconit给出的示例代码和所有转换后的图像：

<!-- place this in your <head></head> -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">

自从Windows 8以来

但这还不是全部。自从Windows 8以来，我们可以使用磁贴创建访问网站的快捷方式！

<!-- place this in your <head></head> -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">

浏览器配置文件（Browserconfig.xml）

上传一个名为browserconfig.xml的文件，以启用Windows 8以上版本中的磁贴功能。

<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/favicon-70.png"/>
            <square150x150logo src="/favicon-150.png"/>
            <square310x310logo src="/favicon-310.png"/>
            <TileColor>#FFFFFF</TileColor>
        </tile>
    </msapplication>
</browserconfig>

- Derk Jan Speelman

2

我对这里所说的很多内容表示赞同，但是faviconit网站在顶部声明“Faviconit服务将于2023年10月3日终止。”而且它不支持HTTPS，所以并不完全符合网络标准。你可能要考虑删除这个答案。 - undefined

109

16x16像素，*.ico格式。

- Mark Hurd

35

我相信现在主要的浏览器都支持 GIF、JPG 和 PNG 格式，以及 .ico 格式。 - ceejayoz

21

Internet Explorer不支持（至少到版本8为止）。这是相当重要的。请参阅http://msdn.microsoft.com/en-us/library/ms537656%28VS.85%29.aspx（向下滚动到故障排除部分）。 - Quentin

9

顺便说一下，如今在视网膜上看16x16的东西看起来很糟糕。 - Ken Barber

3

iOS 设备应该通过使用指定更加“视网膜友好”的图标的元标签来进行维护。 - phatskat

@phatskat 但是也有带视网膜的MacBook。 - LasagnaAndroid

1

一个非常酷的生成所有相关网站图标的服务是realfavicongenerator。从260x260像素的图像开始，您可以获得所需的一切内容，包括正确使用它们的标记。 - marnusw

85

我不确定浏览器是否会如何缩放大图标，但 W3C 建议采用以下格式¹:

您选择的图片格式必须是 16x16 像素或 32x32 像素，使用 8 位或 24 位色深。图片的格式必须是 PNG（W3C 标准）、GIF 或 ICO。

¹ w3c.org：如何将网站图标添加到您的网站中（正在开发中的草案）.

- Daniel Vassallo

回到2006年，我得出了类似的结论（在“Favicon Primer”（2006年4月；由hakre编写）），但不知道那个2005年的W3C材料（是的，搜索+阅读有帮助：））。感谢您的总结。那时我写了and而不是or，但那也是关于4位颜色的。 - hakre

3

自2005年以来一直是草案？O.o - mcont

9

现在应该使用HTML5标准来替代这种用法。它对图标的尺寸没有限制，并提供了一个32768x32768像素的示例。 - rhgb

1

@rhgb 谢谢！我一直很困惑，为什么在 [current year] 我仍然需要处理一些烦人的限制，而只用 CSS 就可以做出惊人的东西。我差点错过了你的答案。那我就使用我想要的任何东西，如果有什么不支持它，那就是他们的问题，按照标准来。 - user11877195

2020年了，这仍然只是一个草稿。 - Naeio

70

最简单的解决方案（2021年）

只使用一个SVG图像

如果您不关心支持Safari，您可以使用单个SVG图标：

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

只需使用一个PNG图像

如果您想要完整支持*，您应将以下内容添加到文档的头部：

<link rel="shortcut icon" type="image/png" href="/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="/img/icon-192x192.png">
<link rel="apple-touch-icon" href="/img/icon-192x192.png">

最后一个链接是苹果（主屏幕），第二个是安卓（主屏幕），第一个是其余平台。

图标大小与安卓主屏幕使用的大小完全一致。苹果主屏幕图标大小为60px（3倍），因此为180px，并将缩小比例。其他平台使用默认的快捷方式图标，也将被缩小。

*请注意，此解决方案不支持 Windows 8/10 中的“磁贴”，但它支持快捷方式、书签和浏览器选项卡中的图像。

- Mr. Hugo

1

糟糕的答案。这会减慢您网站的加载速度。用户将不得不下载一个大图像，而在大多数情况下它会被缩小显示。只有当用户将其添加到主屏幕时，才需要那个尺寸。 - Gaurav

19

@Gaurav 嗯......我在https://www.usecue.com/img/icon-196x196.png上的196x196 png图像只有950字节，而你在https://assets.ember-twiddle.com/favicon-c53354b6e35d20e40c24c57b2504c321.ico上的16x16 .ico则是1050字节。 - Mr. Hugo

1

这是一些很棒的PNG压缩，但并不典型。 - Gaurav

是的，你说得对。很好的观点。请小心使用这个解决方案！TinyPNG是一个用于压缩PNG的伟大/简单工具。 - Mr. Hugo

69

实际上，要使您的网站图标在所有浏览器中正常工作，您需要添加超过10个文件，并且格式和大小正确。

我和我的朋友为此创建了一个应用程序！您可以在faviconit.com找到它。

我们做了这件事，以便人们不必手动创建所有这些图像和正确的标记，我曾经非常苦恼于创建所有这些图像！

- PedroHCan

31

维基百科这样说：

此外，这些图标文件可以是16×16或32×32像素大小，并且可以是8位或24位彩色深度（请注意，GIF文件有一个有限的256种颜色调色板条目）。

我认为最好的方式是使用32x32像素的gif图标，并在不同的浏览器上进行测试。

- Otto Allmendinger

2

类似的内容也可以在W3.org上找到：http://www.w3.org/2005/10/howto-favicon 他们还指定了图标的格式：图像的格式必须是PNG（W3C标准）、GIF或ICO之一。 - GazB

18

现代浏览器的简单解决方案（2022）

使用SVG网站图标：

<link rel="icon" href="/icon.svg">

主流浏览器支持（除了2021年的Safari浏览器），并且符合HTML Living Standard
仅需一行简短的代码，易于记忆
其他属性如type和sizes并非必要
与PNG相比，在任何大小下缩放效果更佳
让我们用唯一的icon结束各种尺寸的favicon混乱...

- collimarco

5

针对苹果公司而言，让我们请求他们遵循标准……你可以通过发送推文的方式向 @webkit 提出功能请求（在他们的错误跟踪器上建议了这样做）。 - collimarco

2

是的。让网站图标混乱现象结束吧。 - djvg

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

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

- philippe_b · Accepted Answer

2020年更新：针对16x16像素和32x32像素的图标，建议使用32x32像素的图标，跳过16x16。所有现代浏览器和设备都支持32x32像素的图标。该图标通常会被放大至高达192x192像素（假设没有更大的尺寸可用或系统无法识别它们）。从超低分辨率进行放大会产生明显的影响，因此最好将32x32像素视为最小基线。

对于IE浏览器，微软建议在favicon.ico文件中打包16x16像素、32x32像素和48x48像素的图标。

对于iOS，苹果建议使用特定的文件名和分辨率，对于运行iOS 8的最新设备，最大分辨率为180x180像素。

Android Chrome主要使用清单(manifest)，并依赖于苹果触摸图标(touch icon)。

Windows 8.0上的IE10需要PNG图片和背景颜色，而Windows 8.1和10上的IE11则接受在名为browserconfig.xml的专用XML文件中声明的多个PNG图片。

Safari for Mac OS X El Capitan引入了固定标签的SVG图标。

其他一些平台则寻找包含不同分辨率PNG文件，如Google TV的96x96图片或Opera Coast的228x228图片等。

查看这个favicon图片列表以获得完整参考。

简而言之：这个favicon生成器可以一次性生成所有这些文件。生成器也可以作为WordPress插件实现。免责声明：我是这个网站的作者。