源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

HTML 网站图标

2026/02/10
33
0

学习目标

  • 理解 favicon 的作用与重要性

  • 掌握在 HTML 中正确添加 favicon 的方法

  • 了解不同设备和浏览器对 favicon 尺寸与格式的要求

  • 能够排查并解决常见的 favicon 显示问题

什么是 Favicon

Favicon（全称 favorite icon，收藏夹图标）是一个小型图像，通常显示在：

  • 浏览器标签页左侧

  • 书签 / 收藏夹列表中

  • 浏览历史记录

  • 移动设备主屏幕（当用户“添加到主屏”时）

为什么需要

优势

说明

提升品牌识别度

用户一眼认出你的网站（如 GitHub 的猫头、Twitter 的蓝鸟）

增强专业感

无 favicon 的网站显得不完整或临时

改善用户体验

在多个打开的标签页中快速定位目标页面

支持 PWA 和移动设备

是现代 Web 应用（PWA）的重要组成部分

在 HTML 中添加

只需在 <head> 部分添加一个 <link> 标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网站</title>
    
    <!-- 添加 favicon -->
    <link rel="icon" 
          href="https://i0.hdslb.com/bfs/static/jinkela/long/images/favicon.ico" 
          type="image/png">
</head>
<body>
    <h3 style="color:green;">我的B站</h3>
    <p>Welcome to my website</p>
</body>
</html>

属性说明

属性

说明

rel="icon"

表示这是一个 favicon（旧标准也支持 rel="shortcut icon"，但已过时）

href

图标文件的路径（可为相对路径、绝对路径或完整 URL）

type

MIME 类型，如 image/x-icon（.ico）、image/png、image/svg+xml

最佳实践：即使使用 .png 文件，也建议明确指定 type="image/png"，提高兼容性

尺寸与多设备适配

虽然传统 favicon 为 16×16 或 32×32 像素，但现代设备需要多种尺寸以适配不同场景：

尺寸 (px)

用途

16×16

传统桌面浏览器标签页

32×32

高分辨率显示器、Windows 任务栏

57×57

旧版 iPhone 主屏图标

76×76

iPad 主屏图标

120×120

iPhone Retina 显示屏

152×152 / 167×167

iPad Retina

180×180

iPhone 6 Plus 及更新机型

192×192

Android Chrome 主屏图标（PWA 推荐）

196×196

Chrome for Android

512×512

Google Play 安装横幅（PWA）

推荐做法

<!-- 基础 favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- 高清 PNG 版本（现代浏览器优先使用） -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon（iOS/iPadOS） -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android / PWA -->
<link rel="manifest" href="/site.webmanifest">

提示：.ico 格式可在一个文件中包含多个尺寸（如 16×16、32×32、48×48），是兼容性最强的选择。

支持格式

格式

浏览器支持

优点

缺点

ICO

✅ 所有浏览器

支持多尺寸、高兼容性

不支持透明度（旧版）、文件略大

PNG

✅ 现代浏览器

支持透明、高压缩、清晰

IE8 及更早版本不支持

SVG

✅ Chrome/Firefox/Safari

无限缩放、文件小

Safari 对 SVG favicon 支持有限

WebP

⚠️ 部分支持

高质量、小体积

Safari 目前不支持作为 favicon

GIF/JPEG

⚠️ 技术上可行

—

不推荐（GIF 动画在标签页无意义，JPEG 无透明）

推荐组合：

  • 主 favicon：favicon.ico（含 16×16 和 32×32）

  • 补充：favicon-32x32.png（用于现代浏览器高清显示）

常见问题

问题 1：Favicon 不显示

原因

解决方法

浏览器缓存

强制刷新（Ctrl+F5 / Cmd+Shift+R）或使用隐身模式测试

路径错误

检查 href 是否正确；建议先放在网站根目录（如 /favicon.ico）

文件格式不被支持

使用 .ico 或 .png，避免 .jpg

MIME 类型错误

确保服务器返回正确的 Content-Type（如 image/x-icon）

问题 2：本地正常，上线失效

  • 原因：服务器未正确配置 favicon 路径或 MIME 类型。

  • 解决：

    • 将 favicon.ico 放在网站根目录（大多数浏览器会自动请求 /favicon.ico）

    • 或显式在 HTML 中声明完整路径：

      <link rel="icon" href="/assets/icons/favicon-32x32.png" type="image/png">

问题 3：移动端不显示

  • 原因：未提供 apple-touch-icon 或 Web App Manifest。

  • 解决：

    <!-- iOS 主屏图标 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- PWA 配置（可选但推荐） -->
<link rel="manifest" href="/manifest.json">

最佳实践

  1. 至少提供一个 favicon
    最简单方式：将 favicon.ico 放在网站根目录（无需 HTML 声明，浏览器会自动加载）。

  2. 优先使用 .ico + .png 组合

    • favicon.ico：保障 IE 和旧浏览器兼容

    • favicon-32x32.png：供现代浏览器使用高清版本

  3. 使用工具生成完整图标包

    https://realfavicongenerator.net/

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的专业网站</title>
    
    <!-- 基础 favicon（兼容所有浏览器） -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    
    <!-- 现代浏览器高清 favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    
    <!-- iOS 主屏图标 -->
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    
    <!-- PWA 清单（可选） -->
    <link rel="manifest" href="/site.webmanifest">
</head>
<body>
    <h1>欢迎访问！</h1>
</body>
</html>

对应文件应放在网站根目录或指定路径下。