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

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


当前回答

现代浏览器的简单解决方案(2022)

使用SVG收藏夹:

<link rel="icon" href="/icon.svg">

主要浏览器支持(2021 Safari除外)和Living Standard只有一行简短的代码,易于记忆其他属性(如类型和大小)不是必需的与PNG相比,任何大小的缩放效果都更好让我们用数百种不同的尺寸来结束最爱的疯狂。。。

其他回答

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”这个名字很重要,因为许多浏览器都会先找到它。

在同一文件中可以有多个大小的图标。我经常创建48、32和16像素的favicon(.ico文件)。您可以添加任意大小的图像。问题是,iPhone会使用ico文件吗?

ico也支持透明度,但我不确定它是否是PNG这样的alpha通道;可能更像GIF,无论是打开还是关闭。

16x16像素,*.ico格式。

最简单的解决方案(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中的“平铺”。不过,它确实支持快捷方式、书签和浏览器选项卡中的图像。

现代浏览器的简单解决方案(2022)

使用SVG收藏夹:

<link rel="icon" href="/icon.svg">

主要浏览器支持(2021 Safari除外)和Living Standard只有一行简短的代码,易于记忆其他属性(如类型和大小)不是必需的与PNG相比,任何大小的缩放效果都更好让我们用数百种不同的尺寸来结束最爱的疯狂。。。