HTML简历图标应使用Unicode字符或内联SVG，而非favicon或外部图片；Unicode轻量兼容性好，SVG可定制样式且打印安全；需注意打印样式、颜色保留及无障碍支持。
用 <link rel="icon"> 设置页面图标，但别指望它出现在简历内容里
很多人搜“HTML简历加图标”，第一反应是给整个网页换个 favicon。这确实能提升专业感，但只在浏览器标签页上显示，和简历正文里的图标点缀完全不是一回事。
真正要做的，是在简历文字旁插入小图标（比如邮箱旁加 ?、电话旁加 ?），靠的是 HTML 实体或 SVG —— 不是 <link>，也不是 <img src="xxx.png"> 这种外部图片引用（容易挂、加载慢、缩放糊）。
-
<link rel="icon">只影响浏览器标签页，路径写错会静默失败，建议用 32×32 或 16×16 的.ico文件 - 正文图标必须用内联方式：直接写
📧（?）或嵌入小段 SVG，确保离线可用、打印不丢、缩放清晰 - 别用 CSS
background-image模拟图标——打印时默认不渲染背景，PDF 导出后就只剩空白
用 Unicode 实体插入常用联系图标，兼容性最好
最轻量、最稳的方式就是用 Unicode 字符。Chrome/Firefox/Edge 全支持，手机点开也能正常复制粘贴，导出 PDF 后依然可见。
示例写法：
立即学习“前端免费学习笔记（深入）”；
<p><strong>邮箱</strong>: 📧 <a href="mailto:me@example.com">me@example.com</a></p> <p><strong>电话</strong>: 📞 <a href="tel:+8613800138000">+86 138 0013 8000</a></p> <p><strong>GitHub</strong>: 💻 <a href="https://github.com/username">github.com/username</a></p>
注意三点：
- 实体码必须用
...十六进制格式（不是...十进制），否则部分老浏览器可能不识别 - 图标和文字之间**不要加空格**，否则打印时可能换行错位；如需间距，用 CSS 的
margin-right控制更可靠 - 避免用生僻 emoji（如 ?⚡✅），某些系统字体缺失会导致显示为方框或替换成系统默认符号
用 inline SVG 替代图片，控制尺寸和颜色更灵活
如果需要统一风格（比如全灰、全蓝）、或想让图标随文字大小缩放，inline SVG 是唯一靠谱选择。它本质是代码，不依赖网络，可直接用 CSS 调色、旋转、hover 动画。
一个最小可用的邮箱 SVG 图标：
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 4C2 3.44772 2.44772 3 3 3H13C13.5523 3 14 3.44772 14 4V12C14 12.5523 13.5523 13 13 13H3C2.44772 13 2 12.5523 2 12V4Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 4L8 8L14 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>
把它塞进 <p> 里，再加个 class 就能统一样式：
<p><strong>邮箱</strong>: <span class="icon"><svg>...</svg></span> <a href="...">me@example.com</a></p>
- CSS 中设
.icon { display: inline-block; vertical-align: middle; margin-right: 4px; }，确保对齐不跳动 - 别用
width/height固定尺寸，改用font-size控制 SVG 大小（前提是 SVG 的viewBox正确，且没写死width/height属性） - 如果从 Iconfont 或 Figma 复制 SVG，删掉冗余
id、style和命名空间属性，只留viewBox和路径
导出 PDF 时图标消失？检查 @media print 是否禁用了 SVG 或 emoji
Chrome “另存为 PDF” 默认会启用打印样式，而很多自定义 CSS 里写了 @media print { svg { display: none; } } 或重置了 color 导致 emoji 变成黑块。
解决方法很简单，在 <style> 里加一段最小干预：
@media print {
.icon, .icon svg {
display: inline-block !important;
}
body {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
-
color-adjust: exact是关键，它强制打印时保留 emoji 和 SVG 的原始颜色，不然一律变黑白 - 别试图在 print 媒体查询里隐藏导航栏或侧边栏就顺手把所有
svg都干掉——图标不是装饰，是信息的一部分 - 测试前先用 Chrome DevTools 的 Print Preview（Ctrl+Shift+P → 输入 “Rendering” → 勾选 “Emulate CSS media type: print”），比反复导出快得多
真正难的不是加图标，而是让图标在任何场景下都稳定传达信息：屏幕阅读器能读出来、手机点得开、打印不丢、PDF 不糊、深色模式不突兀。这些细节堆起来，才是专业简历和“随便做个页面”的分水岭。
