我想使用一张图片作为常规收藏夹和iPhone/iPad友好的收藏夹。
这可能吗?一个iPad友好的72×72 PNG如果作为一个普通的浏览器收藏夹链接,会缩放吗?还是必须使用单独的16×16或32×32图像?
我想使用一张图片作为常规收藏夹和iPhone/iPad友好的收藏夹。
这可能吗?一个iPad友好的72×72 PNG如果作为一个普通的浏览器收藏夹链接,会缩放吗?还是必须使用单独的16×16或32×32图像?
当前回答
根据维基百科关于Favicon的文章,Internet Explorer只支持Favicon图标的ICO格式。
我会坚持使用两个不同的图标。
其他回答
16x16像素,*.ico格式。
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插件实现。完全披露:我是这个网站的作者。
简短的回答
favicon应该是一组ICO格式的16x16、32x32和48x48图片。ICO格式不同于PNG。不支持非方形图片。
为了生成favicon,出于下面解释的许多原因,我建议您使用这个favicon生成器。完全披露:我是这个网站的作者。
长而全面的答案
Favicon必须是方形的。桌面浏览器和Apple iOS不支持非方形图标。
favicon由多个文件支持:
favicon.ico图标。其他一些PNG图标。
为了在桌面浏览器(Windows/IE、MacOS/Safari等)中获得最佳效果,您需要将这两种类型的图标组合起来。
图标文件
虽然所有的桌面浏览器都可以处理这个图标,但它主要用于IE的旧版本。
ICO格式与PNG格式不同。这一点很棘手,因为一些浏览器足够聪明,可以正确处理PNG图片,即使它被错误地重命名为ICO扩展名。
一个ICO文件可以包含多张图片,微软建议将16x16、32x32和48x48版本的图标放在favicon.ICO中。例如,IE将使用16x16版本作为地址栏,32x32版本作为任务栏快捷方式。
使用以下内容声明收藏夹图标:
<link rel="icon" href="/path/to/icons/favicon.ico">
但是,建议将favicon.ico放在网站的根目录中,而不要声明它,让现代浏览器选择PNG图标。
PNG图标
现代桌面浏览器(IE11、最新版本的Chrome、Firefox…)更喜欢使用PNG图标。通常预期尺寸为16x16、32x32,“尽可能大”。例如,如果MacOS/Safari是最大的图标,则使用196x196图标。
建议的尺寸是多少?选择您喜爱的平台:
大多数桌面浏览器:16x16、32x32,“尽可能大”Android Chrome:192x192谷歌电视:96x96…和其他或多或少有记录的。
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不支持大小属性,而是使用它找到的最后一个PNG图标。确保最后声明32x32图片:这对于Firefox来说已经足够好了,这将阻止它下载不需要的大图片。编辑:2016年修复。
还要注意,Chrome不支持大小属性,并且倾向于加载所有声明的图标。最好不要声明太多图标。编辑:2018年修复。
移动平台
这个问题是关于桌面收藏夹的,所以没有必要在这个主题上做过多的研究。
苹果为iOS平台定义了触摸图标。iOS不支持非方形图标。它只需重新缩放非方形图片,使其成为方形(请查看Kioskea示例)。
Android Chrome依赖于Apple触摸图标,并定义了192x192 PNG图标。
Microsoft定义了平铺图片和browserconfig.xml文件。
结论
生成一个适用于所有地方的收藏夹图标非常复杂。我建议你使用这个收藏夹生成器。完全披露:我是这个网站的作者。
我想提醒大家,问题是:
我想使用一张图片作为常规收藏夹和iPhone/iPad友好的收藏夹?这可能吗?如果链接到普通浏览器收藏夹,iPad友好的72x72 PNG会缩放吗?还是必须使用单独的16x16或32x32图像?
答案是:是的,这是可能的!是,它将被缩放。不,您不需要“常规浏览器收藏夹”。请看这个答案:https://stackoverflow.com/a/48646940/2397550
收藏夹图标不必是16x16或32x32。您可以创建一个80x80或100x100的收藏夹图标,只需确保两个值的大小相同,显然不要太大或太小,选择一个合理的大小即可。