favicon必须是32x32或16x16吗？

Question

favicon必须是32x32或16x16吗？

Ale*_*x G 668 favicon

我想使用单个图像作为常规的图标和iPhone/iPad友好的图标.

这可能吗？如果链接到常规浏览器图标,iPad友好的72x72 PNG会不会缩放？或者我是否必须使用单独的16x16或32x32图像？

Answer 1

phi*_*e_b 1392

对于IE,Microsoft建议在favicon.ico文件中打包16x16,32x32和48x48.

对于iOS,Apple建议使用特定的文件名和分辨率,对于运行iOS 8的最新设备,最多为180x180.

Android Chrome主要使用清单,也依赖于Apple touch图标.

Windows 8.0上的IE 10需要PNG图片和背景颜色,Windows 8.1和10上的IE 11接受在称为专用XML文件中声明的几张PNG图片browserconfig.xml.

用于Mac OS X的Safari El Capitan为固定标签引入了SVG图标.

其他一些平台寻找具有各种分辨率的PNG文件,例如Google TV的96x96图片或Opera Coast的228x228图片.

请查看此favicon图片列表以获取完整参考.

TLDR:这个favicon生成器可以一次生成所有这些文件.生成器也可以实现为WordPress插件.完全披露:我是本网站的作者.

您的favicon生成器应该获得比现在更高的搜索排名.所有比较流行的都是非常可怕的IMO.我会告诉我的网络开发同事你的网站! (422认同)
这比伟大更好.将来会为所有项目使用这台发电机! (20认同)
@BigMario说的是什么.太棒了,很棒的资源! (15认同)
"嗯,这是一个美味的发电机!" 谢谢你的资源 (5认同)
你的favicon发电机很棒.很高兴我找到了这篇文章.你刚刚节省了我很多时间. (4认同)
对于像网站图标这样简单的东西来说，标准太多了。不过发电机很棒。 (4认同)
太棒了!我已经用我的钱包投了票. (3认同)
将 2020 年编辑的 +1 更改为 -1。如果您想要任何其他尺寸的清晰图标，那么仅提供 32x32 绝对不行。在这些图像尺寸下放大或缩小，会产生令人难以置信的平庸结果。考虑到 16x16 是大多数桌面上的显示方式，这是一个至关重要的分辨率。如果您想捕捉其他一些流行的 DPI，也可以选择 20/24px。 (3认同)
Awsome favicon发电机!谢谢你的出色工作. (2认同)
Upvote只为您的神奇网站!这基本上是我用过的最好的图标生成器,它拥有一切!干得好,确实做得好! (2认同)
伟大的工具,并且在4年后的2018年仍然是最新的,适用于所有设备/浏览器.然而,我不得不重新设计我的16x16和32x32图标,270x270的自动调整大小(正如我们所料)并不完美:小细节是看不见的.如果我们可以上传多个图像会很好:16,32,64和270,这样它就可以直接生成一个完美的可下载包! (2认同)
@DanielDanielecki，我们可以启动 SVG，但 Apple（不仅仅是 Safari）仍然没有跟上技术进步：/ https://caniuse.com/link-icon-svg (2认同)

Answer 2

小智 128

我没有看到这里列出的任何最新信息,所以这里是:

现在回答这个问题,如果你希望你的图标在任何地方看起来都很棒,那么2个不会这样做.请参阅以下尺寸:

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触控至iOS7
64 x 64 - Windows网站,Safari阅读器列表边栏,HiDPI/Retina
70 x 70 - Win 8.1 Metro tile
72 x 72 - iPad触控至iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - iPhone视网膜触控至iOS6
120 x 120 - iPhone视网膜触控iOS7
128 x 128 - Chrome网上应用店应用程序,Android
144 x 144 - IE10 Metro图块适用于固定网站,iPad视网膜适用于iOS6
150 x 150 - Win 8.1 Metro tile
152 x 152 - iPad视网膜触摸iOS7
196 x 196 - Android Chrome
310 x 150 - Win 8.1宽地铁瓷砖
310 x 310 - Win 8.1 Metro瓷砖

这份清单有什么参考吗？ (10认同)

Answer 3

Dan*_*llo 79

我不确定浏览器是否/如何扩展大图标,但W3C建议以下¹:

您选择的图像格式必须为16x16像素或32x32像素,使用8位或24位颜色.图像格式必须是PNG(W3C标准),GIF或ICO之一.

¹ w3c.org:如何将Favicon添加到您的站点(开发中的草稿).

此用法现在应由[html5标准](http://www.w3.org/TR/html5/links.html#rel-icon)替换.它没有图标大小的限制,并提供了一个32768x32768图标的示例. (6认同)
这是自2005年以来的选秀？吴 (2认同)

Answer 4

Ped*_*Can 59

实际上,要使您的favicon在所有浏览器中正常工作,您必须以正确的大小和格式添加10个以上的文件.

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

我们这样做了,所以人们不必手工创建所有这些图像和正确的标签,创建所有这些用于惹恼我很多!

希望它能帮到你!

Answer 5

col*_*rco 19

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

使用SVG 图标：

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

Run Code Online (Sandbox Code Playgroud)

主要浏览器（2021 年 Safari 除外）和Living Standard 支持
只需 1 行代码，简单易记
其他属性如type和sizes不是必需的
与 PNG 相比，任何尺寸的缩放效果都更好
让我们结束对数百种不同尺寸的网站图标的疯狂......

对于 Apple，让我们要求他们遵守标准...您可以[发送一条推文](https://twitter.com/collimarco/status/1471499645675130888) 到“@webkit”来请求功能（他们建议在他们的错误跟踪器）。 (6认同)
是的。结束对网站图标的疯狂。 (2认同)

Answer 6

Bra*_*rad 6

您可以在同一文件中拥有多种尺寸的图标.我经常创建48,32 .ico和16像素的favicon(文件).您可以添加任何尺寸的图像.问题是,iPhone会使用ico文件吗？

ico也支持透明度,但我不确定它是否像PNG一样是alpha通道; 可能更像GIF,它在哪里或者它已经关闭.

ICO 使用 1 位 alpha 通道，而 PNG 与其他通道一样有 8 位。ICO 对于普通图标就足够了，但在某些情况下，由于这种差异，PNG 会更受欢迎。 (2认同)

归档时间：	15 年前
查看次数：	633908 次
最近记录：	6 年，1 月前