去年用 v0 搭了个 favicon 抓取工具，当时只有三个页面，功能简单到一周就上线了。详见之前的介绍。

这个六月边带娃边抽空重新捡起来做了波大的。一周 59 次提交，从「单一抓取工具」升级成了「Favicon 全家桶」。

favicon.run 首页

先说结论：这次更新不是修修补补，是整个产品形态的重做。新部署、新功能、新 npm 包、新浏览器扩展，一条龙。

架构迁移：Vercel → Cloudflare Workers

第一件事是把部署平台从 Vercel 迁到了 Cloudflare Workers（用 OpenNext）。原因不说细了，主要考虑成本和边缘节点覆盖。

迁完之后顺手把国际化方案也升级了，从之前硬编码的字典换成了 next-intl，支持按需加载语言包。顺便修了一堆 i18n 和路由的 bug。

新功能一览

Favicon Generator：交互式图片编辑器

原来的生成器很简陋——上传图片，出结果，完事。这次加了个所见即所得的编辑器：

Favicon Generator

  • 上传图片后实时预览各尺寸效果
  • 缩放滑块调整裁切范围
  • 内置示例图标，不传图也能体验
  • 一键导出 favicon.ico + apple-touch-icon + 全尺寸 PNG（Web、PWA、iOS、Android）

Favicon Checker：网站图标体检

全新功能。输入任意网址，检测它的 favicon 配置是否完整——favicon.ico、PNG icons、apple-touch-icon、web manifest、SVG icons，逐项检查。

Favicon Checker

查完会给一份报告，告诉你哪些缺了、怎么修。还支持一键修复建议和可分享的报告链接。

品牌目录（/brands）

新增了一个可搜索的 Favicon 品牌库。收录了知名网站的图标信息，支持搜索浏览，点击直接查看该品牌的全部图标尺寸。

Favicon Brands

Text Favicon 和 Emoji Favicon

两个新的生成器：

  • Text Favicon：输入一个字母或文字，选颜色和圆角，生成全套 favicon
  • Emoji Favicon：选一个 Emoji，直接转成各尺寸图标

Text Favicon

Emoji Favicon

内置 Emoji 选择器，还有小尺寸实时预览，不用等下载才知道效果。

网站图标预览页

输入域名就能看到该网站所有尺寸的图标，这个功能之前就有，这次做了增强：

Preview Page

加了 JSON-LD 结构化数据，扩展了展示信息。

npm 包：@favicon-run/react

发了第一个 npm 包 @favicon-run/react。开发者可以在自己的项目里直接引入，一行代码嵌入任意网站的 favicon：

1
npm install @favicon-run/react

配合 Favicon Embed API 使用，适合导航站、博客、文档站等需要展示网站图标的场景。

浏览器扩展

做了个 Chrome 扩展，装上之后在任意网页点击工具栏图标，就能直接查看和下载该网站的 favicon：

Browser Extension

扩展已经上架 Chrome Web Store，首页和 footer 都加了链接。

PR #6 合并成功

SEO 和性能优化

这块花了不少功夫，列举几个重点：

  • **首页体积砍掉 74%**：从 5.1MB 压到 1.3MB，广告和分析脚本延迟到首屏渲染后加载
  • 新增 3 个平台 + 4 个格式着陆页：WordPress、Shopify、Wix、Webflow、Squarespace 专属页面，favicon-ico/favicon-png/favicon-svg/favicon-html 格式页面
  • 全站导航重构：按 Fetch/Make 分类，统一工具页头部和 SEO 标签
  • Guide 知识库：新增「What is favicon」「Favicon sizes」「How to get favicon」等指南，带目录、面包屑、阅读时间
  • i18n 修复：next-intl 的 INVALID_TAG 问题、服务端内存溢出（Cloudflare Error 1102）、域名参数兼容性
  • 批量下载修复：zip 打包空文件的 bug

技术栈

当前项目的完整技术栈：

  • Next.js 15（App Router）
  • React 19
  • next-intl（国际化）
  • Tailwind CSS + shadcn/ui
  • OpenNext on Cloudflare Workers

图标生成全部在客户端用 Canvas 完成，不走服务端，不收 API 调用费。

数据

几组有意思的数字：

指标 去年 5 月上线时 现在
功能页面 3 个 30+ 个
提交次数 43 个版本 100+ commits
部署平台 Vercel Cloudflare Workers
npm 包 无 @favicon-run/react
浏览器扩展 无 已上架 Chrome Web Store
首页体积 ~5MB 1.3MB

下一步

工具功能差不多齐了，接下来重点是：

  1. 推广——Product Hunt、Reddit、独立开发社区
  2. @favicon-run/react 生态——让更多站点嵌入使用
  3. SEO 持续优化——内容页面已经铺好了，等收录

favicon.run 从一个 v0 实验品正在变成一个真正可用的工具。免费，无注册，直接用。

👉 https://favicon.run/