我想使用一张图片作为常规收藏夹和iPhone/iPad友好的收藏夹。
这可能吗？一个iPad友好的72×72 PNG如果作为一个普通的浏览器收藏夹链接，会缩放吗？还是必须使用单独的16×16或32×32图像？
当前回答
维基百科有这样的说法：
此外，此类图标文件可以是×16或32×，颜色为8位或24位深度（注意GIF文件具有有限的256个调色板条目）。
我认为最好的方法是使用32x32 gif，并用不同的浏览器进行测试。
其他回答
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中的“平铺”。不过，它确实支持快捷方式、书签和浏览器选项卡中的图像。
16x16像素，*.ico格式。
得益于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>
我没有看到这里列出的任何最新信息，所以这里是：
现在来回答这个问题，如果你想让你的图标到处都好看，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瓷砖
推荐文章
- 如何在django应用程序中显示favicon ?
- 在ASP中服务favicon.ico。NET MVC
- 你必须包括<链接rel="icon" href="favicon.ico" type="image/x-icon" />吗?
- 图标:.ico或.png /正确的标签?
- 如何阻止HTTP请求只是一个图标?
- 动态更改网站图标
- favicon.png vs favicon.ico -为什么我应该使用PNG而不是ICO?
- 如何为网站添加浏览器标签图标(favicon) ?
- 如何防止favicon.ico请求?
- 添加一个图标到静态HTML页面
- 收藏夹必须是32×32还是16×16？
- 如何强制刷新收藏夹图标？
