我有一个高度为26px /宽度= 20px的图标，名为favicon.png。

<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />


但是，在我的浏览器中，我的favicon.png都变形了。

问题：我的favicon.png应该是特定大小吗？另外，我可以使用非标准尺寸/尺寸吗？如果可以，如何使用？

#1 楼

简短答案
该图标集应该是一组ICO格式的16x16、32x32和48x48图片。 ICO格式与PNG不同。不支持非方形图片。
出于以下许多原因，要生成图标，我建议您使用此图标生成器。全面披露：我是该网站的作者。
全面的回答
图标必须是正方形的。桌面浏览器和Apple iOS不支持非方形图标。
该图标由多个文件支持：

favicon.ico图标。
其他一些PNG图标。

为了在台式机浏览器（Windows / IE，MacOS / Safari等）上获得最佳效果，您需要同时组合两种类型的图标。
favicon.ico
尽管所有台式机浏览器都可以处理此图标，主要用于IE的较早版本。
ICO格式与PNG格式不同。这一点很棘手，因为某些浏览器足够聪明，可以正确处理PNG图片，即使错误地使用ICO扩展名对其进行了重新命名。
ICO文件可以包含多张图片，Microsoft建议您放置16x16， favicon.ico中图标的32x32和48x48版本。
例如，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
Google TV：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不支持sizes属性，并使用最后一个PNG找到的图标。确保最后声明32x32图片：对于Firefox来说已经足够了，这将阻止它下载不需要的大图片。编辑：2016年修复。
还请注意，Chrome浏览器不支持sizes属性，并且倾向于加载所有声明的图标。最好不要声明太多图标。编辑：已在2018年修复。
移动平台
此问题与桌面图标有关，因此无需在本主题中进行过多研究。
Apple为iOS平台定义了触摸图标。
/> iOS不支持非正方形图标。它只是简单地重新缩放非正方形图片以使其变为正方形（请查看Kioskea示例）。
Android Chrome依赖于Apple touch图标，还定义了192x192 PNG图标。
Microsoft定义了平铺图片， browserconfig.xml文件。
结论
生成可在任何地方使用的图标都非常复杂。我建议您使用此图标生成器。完全披露：我是该网站的作者。

评论

XSLT用户的Pedantry：请关闭标签：)

–内森·霍恩比（Nathan Hornby）
2014年8月5日在9:48


@NathanHornby那么，您是否处于“自封闭标记”状态？ :)严重的是，自封闭标签适用于XHTML（和XSLT，所以您应该抱怨），但是所有其他版本（例如HTML5）都禁止使用它们。此处更多内容：github.com/RealFaviconGenerator/realfavicongenerator/issues/62

– philippe_b
2014年8月5日10:43
好吧，我同意其他人的观点：）正确关闭标签是有效且有意义的，无论是否需要。如果添加斜杠可以增加兼容性而没有缺点，那么我认为没有理由忽略它，这是很好的编码习惯，就像添加
和一样，即使现代浏览器通常不需要它；）

–内森·霍恩比（Nathan Hornby）
2014年8月5日在17:23


购买Pedantry：是有效的XHTML，但不是HTML。最后的空格仅对无法正确处理/>的旧版IE浏览器有用，并且在任何XML规范中均不需要。 HTML5有两种形式。 XHTML5仅在将文档用作XML文档时才有效。在HTML5或任何其他非XHTML变体中包含斜杠是无效的，但所有浏览器都可以接受。鉴于IE无法处理XHTML正确提供的服务，将它作为HTML进行服务器处理已成为标准做法，但这意味着最后的斜杠不合时宜。

–曼戈
18年7月7日在2:18
链接的Favicon Generator是一个很棒的网站-就像一个魅力。干杯!

–乍得
18年7月31日在18:03