Favicon尺寸？
我有一个名为favicon.png的height = 26px / width = 20px的维护图标
<link href=http://www.example.comhttp://img.dovov.comfavicon.png rel="shortcut icon" /> 但是，在我的浏览器中，我的favicon.png都是扭曲的。
问题 ：我的favicon.png应该是一个特定的大小？ 另外，我可以使用非标准尺寸/尺寸，如果是这样，如何？
简短的回答
favicon应该是ICO格式的一组16×16,32×32和48×48的图片 。 ICO格式不同于PNG。 非正方形图片不被支持。
为了生成图标，出于下面解释的许多原因，我build议你使用这个图标生成器 。 充分披露：我是这个网站的作者。
长，全面的答案
Favicon必须是方形的。 桌面浏览器和Apple iOS不支持非方形图标。
favicon由几个文件支持：
- 一个
favicon.ico图标。 - 一些其他的PNG图标。
为了在桌面浏览器（Windows / IE，MacOS / Safari等）上获得最佳效果，您需要组合这两种图标。
favicon.ico
尽pipe所有桌面浏览器都可以处理这个图标，但主要是针对旧版本的IE。
ICO格式与PNG格式不同。 这一点是棘手的，因为一些浏览器足够聪明，正确地处理PNG图片，即使它错误地用ICO扩展名重命名。
一个ICO文件可以包含多个图片， Microsoftbuild议将该图标的favicon.ico和48×48版本放在favicon.ico 。 例如，IE将使用地址栏的16×16版本，以及32×32的任务栏快捷方式。
声明的favicon：
<link rel="icon" href="/path/to/icons/favicon.ico">
但是，build议将favicon.ico放置在网站的根目录下 ，而不要声明它，让现代浏览器selectPNG图标。
PNG图标
现代桌面浏览器（IE11，最近的Chrome浏览器，Firefox …）更喜欢使用PNG图标。 通常的预期大小是16×16,32×32和“尽可能大” 。 例如，MacOS / Safari使用196×196的图标，如果它是最大的可以find。
什么是推荐的尺寸？ select你喜欢的平台：
- 大多数桌面浏览器：16×16,32×32，“尽可能大”
- Android Chrome浏览器：192×192
- Google电视：96×96
- …以及其他或多或less有文件logging的人。
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属性，并使用它find的最后一个PNG图标 。 确保最后声明32×32图片：Firefox已经足够好了，这将阻止它下载不需要的大图片。
另请注意， Chrome不支持sizes属性，并倾向于加载所有声明的图标 。 最好不要宣布太多的图标。
移动平台
这个问题是关于桌面favicon，所以没有必要在这个话题上钻研太多。
苹果为iOS平台定义触摸图标 。 iOS不支持非方形图标。 它只是重新调整非方形图片，使其成为方形（查找Kioskea示例） 。
Android Chrome依靠Apple触摸图标，并且还定义了192×192 PNG图标 。
微软定义了瓷砖图片和browserconfig.xml文件 。
结论
生成一个无处不在的图标是相当复杂的。 我build议你使用这个图标生成器 。 充分披露：我是这个网站的作者。
16×16像素，* .ico格式。
维基百科有这样的说法：
此外，这些图标文件的大小可以是16×16或32×32像素，并且可以是8位或24位的颜色深度（请注意，GIF文件具有有限的256个调色板条目）。
我认为最好的方法是使用32×32 gif并用不同的浏览器进行testing。
2017标准感谢faviconit
我使用faviconit.com来提供最好的浏览器和设备支持。 你上传一个图像，这个网站给你的代码，转换后的图像和browserconfig文件。
我们可以简单地上传一个favicon 16×16，它可能会出现在几乎所有的浏览器。
但是，如果您将其标记为智能手机或平板电脑上的最爱，我们将需要更大的图像（60×60至144×144）。
让我们说我们的用户之一在他们的桌面上创build一个快捷方式。 在这种情况下，196×196看起来更好！
<!-- 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，我们可以创build快捷方式的网站与瓷砖！
<!-- 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">
Browserconfig.xml
上传一个名为browserconfig.xml的文件
<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的格式必须是正方形的，否则浏览器会将其拉伸。 不幸的是，Internet Explorer <11不支持.gif或.png文件types，但只支持微软的.ico格式。 你可以使用一些“favicon generator”的应用程序，如： http : //favicon-generator.org/
favicon.ico是16×16
<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”这个名字很重要，因为许多浏览器都会先尝试在那里find它。
网站图标通常必须是* .ico文件，可以是32×32或16×16。 使用非标准尺寸在所有浏览器中都不起作用，并且会像您看到的那样出现扭曲。 尝试使用此网站转换该图像： http : //www.favicon.cc/ ，然后尝试使用它？
您select的图像格式必须是16×16像素或32×32像素，使用8位或24位颜色。 图像的格式必须是PNG（W3C标准），GIF或ICO之一。 – 如何添加一个Favicon到您的网站 – QA @ W3C
不，你不能使用非标准的尺寸或尺寸，因为它会在任何显示图标的地方对人们的浏览器造成严重破坏。 你可以使它成为12×16（在12像素侧有四个像素的白色/透明填充）以保持纵横比，但是你不能变大（当然，你可以，但浏览器会缩小它）。
如果您有权访问Photoshop，请查看：
http://www.photoshopsupport.com/tutorials/jennifer/favicon.html
本教程链接到一个插件，允许Photoshop本机保存ico文件，然后提供有关favicon标准的信息。
当我第一次开始做图标时，规则是一个16×16的8位ico文件。 如果你想确保favicon在大多数浏览器中都能正常工作，我会坚持下去。
为了帮助我，我使用这个生成器https://realfavicongenerator.net/它给了很多选项和帮手。; 所以你不用担心你的图标。
<link rel="shortcut icon" type="image/png" href="http://eg.com/favicon.png"/>
