我想使用一张图片作为常规收藏夹和iPhone/iPad友好的收藏夹。
这可能吗？一个iPad友好的72×72 PNG如果作为一个普通的浏览器收藏夹链接，会缩放吗？还是必须使用单独的16×16或32×32图像？
当前回答
收藏夹图标不必是16x16或32x32。您可以创建一个80x80或100x100的收藏夹图标，只需确保两个值的大小相同，显然不要太大或太小，选择一个合理的大小即可。
其他回答
维基百科有这样的说法：
此外，此类图标文件可以是×16或32×，颜色为8位或24位深度（注意GIF文件具有有限的256个调色板条目）。
我认为最好的方法是使用32x32 gif，并用不同的浏览器进行测试。
我不确定浏览器是否/如何缩放大图标，但W3C建议如下1：
所选图像的格式必须为16x16像素或32x32像素，使用8位或24位颜色。图像的格式必须是PNG（W3C标准）、GIF或ICO之一。
1 w3c.org：如何将Favicon添加到站点（开发中的草稿）。
在同一文件中可以有多个大小的图标。我经常创建48、32和16像素的favicon（.ico文件）。您可以添加任意大小的图像。问题是，iPhone会使用ico文件吗？
ico也支持透明度，但我不确定它是否是PNG这样的alpha通道；可能更像GIF，无论是打开还是关闭。
得益于faviconit，2021标准
我使用faviconit.com获得最佳的浏览器和设备支持。你上传一张图片，这个网站会给你代码、转换后的图片和一个browserconfig文件。
我们只需手动将一个收藏夹图标上传到16x16的网站，它很可能会出现在几乎任何浏览器中。
但是，当您在智能手机或平板电脑上将其标记为您的最爱之一时，我们将需要更大的图像（60x60至144x144）。
假设我们的一个用户在桌面上创建了一个快捷方式。在这种情况下，196x196看起来更好！
在所有转换图像旁边，favicuit将为您提供的示例代码：
<!-- place this in your <head></head> -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
自Windows 8以来
但这还不是全部。从windows 8开始，我们可以使用平铺创建网站的快捷方式！
<!-- place this in your <head></head> -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
浏览器配置.xml
上载一个名为browserconfig.xml的文件（以启用windows>8中的平铺）
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/favicon-70.png"/>
<square150x150logo src="/favicon-150.png"/>
<square310x310logo src="/favicon-310.png"/>
<TileColor>#FFFFFF</TileColor>
</tile>
</msapplication>
</browserconfig>
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”这个名字很重要，因为许多浏览器都会先找到它。
