网站图标必须为32x32或16x16吗?


692

我想将单个图像用作常规图标和iPhone / iPad友好图标。

这可能吗?如果将iPad友好的72x72 PNG缩放为常规浏览器图标,是否会缩放?还是我必须使用单独的16x16或32x32图像?


看到我的答案stackoverflow.com/a/45301651/661584容易得多。可能有帮助。感谢
MemeDeveloper

Answers:


1448

对于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 TV96x96图片Opera Coast228x228图片

请参阅此收藏夹图片列表以获取完整参考。

TLDR:此网站图标生成器可以一次生成所有这些文件。该生成器还可以实现为WordPress插件。完全披露:我是本网站的作者。


136

我在这里看不到任何最新信息,所以去了:

现在要回答这个问题,如果您希望图标在任何地方都看起来很棒,那么将不使用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方块
152 x 152 – iPad视网膜触摸iOS7
196 x 196 –安卓Chrome
310 x 150 – Win 8.1宽Metro平铺
310 x 310 – Win 8.1 Metro平铺


8
这个清单有参考吗?
阿卜杜勒·哈密德

81

我不确定浏览器是否/如何缩放大图标,但是W3C建议以下1

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


1 w3c.org:如何将Favicon添加到您的站点(正在开发中)


早在2006年,我得出了类似的结论(在“ Favicon Primer”(2006年4月;由hakre撰写)中),但我不知道有关2005 W3C的资料(是,学习+阅读有帮助)。感谢您的总结。那个时候我写了不是,还是那是大约4bit的颜色。
hakre 2013年

2
自2005年以来就是草稿?Oo
mcont 2014年

7
现在,此用法应替换为html5标准。它对图标大小没有限制,并提供了一个带有32768x32768图标的示例。
rhgb

1
@rhgb谢谢!我一直在困惑,为什么[current year]当仅靠CSS就能完成的工作令人惊奇时,为什么我仍然需要处理一些胡说八道的限制,而我几乎错过了您的答案。我将随便使用我想要的任何东西,如果某些东西不支持它,按照标准,这就是他们的问题。
Sahsahae

63

实际上,要使您的收藏夹图标在所有浏览器中都能正常工作,您将必须添加10个以上大小正确的文件。

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

我们这样做是为了让人们不必手工创建所有这些图像和正确的标签,而创建所有这些图像通常会使我非常烦恼!


6

可以有图标的多种尺寸在同一个文件。我通常创建48、32 .ico和16像素的网站图标(文件)。您可以添加任何尺寸的图像。问题是,iPhone会使用ico文件吗?

ico还支持透明度,但是我不确定它是否是像PNG这样的alpha通道;可能更像是打开还是关闭的GIF。


1
我相信XP及更高版本支持RGBA图像的PNG格式(PNG本身?)格式。egressive.com/tutorial/…显示了如何使用GIMP在.ico文件中包含此类图像。
SamB

1
ICO使用1位alpha通道,而PNG与其他通道一样具有8位。ICO足以满足纯图标的需求,但在某些情况下,由于存在这种差异,PNG更为可取。
SteenSchütt2013年

SamB几乎是正确的,Time Sheep是一半。ICO支持将PNG图像嵌入其中,并且嵌入的PNG 必须是32位RGBA图像。
Cornstalks


2

网站图标不必是16x16或32x32。您可以创建一个80x80或100x100的图标,只需确保两个值的大小相同,并且显然不要将其设置得太大或太小即可,请选择一个合理的大小。


3
对不起,但是还有很多比您的答案所建议的更多的东西。请访问stackoverflow.com/a/45301651/661584并阅读(如果您喜欢)-它的疯狂之处。可能有帮助。谢谢
MemeDeveloper

1

恐怕您需要为每种分辨率使用单独的文件。广告系列监控器上有一篇非常不错的文章,描述了它们如何为每个iOS设备创建和实现其图标:

http://www.campaignmonitor.com/blog/post/323​​4/designing-campaign-monitor-ios-icons/


2
可以在同一文件中使用多种尺寸的图标。
布拉德

非常感谢,这是一篇很棒的文章。Apple设备将对其中包含多种尺寸图像的ico文件执行的操作仍是一个谜。
Alex G

1

据我了解,这几种解决方案中没有一种是完美的。使用Favicon生成器确实是一个不错的解决方案,但是它们的数量非常庞大,很难选择。我想补充一点,如果您希望您的网站启用PWA,则还需要提供Google Devs所述的512x512图标:

图标,包括192px和512px版本

我没有遇到很多执行该标准的Favicon生成器(firebase可以,但很多事情它不执行)。因此,解决方案必须是许多其他解决方案的混合。

我不知道,今天是在2020年初,是否仍然提供16x16、32x32。我猜它在某些情况下仍然很重要,例如,如果您的用户由于某种原因仍在使用IE(这种情况仍然发生在某些出于某些原因而无法迁移到较新浏览器的私有公司中)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.