头像生成器实战:默认头像怎么做才不丑不闪
用首字母头像、identicon 几何图案、随机色块三种方式给用户系统补默认头像,讲清同输入同输出的一致性原理,以及本地生成不上传图片的好处。
头像生成器实战:默认头像怎么做才不丑不闪
做用户系统时绕不开一个小问题:用户还没传头像,那个位置放什么?放一个灰圆圈最省事,但一整页评论全是灰圆盘,看着像死站。真去要求每个人上传头像,又会卡掉一大批人。比较务实的做法是给一张默认头像,既不强迫用户传图,又能让界面有辨识度。
这篇讲我自己常用的三种默认头像生成方式,以及它们各自适合什么场景。文中的例子都能在 头像生成器 里直接试。
三种模式,解决三类问题
头像生成器 提供三种模式,各对应一种典型需求。
首字母模式,把名字渲染成单字组合。输入「Alex Chen」取大写首字母「AC」,输入「李雷」取首字「李」,白字居中摆在渐变圆形或方形上。这种头像可读性最高,一眼知道是谁,适合团队页、联系人列表这种「名字本身就是信息」的场景。
identicon 模式,把任意字符串 hash 成 5×5 水平对称的色块网格,就是 GitHub 给没传头像账号画的那种格子方块。它的核心价值是确定性,后面单独讲。
几何模式,在渐变底上随机摆圆、三角、圆角方,可以重摇 seed。它不追求和任何具体用户对应,纯粹用来填占位,比如 Figma 原型里那 12 条评论,需要看着像真用户但又不能盗图。
identicon 的一致性是怎么来的
identicon 最值钱的特性是「同输入必同输出」。同一个邮箱,不管在手机、电脑、还是半年后再打开,都画出一模一样的图案。这件事看着玄,原理其实很朴素。
工具用 FNV-1a 32 位字符串 hash 给输入算一个数,这个数决定 5×5 网格里 15 个独立格子(对称所以只有 15 个)哪些点亮,以及主色相是多少。举个具体的:输入 alex@example.com,FNV-1a 算出一个固定的 32 位整数,这个整数的某些 bit 决定第 1 个格子亮、第 3 个格子暗,低位几位决定色相落在蓝绿区间。换一台机器、换一个浏览器,算出来的整数一字不差,画出来自然一字不差。整个过程不依赖任何数据库,不存任何状态。
这正是 identicon 适合做默认头像的原因:用户每次访问看到的头像都不变,界面不会在会话之间闪来闪去。如果你拿一个会变的东西去 hash,比如带时间戳的 session id,那就失去意义了。
一个真实的生成规则:首字母怎么取
很多首字母头像工具一碰到中文就露馅,要么取不到字,要么把「李雷」拆成两个拉丁字符乱码。这个工具的提取规则是先判断语种再分支。
具体规则是这样:先看输入是哪种文字。拉丁文名字按空格切词,取前两个词的首字母再大写,所以「marie dubois」出「MD」,「Alex Chen」出「AC」。CJK 名字(中日韩)直接取第一个字,「王小明」出「王」,「山田太郎」出「山」,因为东亚通讯录就是这么显示一个人。遇到只有一个词或一个字的,回退到名字本身的前 1 到 2 个字符,所以「Cher」出「C」,「李」还是「李」。提取结果不满意可以在输入框里手动改。
这套规则覆盖了实际产品里绝大多数命名情况,不用为中文用户单独写一套 casing 逻辑。
给用户系统补默认头像的正确接法
我自己接默认头像时踩过一个反方向的坑,提一句省得别人也踩。identicon 应该 hash 不变的 ID,首字母才显示给人看的名字。换句话说,图案模式喂用户 ID 或邮箱这种永远不变的东西,字母模式喂「Alex Chen」这种人类可读的显示名。如果反过来,拿显示名去 hash,用户一改昵称头像就变了,默认头像的稳定性就没了。
落地时一个常见场景是 2000 行的贡献者表格。把每个用户名走一遍 identicon,按用户名存下 SVG,以后 octo-dev-42 这个 handle 不管在哪页都画同一张图。不用上传表单,不用审核队列,也不用真存一张二进制图片,灰圈全换成有辨识度的格子。
导出格式上注意,别导 64 px 的 PNG 再用 CSS 拉到 128 px 的 retina 槽位,小圆会糊。要么按 2 倍尺寸导,要么直接用 SVG,放多大都清晰。配色想和站点统一的话,Aurora 预设色板或者自定义 hex 都能调,也可以配合 渐变生成器 先定好品牌渐变再回填。
本地生成意味着什么
这个工具 100% 在浏览器里跑,你输入的名字、邮箱、用户 ID 都是本地 hash 或本地画到 canvas 上,不发往任何服务器。这点在合规上很省心:identicon 是从用户已经给你的 ID 衍生出来的,过程不经过服务器,你没有产生新的个人数据,只是把那个 ID 可视化了一下。导出的 PNG 和 SVG 也是标签页内生成后直接下载,没有第三方处理者掺一脚。
非敏感的设置(模式、尺寸、色板、形状遮罩)会编进 URL,分享链接能重开同一套配置;但你真正输入的名字或邮箱按敏感数据处理,不会进 URL。这样既能分享配置,又不会把用户的私人信息泄进链接里。
需要图标尺寸的位图时,可以顺手用 favicon 生成器 配合;要纯尺寸占位图则用 占位图生成器。三个工具组合起来,一个用户系统的视觉空位基本都能本地补齐。
Made by Toolora · Updated 2026-06-13