网页图标（favicon）与列表项标记（list-style）功能独立、机制不同：favicon 须用 <link rel="icon"> 在 <head> 中声明，支持 .ico/.png/.svg；列表符号则由 CSS 的 list-style-type、list-style-image 等控制，不可混用。
网页图标（favicon）和列表项标记（list-style）是两个完全独立的功能，常被初学者混淆。favicon 是浏览器标签页、书签栏里显示的小图标；而列表项标记是 ul 或 ol 中每个 li 前面的圆点、数字等视觉符号。它们用的 HTML/CSS 机制不同，不能混用。
favicon 设置必须用 <link rel="icon">
浏览器不会从 CSS 或列表属性里读取 favicon。唯一可靠方式是在 <head> 中写 <link> 标签：
-
rel="icon"是强制要求，rel="shortcut icon"已过时，现代浏览器只认icon -
href路径建议用绝对路径（如/favicon.ico），避免子页面加载失败 -
type属性虽非必需，但显式声明能减少 MIME 类型猜测错误，比如type="image/x-icon"（.ico）、type="image/png"（.png）、type="image/svg+xml"（.svg） - 不要只放一个
.png：Safari 旧版、IE 等仍依赖.ico；推荐同时提供favicon.ico（兼容性兜底）和favicon.svg（高清缩放无损）
列表项标记用 CSS 的 list-style 控制
ul 和 ol 的项目符号不靠 <link>，而是通过 CSS 的 list-style 相关属性控制：
-
list-style-type决定符号类型：disc（实心圆，默认ul）、circle、square、decimal（数字，默认ol）、lower-alpha等 -
list-style-image可指定自定义图片，但要注意：它会完全替代list-style-type，且图片加载失败时无 fallback；更稳妥的做法是用background-image+padding-left模拟 -
list-style-position控制符号位置：outside（默认，符号在文本框外）、inside（符号在文本框内，影响换行对齐） - 务必先清空默认样式：
ul, ol { list-style: none; }，否则自定义背景图可能和原生符号重叠
常见踩坑：把 favicon 当成列表图标用
有人试图这样写来“给列表加图标”：
立即学习“前端免费学习笔记（深入）”；
<link rel="icon" href="checkmark.png"> <ul> <li>已完成</li> </ul>
这是无效的。<link rel="icon"> 对 li 完全不起作用。真正要做的，是用 CSS 给 li 加背景图或伪元素：
- 用伪元素方案（推荐）：
li::before { content: "✓"; margin-right: 6px; }，语义清晰、无需额外资源 - 用背景图方案：需设
li { background: url(checkmark.png) no-repeat left center; padding-left: 24px; }，注意background-position和padding-left需匹配图标尺寸 - 别在
<ul>上直接设list-style-image后又忘了清除默认disc，结果出现双符号
favicon 和列表标记分属不同层级：一个是文档元信息（HTML <head>），一个是渲染样式（CSS）。搞混这两者，是调试半天找不到图标的最常见原因。
