网站图标必须是 32×32 或 16×16 吗？
我想使用单个图像作为常规图标和 iPhone/iPad 友好图标。
这可能吗？如果作为常规浏览器图标链接，iPad 友好的 72×72 PNG 会缩放吗？或者我是否必须使用单独的 16×16 或 32×32 图像？
I'd like to use a single image as both a regular favicon and iPhone/iPad friendly favicon.
Is this possible? Would an iPad-friendly 72×72 PNG scale if linked to as a regular browser favicon? Or do I have to use a separate 16×16 or 32×32 image?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（22）
2020 年更新：坚持 16x16 与 32x32 图标的原始问题：当前建议应该是提供 32x32 图标，完全跳过 16x16。当前所有浏览器和设备都支持 32x32 图标。根据环境，图标通常会放大到 192x192（假设没有更大的尺寸可用或系统无法识别它们）。从超低分辨率升级会产生明显的效果，因此最好坚持使用 32x32 作为最小基线。
对于 IE，Microsoft建议在 favicon.ico 文件中打包 16x16、32x32 和 48x48。
对于 iOS，Apple 建议使用特定的文件名和分辨率< /a>，对于运行 iOS 8 的最新设备，最多为 180x180。
Android Chrome 主要使用清单和还依赖于 Apple 触摸图标。
Windows 8.0 上的 IE 10 需要 PNG 图片和背景颜色 和 Windows 8.1 和 10 上的 IE 11 接受在名为
browserconfig.xml的专用 XML 文件中声明的多个 PNG 图片。适用于 Mac OS X El Capitan 的 Safari 引入了用于固定选项卡的 SVG 图标。
其他一些平台会查找各种分辨率的 PNG 文件，例如 Google TV 的 96x96 图片< /a> 或 Opera Coast 的 228x228 图片。
请查看favicon 图片列表以获取完整参考。
TLDR：这个favicon生成器可以一次生成所有这些文件。生成器也可以实现作为WordPress 插件。全面披露：我是该网站的作者。
Update for 2020: Sticking to the original question of 16x16 versus 32x32 icons: the current recommendation should be to provide a 32x32 icon, skipping 16x16 entirely. All current browsers and devices support 32x32 icons. The icon will routinely be upscaled to as much as 192x192 depending on the environment (assuming there are no larger sizes available or the system didn't recognize them). Upscaling from ultra low resolution has a noticeable effect so better stick to 32x32 as the smallest baseline.
For IE, Microsoft recommends 16x16, 32x32 and 48x48 packed in the favicon.ico file.
For iOS, Apple recommends specific file names and resolutions, at most 180x180 for latest devices running iOS 8.
Android Chrome primarily uses a manifest and also relies on the Apple touch icon.
IE 10 on Windows 8.0 requires PNG pictures and a background color and IE 11 on Windows 8.1 and 10 accepts several PNG pictures declared in a dedicated XML file called
browserconfig.xml.Safari for Mac OS X El Capitan introduces an SVG icon for pinned tabs.
Some other platforms look for PNG files with various resolutions, like the 96x96 picture for Google TV or the 228x228 picture for Opera Coast.
Look at this favicon pictures list for a complete reference.
TLDR: This favicon generator can generate all these files at once. The generator can also be implemented as a WordPress plugin. Full disclosure: I am the author of this site.
简短回答
favicon 应该是一组 ICO 格式的 16x16、32x32 和 48x48 图片。 ICO 格式与 PNG 不同。不支持非方形图片。
要生成图标，出于下面解释的多种原因，我建议您使用此 图标生成器。完全披露：我是该网站的作者。
长而全面的答案
Favicon 必须是方形的。桌面浏览器和 Apple iOS 不支持非方形图标。
favicon 由多个文件支持：
favicon.ico图标。为了在桌面浏览器（Windows/IE、MacOS/Safari 等）上获得最佳效果，您需要结合使用两种类型的图标。
favicon.ico虽然所有桌面浏览器都可以处理这个图标，但它主要适用于旧版本的 IE。
ICO 格式与 PNG 格式不同。这一点很棘手，因为有些浏览器足够聪明，可以正确处理 PNG 图片，
即使它被错误地用 ICO 扩展名重命名。
ICO 文件可以包含多张图片和 Microsoft建议将 16x16、32x32 和 48x48 版本的图标放在
favicon.ico中。例如，IE 将使用 16x16 版本作为地址栏，使用 32x32 版本作为任务栏快捷方式。
声明favicon：
但是，建议将
favicon.ico放置在根目录中网站并根本不声明并让现代浏览器选择PNG图标。PNG 图标
现代桌面浏览器（IE11、最新版本的 Chrome、Firefox...）更喜欢使用 PNG 图标。通常的预期尺寸为16x16、32x32 和“尽可能大”。
例如，MacOS/Safari 使用 196x196 图标（如果它是它能找到的最大图标）。
推荐尺寸是多少？选择您最喜欢的平台：
PNG 图标声明为：
注意：Firefox 不支持编辑：于 2016 年修复。尺寸属性并使用它找到的最后一个 PNG 图标。确保最后声明 32x32 图片：对于 Firefox 来说已经足够了，这将阻止它下载不需要的大图片。另请注意Chrome 不支持编辑：2018年修复。sizes属性，并且倾向于加载所有声明的尺寸图标。最好不要声明太多图标。移动平台
这个问题是关于桌面图标的，所以没有必要在这个主题上深入研究。
Apple 为 iOS 平台定义了触摸图标。
iOS 不支持非方形图标。 它只是重新缩放非方形图片以使其成为方形（查找 Kioskea 示例）。
Android Chrome 依赖于 Apple 触摸图标，还定义了 192x192 PNG 图标。
Microsoft 定义了磁贴图片 和
browserconfig.xml文件。结论
生成一个适用于任何地方的图标是相当复杂的。我建议您使用这个favicon 生成器。完全披露：我是该网站的作者。
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:
favicon.icoicon.In order to get the best results across desktop browsers (Windows/IE, MacOS/Safari, etc.), you need to combine both types of icons.
favicon.icoAlthough 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:
However, it is recommended to place
favicon.icoin 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:
The PNG icons are declared with:
Beware: Firefox does not support theedit: fixed in 2016.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.Also note that Chrome does not support theedit: fixed in 2018.sizesattribute 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.xmlfile.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.
我没有看到这里列出的任何最新信息，所以这里是：
现在要回答这个问题，如果您希望您的图标在任何地方都看起来很棒，那么 2 个图标将无法做到这一点。请参阅以下尺寸：
16 x 16 – 浏览器的标准尺寸
24 x 24 – 用户界面的 IE9 固定网站大小
32 x 32 – IE 新页面选项卡、Windows 7+ 任务栏按钮、Safari 阅读列表侧边栏
48 x 48 – Windows 网站
57 x 57 – iPod touch、最高 3G 的 iPhone
60 x 60 – iPhone 触摸至 iOS7
64 x 64 – Windows 网站、HiDPI/Retina 中的 Safari 阅读器列表侧边栏
70 x 70 – Win 8.1 Metro 瓷砖
72 x 72 – iPad touch 至 iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone 视网膜触摸至 iOS6
120 x 120 – iPhone 视网膜触摸 iOS7
128 x 128 – Chrome 网上应用店应用程序，Android
144 x 144 – 用于固定网站的 IE10 Metro 磁贴、iPad Retina 直至 iOS6
150 x 150 – Win 8.1 Metro 瓷砖
152 x 152 – iPad 视网膜触摸 iOS7
196 x 196 – Android Chrome
310 x 150 – 赢得 8.1 宽 Metro 瓷砖
310 x 310 – Win 8.1 Metro 瓷砖
I don't see any up to date info listed here, so here goes:
To answer this question now, 2 favicons will not do it if you want your icon to look great everywhere. See the sizes below:
16 x 16 – Standard size for browsers
24 x 24 – IE9 pinned site size for user interface
32 x 32 – IE new page tab, Windows 7+ taskbar button, Safari Reading List sidebar
48 x 48 – Windows site
57 x 57 – iPod touch, iPhone up to 3G
60 x 60 – iPhone touch up to iOS7
64 x 64 – Windows site, Safari Reader List sidebar in HiDPI/Retina
70 x 70 – Win 8.1 Metro tile
72 x 72 – iPad touch up to iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone retina touch up to iOS6
120 x 120 – iPhone retina touch iOS7
128 x 128 – Chrome Web Store app, Android
144 x 144 – IE10 Metro tile for pinned site, iPad retina up to iOS6
150 x 150 – Win 8.1 Metro tile
152 x 152 – iPad retina touch iOS7
196 x 196 – Android Chrome
310 x 150 – Win 8.1 wide Metro tile
310 x 310 – Win 8.1 Metro tile
2021 标准感谢 faviconit
我使用 faviconit .com 以获得最佳的浏览器和设备支持。您上传图像，该网站会为您提供代码、转换后的图像和浏览器配置文件。
我们可以简单地将一个网站图标手动上传到我们的 16x16 网站，它可能会显示在几乎所有浏览器中。
但是，当您在智能手机或平板电脑上将其标记为您的最爱之一时，我们将需要更大的图像（60x60 至 144x144）。
假设我们的一位用户在其桌面上创建了一个快捷方式。在这种情况下，196x196 看起来更好！
faviconit 将为您提供的示例代码，位于所有转换后的图像旁边：
自 Windows 8 起
但这还不是全部。从 Windows 8 开始，我们可以使用图块创建网站的快捷方式！
Browserconfig.xml
上传名为 browserconfig.xml 的文件（以在 Windows >8 中启用磁贴）
2021 standards thanks to faviconit
I use faviconit.com for 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.
We could simply upload a favicon manually to our website of 16x16 and it will probably show up in almost any browser.
But when you will mark it as one of your favorites on your smartphone or tablet, we will need larger images (60x60 to 144x144).
And lets say one of our users creates a shortcut on their desktop. In that case a 196x196 looks better!
Example code of what faviconit would give you, next to all the converted images:
Since Windows 8
But that is not all. Since windows 8 we are able to create shortcuts to websites with tiles!
Browserconfig.xml
Upload a file named browserconfig.xml (to enable the tiles in windows >8)
16x16 像素，*.ico 格式。
16x16 pixels, *.ico format.
我不确定浏览器是否/如何缩放大图标，但 W3C 建议如下1：
1 w3c.org：如何向您的网站添加网站图标（正在开发的草案）< /a>.
I am not sure if/how browsers scale large icons, but The W3C suggests the following1:
1 w3c.org: How to Add a Favicon to your Site (Draft in development).
最简单的解决方案（2021）
使用一个（！）SVG 图像
如果您不关心支持 Safari ，您可以使用单个 SVG 图标：
使用一个（！）PNG 图像
如果您想要完全支持*，您应该将其添加到文档的头部：
最后一个链接适用于 Apple（主屏幕），第二个链接适用于 Android （主屏幕）和其余的第一个。
该尺寸与 Android 主屏幕使用的尺寸完全相同。 Apple 主屏幕图标大小为 60 像素 (3x)，因此为 180 像素，并且会缩小。其他平台使用默认的快捷方式图标，该图标也会缩小。
*请注意，此解决方案不支持 Windows 8/10 中的“磁贴”。不过，它确实支持快捷方式、书签和浏览器选项卡中的图像。
The simplest solution (2021)
Use one(!) SVG image
If you do not care about supporting Safari, you can use a single SVG icon:
Use one(!) PNG image
If you want full support*, you should add this to the head of your document:
The last link is for Apple (home screen), the second one for Android (home screen) and the first one for the rest.
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.
*Note that this solution does not support "tiles" in Windows 8/10. It does, however, support images in shortcuts, bookmarks and browser-tabs.
实际上，要使您的网站图标在所有浏览器中正常工作，您必须添加 10 个以上大小和格式正确的文件。
我和我的朋友为此创建了一个应用程序！您可以在 faviconit.com 中找到它。
我们这样做了，所以人们不必创建所有这些图像和正确的标签都是手工创建的，所有这些都让我很恼火！
Actually, to make your favicon work in all browsers properly, you will have to add more than 10 files in the correct sizes and formats.
My friend and I have created an App just for this! you can find it in faviconit.com
We did this, so people don't have to create all these images and the correct tags by hand, create all of them used to annoy me a lot!
维基百科有这样的说法：
我认为最好的方法是使用 32x32 gif 并使用不同的浏览器进行测试。
Wikipedia has this to say:
I think the best way is to use a 32x32 gif and test it with different browsers.
适用于现代浏览器的简单解决方案 (2022)
使用 SVG 图标：
type和sizes）不是必需的Simple solution for modern browsers (2022)
Use an SVG favicon:
typeandsizesare not necessary您可以在同一个文件中拥有多种尺寸的图标。我经常创建 48、32 和 16 像素的图标（
.ico文件）。您可以添加任何您想要的尺寸的图像。问题是，iPhone 会使用 ico 文件吗？ico也支持透明度，但我不确定它是否是像PNG一样的alpha通道；可能更像是打开或关闭的 GIF。You can have multiple sizes of icons in the same file. I routinely create favicons (
.icofile) that are 48, 32, and 16 pixels. You can add in any size image you want. The question is, will the iPhone use anicofile?icoalso supports transparency, but I'm not sure if it's an alpha channel like PNG; probably more like GIF where it's on or it's off.根据 关于 Favicon 的维基百科文章，Internet Explorer 仅支持 ICO 格式的 favicon。
我会坚持使用两个不同的图标。
According to the Wikipedia Article on Favicon, Internet Explorer supports only the ICO format for favicons.
I would stick with two different icons.
据我所知，这几种解决方案都不是完美的。使用图标生成器确实是一个很好的解决方案，但它们的数量太多，很难选择。我想补充一点，如果您希望您的网站启用 PWA，则还需要提供一个 512x512 图标，如下所示 Google 开发人员：
我没有遇到很多强制执行该标准的图标生成器 (firebase 可以做到，但有很多事情它没有做到）。因此，该解决方案必须是许多其他解决方案的混合。
我不知道，在 2020 年初的今天，提供 16x16、32x32 是否仍然相关。我想在某些情况下这仍然很重要，例如，如果您的用户出于某种原因仍然使用 IE（这种情况仍然发生在一些由于某些原因而没有迁移到较新浏览器的私人公司中）
As I learned, no one of those several solutions are perfects. Using a favicon generator is indeed a good solution but their number is overwhelming and it's hard to choose. I d'like to add that if you want your website to be PWA enabled, you need to provide also a 512x512 icon as stated by Google Devs :
I didn't met a lot of favicon generators enforcing that criteria (firebase does, but there is a lot of things it doesn't do). So the solution must be a mix of many other solutions.
I don't know, today at the begining of 2020 if providing a 16x16, 32x32 still relevant. I guess it still matters in certain context like, for example, if your users still use IE for some reason (this stills happen in some privates companies which doesn't migrate to a newer browser for some reasons)
不，您不能使用非标准尺寸或尺寸，因为它会对显示图标的人们的浏览器造成严重破坏。您可以将其设置为 12x16（在 12 像素一侧有四个像素的白色/透明填充）以保留纵横比，但您不能变大（好吧，您可以，但浏览器会缩小它）。
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).
恐怕每个分辨率都需要单独的文件。关于 Campaign Monitor 有一篇非常好的文章，描述了他们如何为每个 iOS 设备创建和实现图标：
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
You will need separate files for each resolution I am afraid. There is a really good article on campaign monitor describing how they created and implemented their icons for each iOS device too:
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
favicon 的格式必须是方形的，否则浏览器会拉伸它。不幸的是，Internet Explorer < 11 不支持 .gif 或 .png 文件类型，仅支持 Microsoft 的 .ico 格式。您可以使用一些“favicon生成器”应用程序，例如：http://favicon-generator.org/
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.ico 是 16x16
我使用这些是为了在手机和平板电脑上美观：
在根目录中使用名称“favicon.ico”很重要，因为许多浏览器会首先尝试找到那里。
favicon.ico is 16x16
And I use these ones to be beautiful in mobile and tablet:
It's important to use the name "favicon.ico" in the root because many browsers will try to find there first.
TLDR：
“我不是来阅读的，我只想要一个能够为所有浏览器和分辨率提供最大支持的生成器，包括遗留支持和 Web 清单生成”：
https://numberchomper.com/FaviconGenerator
完整说明：
仍然推荐 .ico 吗？
根据 2005 年在 www.w3.org 上发表的文章：“您选择的图像必须为 16x16 像素或 32x32 像素，使用 8 位或 24 位颜色。” （尽管此后已添加 32 位颜色支持）。 .ico 格式支持单个文件中的多种分辨率，已成为网站图标的标准。现代 React 示例应用程序通常仍包含分辨率为 16x16、24x24、32x32 和 64x64 像素的示例 .ico 文件。尽管 .png 格式支持在现代浏览器中很普遍（例如，Firefox 自 起就支持它2003），许多网站继续使用 .ico 来提供旧版支持，并且仍在 Google 的网站图标示例。
Google 搜索和 Android Chrome 作为应用程序支持安装：
为了让您的收藏夹图标显示在 Google 搜索中，您的收藏夹图标还必须具有以下分辨率：48x48 像素的倍数，通常采用 PNG 或任何其他支持的格式。 Google 的 Material Design 指南建议设计图标的尺寸为 192x192 像素。因此，许多网站都包含 48x48 和 192x192 像素 PNG 图标，以涵盖对 Google 搜索和 Android Chrome 应用程序安装的广泛支持。值得注意的是，即使完全遵循 Google 的指南，他们可能仍然不会在 Google 搜索中显示您的网站图标。
Apple 支持：
要添加对 Apple 设备的支持，您需要添加带有 rel=”apple-touch-icon” 而不是 rel=”icon” 的图标链接。 Apple 设备的推荐尺寸：iPad（非视网膜）为 152x152 像素，iPhone 为 180x180 像素，iPad（视网膜）为 167x167 像素。
Web 应用程序清单：
Web 应用程序清单 允许安装 Web 应用程序在设备上作为应用程序。清单中指定的图标通常具有更高的分辨率，有时高达 512x512 像素，以适应应用程序图标所需的更高分辨率。清单是一个 JSON 文件，可以包含各种其他参数，例如背景颜色、名称和描述。您可以在 此处查看通过 Web 应用清单指定的图标的浏览器兼容性。
请记住在 HTML 头中包含对清单的引用：
TLDR:
"I’m not here to read and I only want a generator that will give maximum support for all browsers and resolutions, including legacy support and web manifest generation":
https://numberchomper.com/FaviconGenerator
Full explanation:
Is .ico still recommended?
According to this 2005 post on www.w3.org: "the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors." (although 32-bit color support has been added since). The .ico format, supporting multiple resolutions in a single file, has become a standard for favicons. Modern react sample apps typically still include a sample .ico file with resolutions of 16x16, 24x24, 32x32, and 64x64 pixels. Although .png format support is widespread in modern browsers (for instance, Firefox has supported it since 2003), many websites continue to use .ico for legacy support, and is still used in Google's example of a favicon.
Google search and Android Chrome install as app support:
For your favicon to display in Google searches, your favicon must also have resolutions which are multiples of 48x48 pixels typically in PNG or any other supported format. Google's material design guidelines suggest designing icons at 192x192 pixels. Consequently, many websites include 48x48 and 192x192 pixel PNG favicons to cover a wide range of support for Google search and Android Chrome app installation. It is important to note that even when following Google’s guidelines exactly they might still not display your favicon in Google searches.
Apple support:
To add support for Apple devices you need to add a link for favicons with rel=”apple-touch-icon” instead of rel="icon". The recommended sizes for Apple devices are 152x152 pixels for iPad (Non-retina), 180x180 pixels for iPhone and 167x167 pixels for iPad (Retina).
Web app manifest:
A web app manifest allows web apps to be installed on devices as applications. The icons specified in a manifest usually have higher resolutions, sometimes up to 512x512 pixels to accommodate for higher resolutions required by app icons. The manifest, a JSON file, can include various other parameters like background color, name, and description. You can see browser compatibility for icons specified via the web app manifest here.
Remember to include a reference to your manifest in the HTML head:
看来您的文件应该是
.ico类型。查看有关网站图标的这篇文章：
http://www.html-kit.com /support/favicon/image-size/
Seems like your file should be
.icotype.Check this post about favicons:
http://www.html-kit.com/support/favicon/image-size/
图标不一定是 16x16 或 32x32。您可以创建一个 80x80 或 100x100 的 favicon，只需确保两个值的大小相同，并且显然不要使其太大或太小，选择合理的大小。
The favicon doesn't have to be 16x16 or 32x32. You can create a favicon that is 80x80 or 100x100, just make sure that both values are the same size, and obviously don't make it too large or too small, choose a reasonable size.
我想提醒大家，问题是：
答案是：是的，这是可能的！是的，它将被缩放。不，您不需要“常规浏览器图标”。请看这个答案：https://stackoverflow.com/a/48646940/2397550
May I remind everybody that the question was:
The answer is: YES, that is possible! YES, it will be scaled. NO, you do not need a 'regular browser favicon'. Please look at this answer: https://stackoverflow.com/a/48646940/2397550