给网页标签（即浏览器标签页上的图标，也称为 favicon）添加 Logo

·离歌.

于 2025-05-24 16:13:18 发布

阅读量713

点赞数 10

CC 4.0 BY-SA版权

文章标签：前端 html5

本文链接：https://blog.csdn.net/T_727/article/details/148192457

方法 1：使用 `favicon.ico`（传统方法）

准备图标文件
- 制作一个 .ico 格式的图标（推荐尺寸：16x16px 或 32x32px）。
- 也可以使用 PNG/SVG（现代浏览器支持），但 .ico 兼容性最好。
将图标文件放在网站根目录
- 将文件命名为 favicon.ico，并上传到网站的根目录（即和 index.html 同级）。

在 HTML 中添加链接
在 <head> 标签内加入：

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

方法 2：使用 PNG/SVG（现代方法）

如果使用 PNG 或 SVG 格式，可以指定多尺寸适配：

<!-- 通用 favicon -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- SVG 格式（推荐） -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- 高分辨率适配（如苹果设备） -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

方法 3：多平台适配（推荐）

为覆盖所有设备（PC、手机、平板等），可以使用以下完整方案：

<!-- 基础 favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- 或者使用 manifest 文件（PWA 适用） -->
<link rel="manifest" href="/site.webmanifest">