Favicon 尺寸完全指南

工具相关 ·

Favicon 的尺寸选择是网站开发者经常面临的问题。不同的浏览器、操作系统和设备对 Favicon 有不同的尺寸要求。选择一个合适的尺寸组合，不仅能确保你的网站图标在所有设备上完美显示，还能避免加载不必要的资源。

本指南将详细介绍从 16×16 到 256×256 的所有常用 Favicon 尺寸，帮助你了解每个尺寸的用途和适用场景。

一、常用 Favicon 尺寸总览

以下是所有常用 Favicon 尺寸的快速参考表：

尺寸主要用途适用平台必要性
16×16浏览器标签页图标所有浏览器必须
32×32高分辨率标签页、新标签页所有浏览器、macOS推荐
48×48Windows 桌面快捷方式Windows 系统推荐
64×64高分辨率 Windows 显示Windows 高分屏可选
128×128Chrome Web Store、扩展Chrome 浏览器可选
256×256高分辨率显示、macOSRetina 显示器、macOS推荐

二、各尺寸详细说明

2.1 16×16 像素

这是最基础、最重要的 Favicon 尺寸。

16×16 像素是 Favicon 的标准尺寸，几乎所有浏览器在标签页中都使用这个尺寸。它是 Favicon 诞生时最初的标准尺寸，至今仍然是最广泛使用的。

适用场景

  • 浏览器标签页
  • 书签列表
  • 浏览器历史记录
  • 地址栏

设计要点

  • 图案必须极其简洁，因为可用像素非常有限
  • 避免使用文字——在 16×16 的画布上文字几乎不可读
  • 使用高对比度的颜色组合
  • 确保主要元素在中心区域

代码示例

<!-- 标准 16x16 Favicon -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

浏览器兼容性

浏览器支持情况
Chrome完全支持
Firefox完全支持
Safari完全支持
Edge完全支持
IE完全支持

2.2 32×32 像素

32×32 像素是现代浏览器在高分辨率屏幕上使用的尺寸。当设备像素比（Device Pixel Ratio）为 2 时，浏览器会使用 32×32 的图标来填充 16×16 的显示空间，从而实现更清晰的显示效果。

适用场景

  • 高分辨率（Retina）屏幕的标签页
  • 浏览器新标签页图标
  • Windows 任务栏
  • 部分操作系统的书签显示

设计要点

  • 相比 16×16 有更多的细节空间
  • 可以在保持简洁的同时添加一些设计细节
  • 仍然是较小的尺寸，避免过于复杂的图案

代码示例

<!-- 32x32 Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

ICO 文件中的应用

在 ICO 文件中，32×32 通常与 16×16 打包在同一个文件中：

favicon.ico
├── 16×16 (256 色)
└── 32×32 (256 色)

2.3 48×48 像素

48×48 像素的 Favicon 主要用于 Windows 系统，特别是当用户为网站创建桌面快捷方式时。

适用场景

  • Windows 桌面快捷方式
  • Windows 任务栏固定站点
  • 部分浏览器的较大图标显示

设计要点

  • 有足够的空间展示更多细节
  • 可以包含文字（但要确保在小尺寸下也可识别）
  • 建议保持核心设计元素与 16×16 版本一致

代码示例

<!-- 48x48 Favicon -->
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">

2.4 64×64 像素

64×64 像素的 Favicon 主要用于高分辨率的 Windows 环境。

适用场景

  • Windows 高分辨率桌面快捷方式
  • 部分现代浏览器的图标显示
  • macOS Dock 中的小型显示

设计要点

  • 可以包含更丰富的设计细节
  • 适合在高分辨率屏幕上显示清晰的效果
  • 注意在缩小到 16×16 时的显示效果

代码示例

<!-- 64x64 Favicon -->
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png">

2.5 128×128 像素

128×128 像素的 Favicon 主要与 Chrome 浏览器生态相关。

适用场景

  • Chrome Web Store
  • Chrome 扩展图标
  • Progressive Web App (PWA) 图标
  • Android Chrome 的"添加到主屏幕"功能

设计要点

  • 可以有丰富的细节和渐变效果
  • 建议使用圆角设计（部分平台会自动添加圆角）
  • 确保在缩小后仍然具有良好的辨识度

代码示例

<!-- 128x128 用于 Web App Manifest -->
{
    "icons": [
        {
            "src": "/icon-128x128.png",
            "sizes": "128x128",
            "type": "image/png"
        }
    ]
}

2.6 256×256 像素

256×256 像素是 ICO 格式支持的最大尺寸，适用于高分辨率显示器。

适用场景

  • macOS Retina 显示器
  • Windows 高分辨率显示
  • 操作系统级别的大图标显示
  • 打印和预览场景

设计要点

  • 这个尺寸可以展现最丰富的设计细节
  • 建议使用矢量设计工具，然后导出为不同尺寸的位图
  • 确保在大尺寸和小尺寸下都有良好的视觉效果

代码示例

<!-- 256x256 Favicon -->
<link rel="icon" type="image/png" sizes="256x256" href="/favicon-256x256.png">

三、ICO 文件中的多尺寸封装

ICO 格式的独特之处在于一个文件可以包含多个尺寸。一个完整的 favicon.ico 文件通常包含以下尺寸：

favicon.ico 内部结构：
┌──────────────────────────┐
│     ICO Header (6 bytes) │
├──────────────────────────┤
│     Directory Entry 1    │ → 16×16, 32-bit
│     Directory Entry 2    │ → 32×32, 32-bit
│     Directory Entry 3    │ → 48×48, 32-bit
│     Directory Entry 4    │ → 64×64, 32-bit
│     Directory Entry 5    │ → 128×128, 32-bit
│     Directory Entry 6    │ → 256×256, 32-bit
├──────────────────────────┤
│     Image Data 1         │ → 16×16 图像数据
│     Image Data 2         │ → 32×32 图像数据
│     Image Data 3         │ → 48×48 图像数据
│     Image Data 4         │ → 64×64 图像数据
│     Image Data 5         │ → 128×128 图像数据
│     Image Data 6         │ → 256×256 图像数据
└──────────────────────────┘

3.1 推荐的 ICO 尺寸组合

方案包含尺寸适用场景文件大小（约）
基础方案16×16, 32×32简单网站5-10 KB
标准方案16×16, 32×32, 48×48大多数网站10-20 KB
完整方案16×16 ~ 256×256专业网站50-150 KB

四、响应式 Favicon 策略

4.1 为不同场景提供不同尺寸

现代网站应该为不同的使用场景提供不同尺寸的 Favicon。以下是一个推荐的完整方案：

<head>
    <!-- 基础 ICO（兼容旧浏览器） -->
    <link rel="icon" href="/favicon.ico" sizes="any">
    
    <!-- SVG（现代浏览器，可缩放） -->
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
    
    <!-- PNG 多尺寸 -->
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
    <link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png">
    <link rel="icon" type="image/png" sizes="128x128" href="/favicon-128x128.png">
    <link rel="icon" type="image/png" sizes="256x256" href="/favicon-256x256.png">
    
    <!-- Apple Touch Icon -->
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>

4.2 Web App Manifest 配置

{
    "name": "我的网站",
    "short_name": "我的网站",
    "icons": [
        {
            "src": "/icons/icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-128x128.png",
            "sizes": "128x128",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

五、尺寸选择最佳实践

5.1 最小可行方案

如果你的网站只需要一个最基础的 Favicon 配置，请至少提供以下文件：

文件尺寸用途
favicon.ico包含 16×16 和 32×32通用兼容
favicon-32x32.png32×32现代浏览器标签页
favicon-16x16.png16×16传统浏览器兼容
apple-touch-icon.png180×180iOS 设备

5.2 推荐的完整方案

对于专业网站，推荐提供以下所有尺寸：

文件尺寸用途
favicon.ico16~256通用兼容（包含多尺寸）
favicon.svg矢量现代浏览器（自动适配）
favicon-16x16.png16×16标准标签页
favicon-32x32.png32×32Retina 标签页
favicon-48x48.png48×48Windows 快捷方式
favicon-64x64.png64×64高分辨率 Windows
favicon-128x128.png128×128Chrome / Android
favicon-256x256.png256×256高分辨率显示
apple-touch-icon.png180×180iOS 主屏幕
android-chrome-192x192.png192×192Android Chrome
android-chrome-512x512.png512×512Android Chrome

5.3 性能考虑

  • ICO 文件体积会随着包含尺寸的增多而增大，建议控制在 200KB 以内
  • PNG 文件使用无损压缩，体积相对较小
  • SVG 文件通常最小（几 KB），且可以无限缩放
  • 使用 sizes="any" 可以让浏览器自动选择最合适的尺寸

六、设备像素比（DPR）与 Favicon

6.1 什么是设备像素比？

设备像素比（Device Pixel Ratio，DPR）是指物理像素与 CSS 像素的比率。例如，Retina 显示器的 DPR 通常为 2，意味着 1 个 CSS 像素对应 4 个物理像素（2×2）。

6.2 DPR 对 Favicon 的影响

显示尺寸DPR 1xDPR 2xDPR 3x
16×16需要 16×16需要 32×32需要 48×48
32×32需要 32×32需要 64×64需要 96×96

6.3 推荐策略

为了在所有设备上获得最佳显示效果，建议：

  1. 始终提供 2 倍尺寸：如果标签页显示 16×16，至少提供 32×32 的版本
  2. 使用 SVG 格式：SVG 是矢量格式，自动适应所有 DPR
  3. 提供 ICO 多尺寸包：在 ICO 文件中包含 16×16、32×32、48×48 等尺寸

七、常见问题

Q1：我可以使用任意尺寸的图片作为 Favicon 吗？

浏览器会自动将你的图片缩放到合适的显示尺寸。但为了最佳显示效果，建议使用标准尺寸。非标准尺寸可能导致缩放模糊。

Q2：ICO 文件应该包含多少个尺寸？

建议至少包含 16×16 和 32×32。如果文件大小可接受（

Q3：SVG 格式可以替代所有 PNG 尺寸吗？

SVG 已经被大多数现代浏览器支持，但一些旧版浏览器（如 IE11）不支持。建议同时提供 SVG 和 PNG/ICO 作为后备方案。

总结

选择合适的 Favicon 尺寸是确保你的网站图标在所有设备上都清晰显示的关键。至少应该提供 16×16 和 32×32 两个基本尺寸，同时建议使用 ICO 格式的多尺寸封装来确保最大的兼容性。对于专业网站，使用我们的 Favicon 生成工具可以一键生成所有所需尺寸。

延伸阅读

阅读 13

相关文章

  • Favicon 缓存问题与解决方案

    网站Favicon更新后用户仍看到旧图标的缓存问题及解决方案，分析浏览器缓存机制、多层缓存层级及各浏览器缓存行为，提供清除缓存和强制刷新等用户端解决方法。

  • 各平台 Favicon 需求与适配方案

    本文详细介绍了各主流平台（Chrome、Firefox、Safari、Edge、iOS、Android、Windows）的Favicon需求，包括尺寸、文件格式、配置方式等，并提供完整的适配方案，帮助开发者确保网站Favicon在所有平台上完美显示。

  • 为什么要做 HTML 格式化与 HTML 压缩

    HTML格式化与压缩是网页开发基础优化动作，分别针对代码维护与页面加载性能，通过规范排版、清理冗余字符提升代码可读性、减少文件体积，优化网页加载速度与用户体验。

  • 倒计时为什么用本机时间

    网页倒计时基于浏览器本机时间而非网络时间，其计算逻辑直接使用当前时间戳与目标时间戳的差值，不受网络请求影响，但准确性完全依赖本机时钟，系统时间偏差会导致倒计时不准，重要场景需同步系统时间，且不处理时区转换，关闭页面后倒计时停止。

  • sitemap 放不下了怎么拆

    站点规模增长导致sitemap文件过大，需拆分以满足规范限制，包括URL数量上限5万条和体积上限50MB，通过索引文件关联多个子sitemap，并介绍按数量、类型或时间拆分策略及维护技巧，帮助开发者解决sitemap管理问题。

  • changefreq 和 priority 还有用吗

    sitemap中的changefreq和priority字段在现代搜索引擎中已基本失效，不再影响排名和抓取决策，了解其现状有助于开发者将精力集中于真正重要的优化工作如lastmod。

  • lastmod 不要每次都填今天

    sitemap中lastmod字段应记录真实页面更新时间而非每天填写当前日期，否则会被搜索引擎忽略并浪费抓取资源，正确做法是从数据库或文件系统获取实际修改时间。

  • 导出单文件 HTML 的好处

    导出自带样式的单文件HTML文档，兼顾格式保真与传播便利，适合跨平台分享和阅读，无需额外软件即可查看完整排版和样式。

  • PBKDF2 的迭代次数该怎么定

    PBKDF2 的安全强度完全依赖于迭代次数的设定，过高会导致登录缓慢并可能引发拒绝服务攻击，过低则存在安全隐患，需结合服务器性能、算法选择及并发情况综合确定最优迭代次数，并考虑参数持久化存储以应对硬件升级。

  • argon2id、argon2i、argon2d 怎么选

    argon2id、argon2i、argon2d三种算法的选择指南，解析内存访问差异及抗侧信道、抗GPU能力对比，适合需要配置安全密码哈希函数的开发者参考。