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

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


当前回答

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

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


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

其他回答

简短的回答

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文件。

结论

生成一个适用于所有地方的收藏夹图标非常复杂。我建议你使用这个收藏夹生成器。完全披露:我是这个网站的作者。

不,你不能使用非标准的大小或尺寸,因为无论图标显示在哪里,它都会对人们的浏览器造成破坏。您可以将其设置为12x16(12像素侧有四个像素的白色/透明填充),以保持纵横比,但不能更大(当然可以,但浏览器会缩小它)。

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

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

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

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

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


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

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

现在来回答这个问题,如果你想让你的图标到处都好看,2个favicon就不会这么做了。请参见以下尺寸:

16 x 16–浏览器的标准尺寸24 x 24–用于用户界面的IE9固定站点大小32 x 32–IE新页面选项卡、Windows 7+任务栏按钮、Safari阅读列表侧边栏48 x 48–Windows站点57 x 57–iPod touch,iPhone最高支持3G60 x 60–iPhone触摸屏达到iOS764 x 64–Windows站点,HiDPI/Rina中的Safari Reader列表侧边栏70 x 70–Win 8.1 Metro瓷砖72 x 72–iPad触控至iOS676 x 76–iOS796 x 96–谷歌电视114 x 114–iPhone视网膜触摸达到iOS6120 x 120–iPhone视网膜触摸iOS7128 x 128–Chrome Web Store应用程序,Android144 x 144–用于固定站点的IE10 Metro瓷砖,iPad视网膜高达iOS6150 x 150–Win 8.1 Metro瓷砖152 x 152–iPad视网膜触摸iOS7196 x 196–Android Chrome310 x 150–Win 8.1宽Metro瓷砖310 x 310–Win 8.1 Metro瓷砖