网站图标尺寸说明(16-256):在favicon.ico中包含什么
确切知道哪些图标尺寸属于您的favicon.ico以及为什么每个尺寸都很重要
立即转换网站图标实际显示的位置
大多数人认为网站图标是浏览器标签页中的小图标,但它们出现的位置远不止于此。了解每个场景有助于您选择要包含哪些尺寸,以便您的图标始终看起来清晰。
浏览器标签页是最可见的位置。每个打开的标签页以大约16像素显示您的网站图标,使其成为用户在打开许多标签页时识别您网站的主要方式。书签栏和菜单也在大多数浏览器中以16像素渲染您的图标,因此此尺寸的清晰版本是不可协商的。
某些浏览器中的地址栏和搜索建议在URL旁边显示网站图标,通常为16或32像素,具体取决于显示密度。历史面板的行为类似,提取网站图标以帮助用户浏览以前访问过的网站。
除了浏览器之外,网站图标也出现在操作系统场景中。当用户将您的网站固定到Windows任务栏或创建桌面快捷方式时,操作系统从ICO文件中提取并可能以48、64甚至256像素渲染图标。在高DPI(Retina级)显示器上,32像素图标可能会被拉伸以填充需要更多细节的空间,除非ICO内存在更大的变体,否则会产生模糊的结果。
Progressive Web App(PWA)使用它们自己的清单图标而不是favicon.ico,但网站图标仍然很重要,作为标准浏览器chrome的回退以及为不安装PWA而为网站添加书签的用户。
每个网站图标尺寸的用途
每个像素尺寸都有独特的用途。下表将每个标准网站图标尺寸映射到其常见用途,并指示您是否应该包含它。
| 尺寸(px) | 常见用途 | 包含? |
|---|---|---|
| 16 × 16 | 浏览器标签页、书签栏、地址栏、历史记录 | 是——必需 |
| 32 × 32 | 高DPI浏览器标签页、Windows任务栏、macOS Safari | 是——必需 |
| 48 × 48 | Windows网站固定快捷方式、Windows资源管理器 | 是——推荐 |
| 64 × 64 | 某些Windows UI表面、RSS阅读器 | 可选 |
| 128 × 128 | Windows大图标视图、Chrome网上应用店 | 可选 |
| 256 × 256 | Windows超大视图、高DPI桌面快捷方式 | 推荐完整性 |
16和32像素是绝对必需的。没有它们,浏览器会回退到通用地球仪或空白图标,这会损害品牌认知。这两个尺寸涵盖几乎所有标准DPI和高DPI浏览器标签页场景。
48像素在用户创建指向您网站的Windows快捷方式时进入画面。操作系统在默认图标视图中以48像素渲染桌面快捷方式,因此包含此尺寸可防止操作系统尴尬地放大32像素变体。
64和128像素出现在小众场景中。某些Windows UI表面和第三方应用程序请求64像素图标,而Chrome网上应用店和某些大图标视图使用128像素。包含它们只会为ICO文件添加几千字节,因此权衡是最小的。
256像素在高DPI显示器上最重要。当Windows渲染超大图标视图或用户在4K显示器上将您的网站固定到任务栏时,操作系统可能会提取256像素变体以获得最清晰的渲染。
推荐的安全集
如果您想要一个涵盖最广泛场景范围而不会产生不必要膨胀的单一favicon.ico,请使用此安全集:
- 16 px——浏览器标签页和书签
- 32 px——高DPI标签页和Windows任务栏
- 48 px——Windows桌面快捷方式
- 256 px——高DPI和超大图标视图
这个四尺寸集保持ICO文件紧凑(通常小于30 KB),同时确保在每个主要场景中清晰渲染。如果您的用例需要,可以添加64和128像素,但大多数网站永远不会注意到差异。
如果您纯粹为Web构建网站图标并且不希望用户创建桌面快捷方式,您可以将集合修剪为仅16和32像素。这会生成远小于10 KB的ICO文件。但是,包含48和256的成本如此之小,以至于我们建议将完整的安全集作为几乎每个项目的默认设置。
要更广泛地了解ICO格式的工作原理以及何时它是PNG的正确选择,请参阅我们的什么是ICO文件说明。
如何生成正确的网站图标尺寸
使用Any2ICO创建多尺寸favicon.ico只需几个步骤。该工具接受最大10 MB的PNG、JPG、WebP、GIF、BMP、AVIF和SVG源图像,并生成包含您选择的每个尺寸的正确结构的ICO文件。
- 从高分辨率源开始。上传512像素或更大的标志或图标。大源为转换器提供足够的细节,以在每个目标尺寸生成干净的缩小版本。SVG源特别有效,因为它们缩放没有任何细节损失。
- 选择您的尺寸。勾选16、32、48和256(安全集)的复选框,或者如果需要,添加64和128。
- 选择缩放行为。包含在保留纵横比的同时将图像适配到每个正方形内,填充任何额外空间。覆盖填充整个正方形,必要时裁剪边缘。对于大多数标志,带有透明背景的包含是最佳选择。
- 下载您的favicon.ico。将生成的文件放在网站的根目录(
https://yoursite.com/favicon.ico)。浏览器会自动查找此路径,因此在许多情况下您甚至不需要<link>标签。
Any2ICO使用Canvas API直接在您的浏览器中执行转换。从设备导入的文件通过服务器传输进行处理,但不存储。剪贴板粘贴完全保留在您的机器上。如果您一次转换多个图标,批处理模式允许您在单个ZIP文件中下载所有内容。
有关带有屏幕截图和HTML代码片段的完整演练,请参阅我们的如何创建favicon.ico分步指南。如果您特别需要转换PNG,我们的PNG转ICO指南详细介绍了该工作流程。
总结
选择正确的网站图标尺寸不必复杂。核心规则很简单:始终包含16和32像素,添加48和256以获得Windows和高DPI覆盖,并使用高分辨率源图像以保持每个尺寸清晰。该四尺寸安全集处理绝大多数现实世界场景。
当您准备好构建网站图标时,Any2ICO使其变得简单。上传图像,选择尺寸,并下载在任何地方都能工作的单个ICO文件。它是免费的、快速的,并尊重您的隐私。