Html 图标尺寸？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2268204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Favicon dimensions?
提问by b2000zinger
I have a favicon with the dimensions of height=26px / width=20px named favicon.png
我有一个尺寸为 height=26px / width=20px 的图标，名为 favicon.png
<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />
However, in my browser, my favicon.png is all distorted.
但是，在我的浏览器中，我的 favicon.png 全部失真。
Question: Is my favicon.png supposed to be a particular size? Also, can I use a non-standard size/dimension and if so, how?
问题：我的 favicon.png 应该是特定大小吗？另外，我可以使用非标准尺寸/尺寸吗？如果可以，如何使用？
回答by philippe_b
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.
图标应该是一组 16x16、32x32 和 48x48 的 ICO 格式图片。ICO 格式不同于 PNG。不支持非方形图片。
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.
Favicon 必须是方形的。桌面浏览器和 Apple iOS 不支持非方形图标。
The favicon is supported by several files:
几个文件支持网站图标：
- A
favicon.icoicon. - Some other PNG icons.
- 一个
favicon.ico图标。 - 其他一些 PNG 图标。
In order to get the best results across desktop browsers (Windows/IE, MacOS/Safari, etc.), you need to combine both types of icons.
为了在桌面浏览器（Windows/IE、MacOS/Safari 等）中获得最佳效果，您需要结合使用这两种类型的图标。
favicon.ico
favicon.ico
Although all desktop browsers can deal with this icon, it is primarily for older version of IE.
虽然所有桌面浏览器都可以处理这个图标，但主要是针对老版本的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.
ICO 格式与 PNG 格式不同。这一点很棘手，因为一些浏览器足够聪明，可以正确处理 PNG 图片，即使它被 ICO 扩展名错误地重命名。
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.
一个 ICO 文件可以包含多张图片，微软建议将 16x16、32x32 和 48x48 版本的图标放在favicon.ico. 例如，IE 将使用 16x16 版本的地址栏和 32x32 的任务栏快捷方式。
Declare the favicon with:
使用以下命令声明图标：
<link rel="icon" href="/path/to/icons/favicon.ico">
However, it is recommended to place favicon.icoin the root directory of the web siteand to not declare it at alland let the modern browsers pick the PNG icons.
但是，建议地方favicon.ico在网站的根目录下，并在所有不声明它，让现代的浏览器挑PNG图标。
PNG icons
PNG图标
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.
现代桌面浏览器（IE11、最新版本的 Chrome、Firefox...）更喜欢使用 PNG 图标。通常的预期尺寸是16x16、32x32 和“尽可能大”。例如，MacOS/Safari 使用 196x196 图标，如果它是它可以找到的最大图标。
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.
- 大多数桌面浏览器：16x16、32x32、“尽可能大”
- 安卓 Chrome：192x192
- 谷歌电视：96x96
- ......以及其他或多或少有记录的人。
The PNG icons are declared with:
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">
...
Beware: Firefox does not support the sizesattribute 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.
注意：Firefox 不支持该sizes属性并使用它找到的最后一个 PNG 图标。确保最后声明 32x32 图片：它对 Firefox 来说已经足够了，这将阻止它下载不需要的大图片。
Also note that Chrome does not support the sizesattribute and tends to load all declared icons. Better not declare too many icons.
另请注意，Chrome 不支持该sizes属性并倾向于加载所有声明的图标。最好不要声明太多图标。
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).
Apple 为 iOS 平台定义了触摸图标。iOS 不支持非方形图标。它只是重新调整非方形图片以使其成为方形（寻找 Kioskea 示例）。
Android Chrome relies on the Apple touch icon and also defines a 192x192 PNG icon.
Android Chrome 依赖于 Apple 触摸图标，并且还定义了一个 192x192 PNG 图标。
Microsoft defines the tile pictureand the browserconfig.xmlfile.
Microsoft 定义了磁贴图片和browserconfig.xml文件。
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.
生成一个适用于任何地方的网站图标非常复杂。我建议你使用这个图标生成器。完全披露：我是这个网站的作者。
回答by Mark Hurd
16x16 pixels, *.ico format.
16x16 像素，*.ico 格式。
回答by Derk Jan Speelman
2020 standards thanks to faviconit
2020 标准归功于faviconit
I use faviconit.comfor the best browser and device support possible. You upload an image and this site gives you the code, the converted images and a browserconfig file.
我使用faviconit.com以获得最好的浏览器和设备支持。您上传图像，该站点为您提供代码、转换后的图像和浏览器配置文件。
We could simply upload a favicon manually to our website of 16x16 and it will probably show up in almost any browser.
我们可以简单地手动将网站图标上传到我们的 16x16 网站，它可能会显示在几乎所有浏览器中。
But when you will mark it as one of your favorites on your smartphone or tablet, we will need larger images (60x60 to 144x144).
但是，当您在智能手机或平板电脑上将其标记为您的最爱之一时，我们将需要更大的图像（60x60 到 144x144）。
And lets say one of our users creates a shortcut on their desktop. In that case a 196x196 looks better!
假设我们的一位用户在他们的桌面上创建了一个快捷方式。在这种情况下，196x196 看起来更好！
Example code of what faviconit would give you, next to all the converted images:
在所有转换后的图像旁边，faviconit 会给你什么示例代码：
<!-- 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">
Since Windows 8
自 Windows 8
But that is not all. Since windows 8 we are able to create shortcuts to websites with tiles!
但这还不是全部。从 Windows 8 开始，我们可以使用磁贴创建网站的快捷方式！
<!-- 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
浏览器配置文件
Upload a file named browserconfig.xml (to enable the tiles in windows >8)
上传名为 browserconfig.xml 的文件（以启用 windows > 8 中的磁贴）
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/favicon-70.png"/>
<square150x150logo src="/favicon-150.png"/>
<square310x310logo src="/favicon-310.png"/>
<TileColor>#FFFFFF</TileColor>
</tile>
</msapplication>
</browserconfig>
回答by Otto Allmendinger
Wikipediahas this to say:
维基百科是这么说的：
Additionally, such icon files can be either 16×16 or 32×32 pixels in size, and either 8-bit or 24-bit in color depth (note that GIF files have a limited, 256 color palette entries).
此外，此类图标文件的大小可以是 16×16 或 32×32 像素，颜色深度可以是 8 位或 24 位（请注意，GIF 文件具有有限的 256 个调色板条目）。
I think the best way is to use a 32x32 gif and test it with different browsers.
我认为最好的方法是使用 32x32 gif 并使用不同的浏览器进行测试。
回答by JoostS
The simplest solution is to use one(!) PNG image (in 2020).
最简单的解决方案是使用一个（！）PNG 图像（2020 年）。
Simply add this to the head of your document:
只需将其添加到文档的头部：
<link rel="shortcut icon" type="image/png" href="/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="/img/icon-192x192.png">
<link rel="apple-touch-icon" href="/img/icon-192x192.png">
The last link is for Apple (home screen), the second one for Android (home screen) and the first one for the rest.
最后一个链接用于 Apple（主屏幕），第二个用于 Android（主屏幕），第一个用于其余部分。
Note that this solution does not support "tiles" in Windows 8/10. It does, however, support images in shortcuts, bookmarks and browser-tabs.
请注意，此解决方案不支持 Windows 8/10 中的“磁贴”。但是，它确实支持快捷方式、书签和浏览器选项卡中的图像。
The size is exactly the size the Android home screen uses. The Apple home screen icon size is 60px (3x), so 180px and will be scaled down. Other platforms use the default shortcut icon, which will be scaled down too.
大小正是 Android 主屏幕使用的大小。Apple 主屏幕图标大小为 60 像素 (3x)，因此 180 像素会缩小。其他平台使用默认的快捷图标，该图标也会缩小。
回答by Felipe
favicon.ico is 16x16
favicon.ico 是 16x16
<link rel="shortcut icon" href="favicon.ico"/>
And I use these ones to be beautiful in mobile and tablet:
我用这些在手机和平板电脑上变得漂亮：
<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">
It's important to use the name "favicon.ico" in the root because many browsers will try to find there first.
在根目录中使用名称“favicon.ico”很重要，因为许多浏览器会首先尝试在那里找到。
回答by ceejayoz
No, you can't use a non-standard size or dimension, as it'd wreak havoc on peoples' browsers wherever the icons are displayed. You could make it 12x16 (with four pixels of white/transparent padding on the 12 pixel side) to preserve your aspect ratio, but you can't go bigger (well, you can, but the browser'll shrink it).
不，您不能使用非标准尺寸或尺寸，因为它会在显示图标的任何地方对人们的浏览器造成严重破坏。您可以将其设为 12x16（在 12 像素一侧有四个白色/透明填充像素）以保留您的纵横比，但您不能变大（好吧，您可以，但浏览器会缩小它）。
回答by blade19899
the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO. - How to Add a Favicon to your Site - QA @ W3C
您选择的图像格式必须是 16x16 像素或 32x32 像素，使用 8 位或 24 位颜色。图像的格式必须是 PNG（W3C 标准）、GIF 或 ICO 之一。-如何将 Favicon 添加到您的站点 - QA @ W3C
回答by UbiQue
The format of favicon must be square otherwise the browser will stretch it. Unfortunatelly, Internet Explorer < 11 do not support .gif, or .png filetypes, but only Microsoft's .ico format. You can use some "favicon generator" app like: http://favicon-generator.org/
favicon 的格式必须是方形的，否则浏览器会拉伸它。不幸的是，Internet Explorer < 11 不支持 .gif 或 .png 文件类型，而仅支持 Microsoft 的 .ico 格式。您可以使用一些“图标生成器”应用程序，例如：http: //favicon-generator.org/
回答by Pablo Fernandez
Seems like your file should be .icotype.
似乎您的文件应该是.ico类型。
Check this post about favicons:
检查这篇关于网站图标的帖子：
