免费文字转Logo神器：Logo.surf 介绍与二次开发实践

最近在 VibeCoding 项目时，需要为产品设计一个 Logo。作为一个开发者，我希望能找到一个快速、简单的方式来生成 Logo，而不是花大量时间学习设计软件或等待设计师排期。

在搜索过程中，我偶然发现了 Logo.surf 这个开源工具——一个可以将文字快速转换为 Logo 和 Favicon 的在线生成器。

然而，当我尝试将项目部署到 Vercel 时，遇到了构建报错。经过排查，我发现是输出目录配置和 URL 路径的问题。于是，我决定对这个项目进行二次开发，在保留原有功能的基础上进行优化改造。

什么是 Logo.surf？

image-20260616113707982

Logo.surf 是一个免费的在线工具，可以快速将文字转换为专业的 Logo 和 Favicon。无需注册账号，无需安装软件，打开浏览器即可使用。

本项目基于 airyland/logo.surf 进行二次开发，保留了原有功能并进行了多项优化。

主要功能

  • 文字转 Logo：输入任意文字，即可生成对应的 Logo 和 Favicon
  • 自定义选项：支持调整背景颜色、文字颜色、字体、圆角等参数
  • 多格式下载：支持导出 PNG、SVG、ICO 等多种格式
  • 实时预览：修改参数时可实时看到效果变化
  • 色彩方案：提供多种预设配色方案，一键应用

适用场景

  • 开发者：为个人项目快速生成 Logo
  • 创业者：为初创公司制作临时品牌标识
  • 设计师：快速生成概念设计稿
  • 博主：为网站或博客添加个性化图标

二次开发内容

在原版基础上，我进行了以下改造：

1. Vercel 部署支持

添加了 vercel.json 配置文件，指定输出目录为 dist/，使项目可以一键部署到 Vercel 平台。

2. 相对路径 URL

将 build.js 中的 baseUrl 从 https://www.logo.surf 改为空字符串，使所有 URL 使用相对路径。这样网站可以部署到任意域名，无需修改代码。

3. 浏览器语言自动检测

在 index.hbs 中添加了 JavaScript 脚本，访问根路径时自动检测 navigator.language，根据用户浏览器语言自动跳转到对应的语言版本。

4. 多语言支持

项目本身支持 16 种语言，包括：

  • 简体中文、繁体中文
  • 英语、日语、韩语
  • 法语、德语、西班牙语、意大利语、葡萄牙语
  • 俄语、阿拉伯语、荷兰语、波兰语、土耳其语、印地语

用户可以通过页面右上角的语言切换器手动切换语言。

5. 部署地址

改造后的网站部署在：https://logo.shiguang666.eu.org

技术栈

  • 前端：HTML + Tailwind CSS
  • 构建：Node.js + Handlebars 模板引擎
  • 部署：Vercel

使用方法

  1. 访问网站 https://logo.shiguang666.eu.org
  2. 在输入框输入你想要的文字
  3. 调整颜色、字体、圆角等参数
  4. 预览满意后，点击下载按钮保存

开源地址

许可证

本项目采用 CC BY-NC 4.0（知识共享署名-非商业性使用 4.0 国际许可协议）。

注意：该协议禁止商业用途。如需商业使用，请联系原作者获取授权。