HTML图标库使用与引入指南

把 SVG 代码直接写进 HTML，不依赖外部资源、无加载延迟、样式可直接用 CSS 控制颜色/大小：

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M8 2L10.828 4.828L7 8.657L10.828 12.485L8 15.314L4.172 12.485L8 8.657L4.172 4.828L8 2Z" fill="currentColor"/>
</svg>

要点：

• 用 fill="currentColor" 让 SVG 颜色跟随父元素 color 值，方便统一主题色
• 避免直接复制在线生成器导出的带 style="fill:#000" 的 SVG —— 会覆盖 CSS 控制
• 如果图标来自 Figma 或 Illustrator，导出时选「Inline SVG」并手动删掉冗余 id、class 和 style

favicon 多尺寸适配要靠 rel="icon" 多次声明

现代设备对图标尺寸要求不同：桌面浏览器常用 32×32，Android Chrome 用 192×192，iOS Safari 用 180×180。单靠一个 .ico 文件不够，得叠加声明：

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

关键细节：

• apple-touch-icon 不是 rel="icon"，必须单独写，且 iOS 不读取 sizes 属性，只认文件名后缀或 link 标签顺序
• site.webmanifest 是 PWA 必需，里面定义 icons 数组，格式为 JSON，和 HTML 中的 是互补关系，不是替代
• 所有图标文件建议提前压缩（用 Squoosh 或 svgomg），否则一个未压缩的 192×192 PNG 可能超 20KB，拖慢首屏

favicon 看似简单，但路径、格式、尺寸、声明顺序、缓存策略任意一环出错，都会导致图标不显示或显示错位——尤其上线后清过缓存还看不到，大概率是路径写成相对路径或服务器没配对 MIME 类型。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。