正在加载...

HTML 网站图标

上一课 Head 已经搭好一个入门元数据盒子，包含 charset、viewport、title 以及样式表链接。网站图标（favicon） 是 head 里又一个实用的 link：出现在浏览器标签页、紧挨页面标题旁的那枚小图标。它帮助人们在拥挤的标签页、书签以及部分历史记录列表里认出你的站点。你不是用 CSS 文字把它画出来——而是让浏览器指向一个小巧的图像文件。

什么是网站图标

网站图标是站点的图标资源。浏览器会去拉取它，是因为你的 HTML（或像 /favicon.ico 这样的默认猜测）告诉它们该去哪里找。现代页面通常用 link 元素显式声明，好让路径和文件类型一目了然。图标应保持简洁，并且足够接近方形，这样才能在极小尺寸下仍然可读。

直接回答

在文档的 head 中添加一个带 rel="icon" 的 link，并用 href 指向你的图标文件。常见选择包括 favicon.ico、诸如 images/favicon.png 的 PNG，或 SVG 图标。路径的解析方式与其他相对 URL 相同（参见 File Paths）。更换文件之后，要预见到浏览器缓存——强制刷新或隐私窗口往往比普通重新加载更快显示出新图标。

经典的 .ico 链接

许多教程仍从与 HTML 文件同目录的 favicon.ico 起步。可选的 type 属性可以帮助浏览器理解该资源。

经典网站图标链接

html
HTML Code 
<head>
<title>My Site</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

阅读经典示例

  • link 位于 head 中，与 title 及其他元数据并列
  • rel="icon" 将该资源标记为网站图标
  • href="favicon.ico" 假定图标文件与本 HTML 页面放在一起
  • type="image/x-icon" 是 .ico 文件常见的 MIME 提示
  • 若路径不正确，标签页可能继续显示默认图标或空白图标

PNG 与 SVG 变体

PNG 网站图标很容易从设计工具导出。当浏览器支持时，SVG 网站图标在不同缩放比例下仍保持清晰。你可以把图标放在 images 文件夹里，并把 href 指到那里。

PNG 或 SVG 网站图标

html
HTML Code 
<head>
<title>My Site</title>
<link rel="icon" href="images/favicon.png" type="image/png">
<!-- or: href="images/icon.svg" type="image/svg+xml" -->
</head>

选择入门格式

  • .ico — 传统格式，被较旧的工具广泛识别
  • .png — 对已经会导出 PNG 素材的初学者来说很简单
  • .svg — 在受众浏览器支持时，是清晰的矢量选项
    第一天并不需要每种格式都上齐。先用一条正确的链接发布一枚清晰图标；若项目需要，再扩展到 apple-touch 或多尺寸打包方案。

路径与标记同样重要

如果 href 指向缺失的文件，网站图标请求会返回 404，标签页图标会悄无失败。请检查文件夹名称、拼写，以及 HTML 文件是否在没有带走图标的情况下被移动过。相对路径是相对于 HTML 文档的 URL，而不是相对于你“觉得文件应该在哪儿”的感觉。

缓存可能掩盖更新

浏览器往往对网站图标做激进缓存。你改了 favicon.png、重新加载，却仍看到昨天的标记。这并不总是意味着 HTML 写错了。试试强制刷新、隐私/无名窗口，或者临时重命名文件并更新 href，好让浏览器去拉取一个新的 URL。尽早养成这个习惯，免得学习者惊慌之下删掉本来正常的标记。

保持图标小而清晰

把一张巨大的照片塞进标签页，会变成难以辨认的模糊团块。优先使用简单的标志、高对比度和方形画布。网站图标是识别辅助，而不是第二张主视觉图。把细致的品牌设计留给页面正文。

链接应该放在哪里

把网站图标的 link 元素放在 head 里。把它们放进 body 对文档级图标来说是错误位置。你已经知道 head 负责元数据和资源链接；网站图标遵循同一规则。

在编辑器中练习

  1. 在 HTML 文件旁或 images 文件夹内放置一枚小巧的方形图标。
  2. 在 head 内添加路径匹配的 <link rel="icon" href="...">。
  3. 打开页面，查看标题文字旁的浏览器标签页。
  4. 故意弄错路径、重新加载，观察图标消失或回退——然后再修好。
  5. 替换图标文件；若旧图仍粘着，打开隐私窗口或强制刷新以确认新图案。

容易犯的错误

  • 把网站图标的 link 放在 body 而不是 head
  • href 写错，图标返回 404，而页面 HTML 看起来仍正常
  • 在旧网站图标仍被缓存时，指望立刻看到视觉更新
  • 用一张巨大照片代替小而简单的方形标志
  • 只部署 HTML 却忘记上传图标文件
  • 把 rel="stylesheet" 和 rel="icon" 弄混，然后疑惑为何 CSS 或标签页图标行为异常

小结

  • 网站图标在 head 中用 rel="icon" 链接
  • 让 href 指向真实存在的 .ico、.png 或 .svg 文件
  • 正确的路径加上冷静的缓存排查，能解决大多数“图标不见了”的报告
  • 保持图标小巧，并在标签页尺寸下可辨认
  • 一条能工作的链接，胜过一堆从未使用的图标格式

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程