网站图标在线制作

打开浏览器标签页，网站那一小格图标就是图标网站的脸。缺了它，线制页面像没睡醒——白底黑字的网站默认图标挂在那儿，用户连点开的图标欲望都少一半。我见过一个小型电商后台，线制上线三个月没换 favicon，网站结果运营同事在群里吐槽：“每次在一堆标签里找它，图标都得眯着眼看文字。线制”后来他们用在线工具花十分钟做了个橙色小推车图标，网站当天就有人反馈“终于认得出你们家了”。图标

做 favicon 这件事，线制十年前得开 Photoshop，网站建个 16×16 的图标画布，像素点对齐到眼瞎。线制现在？在线工具把门槛砍到了脚踝。你不需要懂设计，甚至不需要装软件。浏览器打开 Canva、Favicon.io 或者 RealFaviconGenerator，上传一张图，拖两下，下载，完事。

但“简单”不等于“随便”。16×16 像素是什么概念？大概就是你在手机屏幕上用指甲盖按住一个应用图标的面积。这个尺寸下，细节全是敌人。我试过把一张带渐变和细字的 logo 直接丢进去，生成出来的 favicon 糊成一团，远看像一颗发霉的芝麻。后来学乖了：要么用纯色块加一个粗线条符号，要么把品牌首字母做成无衬线粗体，要么干脆只留一个几何图形。线条宽度至少 2 像素，颜色对比度拉到最高。别放文字，除非是单个大写字母，还得是 Arial Black 那种级别的粗。

在线工具通常给你三种输出：favicon.ico（兼容老浏览器和 IE）、PNG 系列（32×32、96×96、180×180 给苹果设备）、以及一个 HTML 代码片段。别偷懒只下载 ico。我见过一个博客只放了 16×16 的 ico，结果在 iPad 书签栏里显示成一个模糊的色块，作者还纳闷“为什么别人家图标那么清楚”。把 RealFaviconGenerator 生成的代码整段贴进 <head> 里，它自动处理了 apple-touch-icon 和 manifest 引用。多花三十秒，省得日后返工。

有些细节工具不会替你决定。比如背景透明还是实色？透明 PNG 在深色模式浏览器标签页上可能消失——你的黑色线条图标直接融进背景。我现在的习惯是：给 favicon 加一个浅色圆角底，或者干脆用品牌主色铺满。再比如，动态 favicon 值不值得做？Gmail 那个未读计数红点确实抓眼球，但普通内容站没必要。一个静态图标能让人在二十个标签里一眼认出你，任务就完成了。

最后说个真实翻车案例。某工具类网站用在线生成器做了个蓝色齿轮 favicon，本地测试一切正常。上线后用户反馈“图标是空白的”。查了半天，发现他们服务器把 .ico 文件的 MIME 类型配错了，浏览器直接拒绝渲染。所以生成完别只顾着贴代码，用手机、平板、不同浏览器各开一次页面，看看标签页、书签、历史记录里图标是不是都正常。花五分钟检查，比事后被用户截图嘲讽强。

在线制作 favicon 这件事，核心就一句：把复杂留给自己，把简单留给用户。而你自己要做的，不过是选对工具、砍掉细节、多端验证。就这么点事，真没必要拖到“下次改版再说”。