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它。

看起来像你的文件应该是.icotypes。

检查这个post关于favicons:

http://www.html-kit.com/support/favicon/image-size/

网站图标通常必须是* .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"/>