如何在HTML中添加网站图标(以及使用哪些rel标签)
正确的链接标签、正确的位置,以及如何修复拒绝显示的网站图标
创建网站图标将网站图标添加到您的网站应该是Web开发中最简单的任务之一,但它比您预期的更频繁地困扰开发人员。在关于使用哪些<link>标签的相互矛盾的建议、令人困惑的rel属性值以及顽固地缓存旧图标的浏览器之间,让网站图标真正显示出来可能感觉像猜谜游戏。
事实是,大多数网站的网站图标设置可以简化为单个文件和单个HTML标签。本指南消除了噪音,为您提供您真正需要的内容:最小的实用设置、最有用的rel标签变体,以及处理使新网站图标不可见的缓存问题的明确说明。
如果您还没有favicon.ico文件,请在不到一分钟的时间内使用Any2ICO创建一个。它接受PNG、SVG、JPG、WebP和其他格式,并生成在任何地方都能工作的多尺寸ICO文件。然后回到这里将其连接到您的HTML。
最简单的网站图标设置
在深入研究标签变体和边缘情况之前,这是适用于绝大多数网站的方法。它需要一个文件和一行HTML。
将favicon.ico放在域的根目录。上传或部署favicon.ico文件,使其可在https://yourdomain.com/favicon.ico访问。这是自1990年代后期以来浏览器默认检查的路径。即使没有任何指向它的HTML标签,大多数浏览器也会自动找到并显示此位置的网站图标。这个约定已融入浏览器行为,不会消失。
将一个链接标签添加到HTML头部。虽然根路径约定自己就能工作,但添加显式标签可以消除所有歧义,并确保跨浏览器、子域和单页应用程序的一致行为,其中文档根可能不直接映射到服务器根。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>您的页面标题</title>
<link rel="icon" href="/zh/favicon.ico" sizes="any">
</head>
<body>
<!-- 您的内容 -->
</body>
</html>单个<link>标签足以满足每个主要浏览器的需求:Chrome、Firefox、Safari、Edge,甚至Internet Explorer的传统版本。sizes="any"属性告诉浏览器ICO文件包含多个分辨率,它应该为当前场景选择最合适的分辨率,无论是16x16标签页图标还是32x32书签图标。
这是我们推荐给大多数网站的设置。它简单、可靠且得到普遍支持。您可以在此处停止,您的网站图标将在几乎所有场景中正确工作。
常见的网站图标rel标签及何时使用它们
如果您在线搜索“网站图标HTML标签”,您会找到数十种具有不同rel值、type属性和sizes声明的变体。大多数这些都是为特定边缘情况或历史浏览器怪癖创建的。这是您最可能遇到的标签的实用分解以及每个标签何时真正有用。
| 标签 | 目的 | 必需? |
|---|---|---|
<link rel="icon" href="/zh/favicon.ico" sizes="any"> | 主要网站图标声明。将浏览器指向多尺寸ICO文件。 | 是(推荐) |
<link rel="icon" type="image/png" href="/zh/icon-32.png" sizes="32x32"> | 在特定尺寸提供PNG网站图标。某些现代浏览器更喜欢PNG而不是ICO。 | 否(可选增强) |
<link rel="icon" type="image/svg+xml" href="/zh/icon.svg"> | 完美缩放到任何尺寸的SVG网站图标。在Chrome、Firefox和Edge中受支持。 | 否(可选,非通用) |
<link rel="apple-touch-icon" href="/zh/apple-touch-icon.png"> | iOS主屏幕书签的图标。当用户将您的网站添加到主屏幕时,Apple设备使用此图标。 | 否(仅在针对iOS时) |
<link rel="shortcut icon" href="/zh/favicon.ico"> | 传统语法。shortcut关键字是非标准的,被现代浏览器忽略。 | 否(过时) |
type属性指定图标文件的MIME类型。对于ICO文件,您可以完全省略它,因为浏览器会自动检测ICO格式。对于PNG网站图标,使用type="image/png"。对于SVG,使用type="image/svg+xml"。
sizes属性告诉浏览器图标提供什么尺寸。对于多尺寸ICO文件,sizes="any"是最干净的方法。对于单尺寸PNG文件,指定确切的尺寸,如sizes="32x32"。如果您提供具有不同尺寸的多个图标标签,浏览器将选择最接近其需要的那个。
实际上,此表的第一行是大多数网站所需的全部内容。如果您关心iOS主屏幕外观,请添加apple-touch-icon行。PNG和SVG行是希望对图标交付进行细粒度控制的开发人员的可选增强功能。
缓存和“网站图标未显示”
您部署了新的网站图标,刷新了页面,旧图标仍然从浏览器标签页中盯着您。这不是您代码中的错误。这几乎肯定是一个缓存问题,这是开发人员认为网站图标设置损坏的最常见原因,而实际上它工作得很好。
浏览器积极缓存网站图标。与常规页面资产不同,网站图标通常单独缓存并且持续时间更长。例如,Chrome将网站图标存储在专用数据库中,该数据库并不总是响应正常页面刷新。Firefox和Safari也有类似的行为。这意味着即使在服务器上替换文件后,浏览器也可能继续显示旧图标数小时甚至数天。
硬刷新:按Ctrl+Shift+R(Windows/Linux)或Cmd+Shift+R(macOS)绕过缓存并从服务器重新加载所有资产。这适用于大多数页面资源,但并不总是专门清除网站图标缓存。
隐身窗口:在私密或隐身浏览窗口中打开您的网站。这以完全空的缓存开始,将从服务器新鲜加载网站图标。如果您在隐身模式下看到正确的网站图标,您的设置是正确的,正常浏览会话只需要时间来接受更改。
手动清除浏览器缓存:如果隐身确认了新网站图标但您的常规会话仍显示旧图标,请清除浏览器的缓存图像和文件。在Chrome中,转到设置、隐私和安全、清除浏览数据,然后选择缓存的图像和文件。清除后,重新加载您的网站。
添加缓存清除查询字符串:作为开发期间的临时措施,您可以附加查询字符串以强制浏览器将网站图标视为新资源:<link rel="icon" href="/zh/favicon.ico?v=2" sizes="any">。每次更新网站图标时增加版本号。一旦您对图标满意,请删除查询字符串,或将其保留为永久版本控制策略。
尺寸和文件选择:ICO与PNG
您应该使用ICO文件、PNG文件还是两者都用?答案取决于您希望在设置中有多少复杂性以及需要支持哪些浏览器。
ICO是通用选择。自1999年Internet Explorer 5引入网站图标以来,ICO格式一直是标准网站图标格式。每个支持网站图标的浏览器都支持ICO。单个ICO文件可以包含多个尺寸(16x16、32x32、48x48等),因此浏览器始终有正确的分辨率可用,而您无需为每个尺寸维护单独的文件。为了简单性和最大兼容性,ICO是最安全的选择。
PNG是现代替代方案。Chrome、Firefox、Safari和Edge的所有当前版本都通过<link rel="icon" type="image/png">标签支持PNG网站图标。PNG网站图标稍微简单一些(一个尺寸的单个PNG文件),但您需要为每个要提供的尺寸使用单独的文件和标签。这可能意味着HTML头部中有两三个额外的链接标签。
SVG是最新选项。Chrome、Firefox和Edge支持SVG网站图标,但截至2025年初Safari不支持。SVG网站图标完美缩放到任何尺寸,这对高DPI显示器很有吸引力。但是,缺乏Safari支持意味着您仍然需要ICO或PNG回退。
对于大多数网站,我们推荐务实的方法:使用多尺寸ICO文件作为主要网站图标,并可选择添加PNG或SVG图标作为增强。这通过ICO文件为您提供通用兼容性,并通过其他格式提供现代优化。有关要包含哪些尺寸以及为什么的详细分解,请参阅我们的网站图标尺寸说明指南。