html - 更改 HTML 中的图标大小

Question

在我的元素中，我添加了一个图标，如下所示:

<link rel="shortcut icon" type="image/png" href="{% static 'favicon.png' %}"/>

在我的图像编辑器中，我将此图形(我想用作我的图标)的大小从原始大小 (172x158px) 更改为 225x225px。

但是，当我尝试使用更新后的图形作为我的图标(尺寸为 225x225)时，它保持原始大小。

有人知道如何解决这个问题，以便我可以为我的网站图标使用更大的图形吗？谢谢。

Answer 1

实际上，图标应该是 ICO 格式的 16x16、32x32 和 48x48 图片。 (根据Microsoft)

您可以尝试简单地将图标的大小添加到标记中，并检查您的浏览器和用途是否支持该大小。例如:

<link rel="icon" type="image/png" sizes="196x196" href="{% static 'favicon.png' %}"/>

并非所有浏览器实际上都支持每种尺寸(无论是 .png 格式)!我建议添加您想要支持的所有尺寸。

如果您想支持最常见浏览器的所有格式，这里有一个不错的图标生成器:http://faviconit.com/en

以下是 faviconit 将为您提供的代码(在图像旁边):

<!-- ****** faviconit.com favicons ****** -->
<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">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- ****** faviconit.com favicons ****** -->