favicon是否必须是32×32或16×16?

我想使用一个图像作为一个常规的favicon和iPhone / iPad友好的图标。

这可能吗? 一个iPad友好的72×72 PNG如果链接到一个常规的浏览器图标? 还是必须使用单独的16×16或32×32图像?

对于IE浏览器, Microsoftbuild议在favicon.ico文件中打包16×16,32×32和48×48 。

对于iOS, Applebuild议使用特定的文件名称和分辨率 ,对于运行iOS 8的最新设备最多为180×180。

Android Chrome主要使用清单,也依赖于Apple触摸图标。

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

适用于Mac OS X的Safari El Capitan为固定选项卡引入了一个SVG图标 。

其他平台会寻找具有各种分辨率的PNG文件,例如Google TV的96×96图片或Opera Coast的228×228图片 。

看看这个favicon图片列表的完整参考。

这个图标生成器可以一次生成所有这些文件,并带有相应的HTML代码。 该生成器也可以实现为一个WordPress插件 。 充分披露:我是这个网站的作者。

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

现在回答这个问题,如果你想让你的图标无处不在,那么2个图标就不会这样做。 请参阅下面的尺寸:

16 x 16 – 浏览器的标准尺寸
24 x 24 – IE9固定用户界面的站点大小
32 x 32 – IE新页面标签,Windows 7 +任务栏button,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 – 赢8.1地铁瓷砖
72 x 72 – iPad触摸到iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
iPhone的视网膜接触到iOS6
120 x 120 – iPhone视网膜触摸iOS7
128 x 128 – Chrome网上应用店应用,Android
144 x 144 – 用于固定网站的IE10 Metro tile,iOS6以上的iPad retina
150 x 150 – 赢得8.1地铁砖
152 x 152 – iPad视网膜触摸iOS7
196 x 196 – Android Chrome
赢得8.1宽地铁瓦片
310 x 310 – 赢8.1地铁砖

从这里采取。

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

您select的图像格式必须是16×16像素或32×32像素,使用8位或24位颜色。 图像的格式必须是PNG(W3C标准),GIF或ICO之一。


1 w3c.org:如何添加一个Favicon到您的网站(草案在发展) 。

实际上,为了使您的图标在所有浏览器中正常工作,您将不得不添加10个以正确大小和格式的文件。

我的朋友和我创build了一个应用程序只是为了这个! 你可以在faviconit.comfind它

我们做到了这一点,所以人们不必手工制作所有这些图像和正确的标签,创造出所有这些让我很烦恼!

希望它可以帮助你!

可以在同一个文件中有多种尺寸的图标。 我经常创build48,32和16像素的favicons( .ico文件)。 你可以添加任何你想要的大小的图像。 问题是,iPhone会使用ico文件吗?

ico也支持透明度,但我不确定它是否是像PNG这样的alpha通道; 可能更像是GIF的位置或closures。

根据维基百科关于Favicon的文章, Internet Explorer仅支持ICO格式的favicon 。

我会坚持两个不同的图标。

恐怕每个解决scheme都需要单独的文件。 活动监视器上有一篇非常好的文章,描述他们如何为每个iOS设备创build和实现其图标:

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

图标不一定是16×16或32×32。 您可以创build一个80×80或100×100的图标,只要确保两个值是相同的大小,显然不要太大或太小,select一个合理的大小。