我想使用一张图片作为常规收藏夹和iPhone/iPad友好的收藏夹。

这可能吗?一个iPad友好的72×72 PNG如果作为一个普通的浏览器收藏夹链接,会缩放吗?还是必须使用单独的16×16或32×32图像?


当前回答

事实上,要使你的收藏夹图标在所有浏览器中正常工作,你必须添加10个以上正确大小和格式的文件。

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

我们做到了这一点,所以人们不必手动创建所有这些图像和正确的标签,创建所有这些曾经让我非常恼火的图像!

其他回答

16x16像素,*.ico格式。

看起来你的文件应该是.ico类型。

查看此关于收藏夹的帖子:

http://www.html-kit.com/support/favicon/image-size/

2020年更新:坚持16x16与32x32图标的原始问题:当前的建议应该是提供一个32x32的图标,完全跳过16x16。所有当前的浏览器和设备都支持32x32图标。根据环境的不同,图标通常会放大到192x192(假设没有更大的尺寸可用或系统无法识别)。从超低分辨率升级具有明显的效果,因此最好将32x32作为最小基线。


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

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

Android Chrome主要使用一个清单,也依赖于苹果触摸图标。

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

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

其他一些平台寻找各种分辨率的PNG文件,如谷歌电视的96x96图片或歌剧海岸的228x228图片。

请查看此收藏夹图片列表以获得完整的参考。

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

最简单的解决方案(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">

最后一个链接用于苹果(主屏幕),第二个链接用于Android(主屏幕,其余的第一个链接。

大小与Android主屏幕使用的大小完全相同。苹果主屏幕图标大小为60px(3x),因此为180px,并将缩小。其他平台使用默认快捷方式图标,该图标也会缩小。

*请注意,此解决方案不支持Windows 8/10中的“平铺”。不过,它确实支持快捷方式、书签和浏览器选项卡中的图像。

维基百科有这样的说法:

此外,此类图标文件可以是×16或32×,颜色为8位或24位深度(注意GIF文件具有有限的256个调色板条目)。

我认为最好的方法是使用32x32 gif,并用不同的浏览器进行测试。