我想使用一张图片作为常规收藏夹和iPhone/iPad友好的收藏夹。
这可能吗?一个iPad友好的72×72 PNG如果作为一个普通的浏览器收藏夹链接,会缩放吗?还是必须使用单独的16×16或32×32图像?
我想使用一张图片作为常规收藏夹和iPhone/iPad友好的收藏夹。
这可能吗?一个iPad友好的72×72 PNG如果作为一个普通的浏览器收藏夹链接,会缩放吗?还是必须使用单独的16×16或32×32图像?
当前回答
最简单的解决方案(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中的“平铺”。不过,它确实支持快捷方式、书签和浏览器选项卡中的图像。
其他回答
简短的回答
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文件。
结论
生成一个适用于所有地方的收藏夹图标非常复杂。我建议你使用这个收藏夹生成器。完全披露:我是这个网站的作者。
得益于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生成器确实是一个很好的解决方案,但它们的数量太多,很难选择。我想补充一点,如果您希望您的网站启用PWA,您还需要提供一个512x512图标,如Google Devs所述:
图标包括192px和512px版本
我并没有遇到很多favicon生成器强制执行这一标准(firebase确实如此,但有很多事情它做不到)。因此,解决方案必须是许多其他解决方案的组合。
我不知道,在2020年初的今天,是否提供16x16、32x32仍然相关。我想这在某些情况下仍然很重要,例如,如果你的用户出于某种原因仍然使用IE(这种情况仍然发生在一些私人公司,因为某些原因没有迁移到更新的浏览器)
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”这个名字很重要,因为许多浏览器都会先找到它。
维基百科有这样的说法:
此外,此类图标文件可以是×16或32×,颜色为8位或24位深度(注意GIF文件具有有限的256个调色板条目)。
我认为最好的方法是使用32x32 gif,并用不同的浏览器进行测试。