怎样给自己的网站加上 Favicon——2026 年最佳实践
你有没有在浏览器标签栏的一堆标签页里，靠图标来找你想看的那个网页？
我就是这样。当 tab 开多了，文字标题被遮挡，唯一能帮我定位网页的就是那个小图标。
这就是 favicon 的作用——不显眼，但没有它，你的网站在浏览器里就是”无名氏”。
一句话理解： Favicon 是网站的”头像”——它出现在浏览器标签页、收藏夹、地址栏旁边，是用户第一眼识别你网站的标志。
2026 年推荐方案
SVG Favicon（推荐）
以前 favicon 只能用 .ico 格式，现在可以用 SVG 了：
1 | <link rel="icon" type="image/svg+xml" href="/favicon.svg"> |
SVG 的好处：
- 矢量：任何分辨率下都清晰，Retina 屏也没问题
- 多色：可以包含多种颜色
- 体积小：通常几百字节到几 KB
- 支持 dark mode：可以跟随系统主题
多尺寸兼容
虽然 SVG 是趋势，但不是所有地方都支持它。稳妥的做法是提供多个尺寸：
1 | <!-- 推荐方案 --> |
深色主题支持
1 | <!-- 浅色主题用彩色图标 --> |
Apple Touch Icon
iOS 用户把网站添加到主屏时需要这个：
1 | <!-- 基础版 --> |
经验之谈： Apple touch icon 不需要自己做圆角——iOS 系统会自动给图标加上圆角和高光。你只需要提供一个 180×180 的纯方形图标就好了。我做第一次时花了半小时给图标加圆角，后来发现 iOS 会自动加——白忙活了。
完整配置
这是我的博客目前的 favicon 配置：
1 | <!-- 基础 favicon --> |
制作工具
2026 年不需要手动做 ico 了：
- SVG 图标：用 Figma 或 Sketch 设计，导出为 SVG
- Favicon 生成器：传入一张图片，自动生成所有尺寸（推荐：realfavicongenerator.net）
- Emoji 临时方案：没设计好图标前，可以用 Emoji 当 Favicon（通过 SVG 内嵌 Emoji）
相关推荐
P.S. 我博客的 favicon 是一个很简单的”飞鲤”首字母变形——一共花了半小时设计。但就是这半小时的投入，让朋友第一次看到我的博客时说”这个图标挺有意思”。很多时候，好的细节不是花了很多时间做的，是用心做的。 如果你还没有 favicon，今天花 10 分钟做一个吧。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 飞鲤的自留地！
wechat
alipay
相关推荐
2020-06-11
HTML5 移动端前端开发要点——2026 年更新版
几年前我做了一个移动端页面，当时市面上流行的是”rem + JS 动态计算根字号”的方案。 那时我研究了一整天 rem 的计算公式，才把适配搞定。几个月后重新翻项目，发现自己写了一堆分辨率的 media query 和 JS 计算代码。 现在回头看，那些代码已经可以全部删掉了——因为 CSS 已经用新的特性覆盖了这些需求。 一句话理解： 移动端前端开发的核心就是三件事——适配不同屏幕尺寸、触控交互优化、性能与缓存。 2026 年移动端适配方案1. 视口设置1<meta name="viewport" content="width=device-width, initial-scale=1.0"> 注意：不要再加 user-scalable=no 了！ 这是 WCAG 无障碍标准的违规行为——用户需要能放大页面来看小字。 2. 用 clamp() 替代 rem 计算1234567891011121314/* ❌ 旧方案（2020 年前） */html { font-size: calc(100vw / 18); ...
2020-06-11
为什么不再用 Table 做网页布局？——从 Table 到 Flexbox 到 Grid 的进化史
你有见过那种 2000 年代初的网站吗？满屏的 <table> 嵌套 <table>，像俄罗斯套娃一样，一个表格里塞一个表格，再塞一个表格…… 我刚开始学做网页的时候，用的就是 table 布局。不是因为 table 布局好，是因为那时候我只知道这一种布局方式。 后来学了 CSS，才发现以前用 table 做的很多事，CSS 只需要几行代码就能搞定，而且更灵活、更高效。 一句话理解： <table> 是用来展示表格数据的，不是用来搭页面框架的——就像你不会用筷子喝汤一样，工具要用对地方。 Table 布局的问题在哪 问题 说明 代码臃肿 Table 布局需要大量嵌套标签，比 Flexbox/Grid 多出 50-70% 的 HTML 渲染阻塞 浏览器必须等整个 <table> 加载完才能开始渲染（包括内容） 响应式困难 表格天生定宽，要适配手机非常麻烦 语义错误 用 table 做布局等于告诉搜索引擎”这是数据表格”，影响 SEO 可维护性差 改一个地方的布局，可能要动十几层嵌套的 table 结...
2020-06-11
关于字体图标和 SVG 图标——2026 年你该知道的选择
我早期做网站时，图标全部用的是图片——每个图标一张 PNG。 后来我发现了字体图标（Font Icon），感觉就像发现了新大陆：一套字体搞定所有图标，用 CSS 就能控制颜色和大小。 但字体图标也有它的问题。2026 年，我大部分项目开始转向 SVG 图标了。 一句话理解： 字体图标是把图标放进”字体文件”，用字符来显示；SVG 图标是用 HTML 标签直接画图标——各有优劣，看场景选择。 字体图标 vs SVG 图标 维度 字体图标 SVG 图标 渲染原理 字体渲染 矢量图形渲染 颜色支持 单色（或 CSS 渐变色） 多色、多层级 缩放 矢量，不失真 矢量，不失真 性能 好（字体文件一次加载） 好（每个图标独立加载） 可访问性 可用 aria-label 支持 title/desc 深色模式 通过 CSS 控制 通过 CSS 变量控制 CSS 控制 font-size/color width/height/fill/stroke 字体图标的时代Font Awesome 和 Iconfont（...
2020-06-11
GB2312、GBK 和 UTF-8：2026 年还在纠结编码问题？
有一次我给一个香港的朋友分享我的博客链接。他打开后说：”你网站标题怎么是乱码？” 我当时一愣——我本地看明明好好的。远程一看，首页标题显示了一堆奇奇怪怪的符号。 查了半天才找到原因：服务器的 Content-Type 响应头写死了 charset=gb2312，而我的页面用的却是 UTF-8 编码保存的。浏览器跟着服务器的指示走，解码方式对不上，中文就变成了”天书”。 一句话理解： 字符编码就是”计算机里的 0 和 1 翻译成文字的那本字典”——如果编辑器用一种字典写，浏览器用另一种字典读，出来的就是乱码。 为什么有这么多编码？这要从计算机的历史说起。 计算机是美国发明的，所以最早的字符编码 ASCII 只考虑了英文——26 个字母加一些符号，128 个位置就够了。但轮到中国、日本、韩国这些国家用计算机时发现——我们那几千个汉字往哪儿放？ 于是各国都搞了自己的编码标准： 编码 时间 支持范围 编码容量 GB2312 1980 年 简体中文 6763 个汉字 GBK 1995 年 简体 + 繁体中文 21886 个字符 GB18030 2000 年 简繁 + 少...
2020-06-11
Meta 标签功能大全——你可能不知道的 20 种用法
有一回面试前端，面试官问我：”你说一下 <meta> 标签有哪些用法？” 我当时心想，这还不简单——“charset、keywords、description、viewport……” 然后我说了四个之后卡住了。 面试官微微一笑：”那你知不知道 theme-color 和 color-scheme？” 我说我确实不知道。那次面试我挂了，但那之后我花了一个下午把 MDN 上关于 meta 的文档全部过了一遍，整理了一份清单。这个习惯我一直保留到现在——任何时候觉得自己”知道”，就去翻一遍 MDN，总有你没见过的 tag。 一句话理解： <meta> 是网页的”元数据层”，它告诉浏览器、搜索引擎、和各种第三方工具”这个页面是谁、该怎么对待它”。 怎么分组理解 Meta 标签Meta 标签看起来多，其实可以分成 6 组，每组 2-5 个标签。分组记忆法比死记硬背好用得多。 1. 基础元数据（每页必加）12345678<!-- 字符编码：一定要在 head 的第一行 --><meta charset="utf-8"><...
2020-06-11
网站基础术语入门——你该知道的 20 个核心概念
我刚开始学做网站的时候，最痛苦的不是写代码——是看不懂别人在说什么。 “你把 CSS 写到 style 里，路径用相对路径，图片用 CDN，别忘了加 SSL……” 我当时内心：CSS 是什么？路径还分相对和绝对？CDN？SSL？ 每一个词都认识，连在一起就是天书。 如果你也有这种感觉，不要慌——这些术语第一次接触谁都懵。 我花了整整两年才把”这堆名词到底对应什么”搞明白。这篇帮你一次性理清。 一句话理解： 网站技术术语就像工具箱里的工具——你不需要认识所有工具才能用，但了解核心的几个，就能和任何开发者顺畅交流。 前端三件套（你每天看到的） 术语 一句话解释 类比 HTML 网页的结构骨架 房子的框架和墙壁 CSS 网页的样式皮肤 房子的装修和配色 JavaScript（JS） 网页的交互行为 房子的开关、门铃等智能功能 123456789<!-- 三者的协作关系 --><div id="button">点击我</div> <!-- HTML：定义按钮 --><sty...
