登录Logoly:几秒钟做出「P站 风格」Logo 的开源小工具
很多人做个人主页、公众号封面、技术分享 PPT，都会遇到一个共同问题：
想要一个眼前一亮的 Logo，但又不会设计，也懒得打开 PS / Figma。
Logoly 就是为这种场景而生的一个开源项目：
一个可以在线生成 Pornhub / OnlyFans 风格 Logo 的小工具，只需要改几个字、调调颜色，几秒钟就能导出一张“似曾相识”的趣味 Logo。
👁️🗨️ Logoly 是什么？
Logoly 的作者给它的定义是：
A Simple Online Logo Generator for People Who Want to Design Logos Easily.
—— 让任何人都能轻松做 Logo 的在线生成器。
它最早因为可以生成类似 p站 风格的 Logo 在社区火了一把，后来又加入了 OnlyFans 风格的样式，逐渐变成一个 “恶搞 / 表情包 / 个人小品牌” 都能用的小工具。
特点概括一下：
- 在线使用，无需安装，打开网页就能玩
- 生成 P站 / OnlyFans 风格的 Logo
- 支持自定义文字内容
- 支持自定义颜色和字体大小
- 一键导出 PNG / SVG 两种格式
- 开源，基于 WTFPL 2 授权，几乎「想怎么玩就怎么玩」
github地址： github.com/bestony/log… 在线体验：www.logoly.pro/
该项目目前在github 上已有 7.9k ⭐️star
🎯 功能一览
1. 两种经典风格：P站风格 & OnlyFans
你可以一键做出这两种在互联网上辨识度极高的 Logo 风格，用来做：
- 朋友圈/微博的整活配图
- 技术分享 PPT 中的彩蛋
- 团队内部的梗图或文化海报
- 个人主页 / 博客上的趣味 Logo 等
风格本身非常强烈，但文字是你自定义的，可以天马行空。
注意：Logoly 本身不涉及任何成人内容，只是借鉴了这些品牌 Logo 的视觉风格。
2. 自定义文字内容
页面中有一个文本输入框，只需要：
- 把默认的文字改成你想要的（英文、数字、甚至中文都可以尝试）
- 实时预览 Logo 效果
很适合搞一些有梗、容易被记住的短词。
3. 自定义颜色和字体大小
你可以自由调整：
- 左右两段文字的颜色
- 中间色块的背景色（具体视当前主题而定）
- 整体字号大小，用来适配不同场景（比如头像 vs 横幅）
简单几下滑动/点选，就能做出风格迥异的变体。
4. 导出 PNG / SVG
完成之后，点击 Export 按钮可以导出两种格式：
- PNG：适合直接作为图片使用（社交头像、封面图、PPT、聊天表情等）
- SVG：矢量格式，放大不会糊，适合用在网页、印刷、再加工设计中
对于前端开发者来说，SVG 的可编辑性也很友好，可以进一步嵌入到自己的项目里。
在线使用教程：4 步搞定一个 Logo
作者已经把使用流程总结成 4 步，实际体验下来也确实非常简单：
-
打开网站：
访问 logoly.pro/ -
编辑文字：
把默认的文本替换成你想要的单词/短句 -
调整样式：
- 修改颜色
- 调整字体大小
-
导出图片：
点击 Export 按钮，选择 PNG 或 SVG 导出
整个过程基本不需要学习成本，几乎是「一看就会」。
以下是我生成的一些案例
✏️ 面向开发者：如何在本地运行 Logoly？
环境要求
项目对 Node / npm 版本有明确要求：
- Node.js 18+
- npm 10+
（官方说明：只支持 npm 作为包管理器，请不要提交其他管理器生成的 lockfile）
也就是说：
- 不建议使用 yarn / pnpm / Bun 来跑这个项目，以免锁文件不一致、CI 失败。
- CI 流水线里也是基于 npm 的脚本执行。
本地跑起来的步骤
在命令行中依次执行：
# 1. 克隆仓库
git clone https://github.com/bestony/logoly.git
cd logoly
# 2. 安装依赖
npm install
# 3. 启动开发服务器
npm run dev
启动成功后，在浏览器里访问提示的本地地址（通常是 http://localhost:xxxx），就能看到 Logoly 的开发版界面。
修改源码后即可实时看到效果。
开发完成后，可以进行构建：
npm run build
docker部署
如果你想使用docker部署，则只需要启动一个nginx 容器，将构建后的dist目录下的文件及文件夹挂载到容器中即可,不会部署nginx的家人们可以搜索下博主的历史文章，有介绍docker 部署nginx 及配置的博文。
🦆 总结
如果你：
- 需要一个有辨识度的 Logo，又不想折腾复杂设计工具
- 想给项目、团队或朋友做一个带梗的图标
- 想找一个小而美的前端开源项目学习 / 贡献
那么 Logoly 非常值得收藏一下。
- 在线生成：logoly.pro/
- 源码仓库：github.com/bestony/log…
你可以先用线上版做几个 Logo 玩玩。
