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

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


当前回答

favicon.ico是16x16

<link rel="shortcut icon" href="favicon.ico"/>

我用这些在手机和平板电脑上变得漂亮:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico72.png">
<link rel="apple-touch-icon-precomposed" href="img/ico57.png">

在根目录中使用“favicon.ico”这个名字很重要,因为许多浏览器都会先找到它。

其他回答

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

图标包括192px和512px版本

我并没有遇到很多favicon生成器强制执行这一标准(firebase确实如此,但有很多事情它做不到)。因此,解决方案必须是许多其他解决方案的组合。

我不知道,在2020年初的今天,是否提供16x16、32x32仍然相关。我想这在某些情况下仍然很重要,例如,如果你的用户出于某种原因仍然使用IE(这种情况仍然发生在一些私人公司,因为某些原因没有迁移到更新的浏览器)

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

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

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

favicon的格式必须为方形,否则浏览器会拉伸它。不幸的是,Internet Explorer<11不支持.gif或.png文件类型,但仅支持Microsoft的.ico格式。你可以使用一些“favicon生成器”应用程序,如:http://favicon-generator.org/

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

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


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

favicon.ico是16x16

<link rel="shortcut icon" href="favicon.ico"/>

我用这些在手机和平板电脑上变得漂亮:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico72.png">
<link rel="apple-touch-icon-precomposed" href="img/ico57.png">

在根目录中使用“favicon.ico”这个名字很重要,因为许多浏览器都会先找到它。