Favicon尺寸？ [英] Favicon dimensions?
问题描述
我有一个favicon.png标题为favicon.png
$ b
< link href = http：//www.example.com/images/favicon.png rel =快捷图标/>
然而，在我的浏览器中，我的favicon.png全部是扭曲的。
问题：我的favicon.png应该是特定的尺寸吗？此外，我可以使用非标准尺寸/尺寸，如果是这样，如何？
解决方案
简短回答
favicon应该是是ICO格式的一组16x16,32x32和48x48图片。 ICO格式与PNG不同。不支持非方形图片。
要生成图标，出于下面解释的许多原因，我建议您使用 favicon generator 。充分披露：我是本网站的作者。
详细全面的答案
Favicon必须是正方形。桌面浏览器和Apple iOS不支持非方形图标。
favicon支持以下几个文件：
favicon.ico 图标。
p>
favicon.ico
尽管所有桌面浏览器都可以处理有了这个图标，它主要用于旧版IE。
ICO格式与PNG格式不同。这一点很棘手，因为某些浏览器足够聪明，可以正确处理PNG图片，即使在使用ICO扩展名错误地重命名时也是
。
ICO文件可以包含多张图片和 Microsoft建议将16x16,32x32和48x48 favicon.ico 中的图标版本。
例如，IE将使用地址栏的16x16版本，以及任务栏快捷方式的32x32。
声明favicon：
< link rel =iconhref =/ path / to / icons / favicon.ico>
但是，建议在网站的根目录下放置 favicon.ico 并且根本不声明，让现代浏览器选择PNG图标。
PNG图标
现代桌面浏览器（IE11，最新版本的Chrome，Firefox ...）更喜欢使用PNG图标。通常的预期大小是 16x16,32x32和尽可能大。
例如，MacOS / Safari使用的是196x196图标，如果它的大小可以找到的话。
建议的尺寸是多少？选择您喜欢的平台： b
$ b
PNG图标声明为：
< link rel =icontype =image / pnghref =/ path / to / icons / favicon -16x16.pngsizes =16x16>
< link rel =icontype =image / pnghref =/ path / to / icons / favicon-32x32.pngsizes =32x32>
...
注意： Firefox不支持大小属性，并使用它找到的最后一个PNG图标。请确保最后声明32x32图片：它足以满足Firefox的要求，并且可以阻止它下载不需要的大图片。
另请注意， Chrome不支持大小属性，并倾向于加载所有已声明的图标。最好不要宣布太多的图标。
移动平台
这个问题是关于桌面图标的，所以没有必要在这个主题中钻研太多。
Apple为iOS平台定义触摸图标。
iOS不支持非方形图标。 它只是重新调整非方形图片，使它们变成方形（寻找Kioskea示例）。
Android Chrome依赖于Apple触摸图标，并且还定义了一个192x192 PNG图标。
微软定义了瓷砖图片和 browserconfig.xml 文件。
结论
生成一个可以在任何地方工作的图标是相当复杂的。我建议你使用这个 favicon生成器。充分披露：我是本网站的作者。
I have a favicon with the dimensions of height=26px / width=20px named favicon.png
<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />
However, in my browser, my favicon.png is all distorted.
Question: Is my favicon.png supposed to be a particular size? Also, can I use a non-standard size/dimension and if so, how?
Short answer
The favicon is supposed to be a set of 16x16, 32x32 and 48x48 pictures in ICO format. ICO format is different than PNG. Non-square pictures are not supported.
To generate the favicon, for many reasons explained below, I advise you to use this favicon generator. Full disclosure: I'm the author of this site.
Long, comprehensive answer
Favicon must be square. Desktop browsers and Apple iOS do not support non-square icons.
The favicon is supported by several files:
- A
favicon.icoicon. - Some other PNG icons.
In order to get the best results across desktop browsers (Windows/IE, MacOS/Safari, etc.), you need to combine both types of icons.
favicon.ico
Although all desktop browsers can deal with this icon, it is primarily for older version of IE.
The ICO format is different of the PNG format. This point is tricky because some browsers are smart enough to process a PNG picture correctly, even when it was wrongly renamed with an ICO extension.
An ICO file can contain several pictures and Microsoft recommends to put 16x16, 32x32 and 48x48 versions of the icon in favicon.ico.
For example, IE will use the 16x16 version for the address bar, and the 32x32 for a task bar shortcut.
Declare the favicon with:
<link rel="icon" href="/path/to/icons/favicon.ico">
However, it is recommended to place favicon.ico in the root directory of the web site and to not declare it at all and let the modern browsers pick the PNG icons.
PNG icons
Modern desktop browsers (IE11, recent versions of Chrome, Firefox...) prefer to use PNG icons. The usual expected sizes are 16x16, 32x32 and "as big as possible". For example, MacOS/Safari uses the 196x196 icon if it is the biggest it can find.
What are the recommended sizes? Pick your favorite platforms:
- Most desktop browsers: 16x16, 32x32, "as big as possible"
- Android Chrome: 192x192
- Google TV: 96x96
- ... and others that are more or less documented.
The PNG icons are declared with:
<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">
...
Beware: Firefox does not support the sizes attribute and uses the last PNG icon it finds. Make sure to declare the 32x32 picture last: it is good enough for Firefox, and that will prevent it from downloading a big picture it does not need.
Also note that Chrome does not support the sizes attribute and tends to load all declared icons. Better not declare too many icons.
Mobile platforms
This question is about desktop favicon so there is no need to delve too much in this topic.
Apple defines touch icon for the iOS platform. iOS does not support non-square icon. It simply rescales non-square pictures to make them square (look for the Kioskea example).
Android Chrome relies on the Apple touch icon and also defines a 192x192 PNG icon.
Microsoft defines the tile picture and the browserconfig.xml file.
Conclusion
Generating a favicon that works everywhere is quite complex. I advise you to use this favicon generator. Full disclosure: I'm the author of this site.
这篇关于Favicon尺寸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
