收藏夹必须是32×32还是16×16？

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

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

当前回答

所选图像的格式必须为16x16像素或32x32像素，使用8位或24位颜色。的格式图像必须是PNG（W3C标准）、GIF或ICO之一。-如何将传真添加到您的网站-QA@W3C

2013-12-02 14:18:48

其他回答

得益于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>

2017-04-01 08:09:12

事实上，要使你的收藏夹图标在所有浏览器中正常工作，你必须添加10个以上正确大小和格式的文件。

我和我的朋友为此创建了一个应用程序！你可以在faviconit.com上找到它

我们做到了这一点，所以人们不必手动创建所有这些图像和正确的标签，创建所有这些曾经让我非常恼火的图像！

2014-04-22 23:18:44

16x16像素，*.ico格式。

2010-02-15 18:51:11

现代浏览器的简单解决方案（2022）

使用SVG收藏夹：

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

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

2021-12-17 23:38:28

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

2018-02-06 15:52:33

收藏夹必须是32×32还是16×16？

推荐文章

最新文章

标签