Logoly:几秒钟做出「P站 风格」Logo 的开源小工具

简介: Logoly 是一款开源在线 Logo 生成工具,主打 P站/OnlyFans 风格设计,无需设计基础,改文字、调颜色几秒生成趣味 Logo,支持导出 PNG/SVG,适合做头像、PPT 彩蛋或梗图,开箱即用,开发者还可本地部署。

很多人做个人主页、公众号封面、技术分享 PPT,都会遇到一个共同问题:
想要一个眼前一亮的 Logo,但又不会设计,也懒得打开 PS / Figma。

Logoly 就是为这种场景而生的一个开源项目:
一个可以在线生成 P站 / 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地址: https://github.com/bestony/logoly
在线体验:https://www.logoly.pro/

该项目目前在github 上已有 7.9k ⭐️star

🎯 功能一览

1. 两种经典风格:P站风格 & OnlyFans

你可以一键做出这两种在互联网上辨识度极高的 Logo 风格,用来做:

  • 朋友圈/微博的整活配图
  • 技术分享 PPT 中的彩蛋
  • 团队内部的梗图或文化海报
  • 个人主页 / 博客上的趣味 Logo 等

风格本身非常强烈,但文字是你自定义的,可以天马行空。

注意:Logoly 本身不涉及任何成人内容,只是借鉴了这些品牌 Logo 的视觉风格。

2. 自定义文字内容

页面中有一个文本输入框,只需要:

  1. 把默认的文字改成你想要的(英文、数字、甚至中文都可以尝试)
  2. 实时预览 Logo 效果

很适合搞一些有梗、容易被记住的短词。

3. 自定义颜色和字体大小

你可以自由调整:

  • 左右两段文字的颜色
  • 中间色块的背景色(具体视当前主题而定)
  • 整体字号大小,用来适配不同场景(比如头像 vs 横幅)

简单几下滑动/点选,就能做出风格迥异的变体。

4. 导出 PNG / SVG

完成之后,点击 Export 按钮可以导出两种格式:

  • PNG:适合直接作为图片使用(社交头像、封面图、PPT、聊天表情等)
  • SVG:矢量格式,放大不会糊,适合用在网页、印刷、再加工设计中

对于前端开发者来说,SVG 的可编辑性也很友好,可以进一步嵌入到自己的项目里。

在线使用教程:4 步搞定一个 Logo

作者已经把使用流程总结成 4 步,实际体验下来也确实非常简单:

  1. 打开网站:
    访问 https://logoly.pro/
  2. 编辑文字:
    把默认的文本替换成你想要的单词/短句
  3. 调整样式:
    • 修改颜色
    • 调整字体大小
  4. 导出图片:
    点击 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 非常值得收藏一下。

你可以先用线上版做几个 Logo 玩玩。

目录
相关文章
|
3天前
|
人工智能 JavaScript Linux
【Claude Code 全攻略】终端AI编程助手从入门到进阶(2026最新版)
Claude Code是Anthropic推出的终端原生AI编程助手,支持40+语言、200k超长上下文,无需切换IDE即可实现代码生成、调试、项目导航与自动化任务。本文详解其安装配置、四大核心功能及进阶技巧,助你全面提升开发效率,搭配GitHub Copilot使用更佳。
|
5天前
|
存储 人工智能 自然语言处理
OpenSpec技术规范+实例应用
OpenSpec 是面向 AI 智能体的轻量级规范驱动开发框架,通过“提案-审查-实施-归档”工作流,解决 AI 编程中的需求偏移与不可预测性问题。它以机器可读的规范为“单一真相源”,将模糊提示转化为可落地的工程实践,助力开发者高效构建稳定、可审计的生产级系统,实现从“凭感觉聊天”到“按规范开发”的跃迁。
801 12
|
1天前
|
云安全 安全
免费+限量+领云小宝周边!「阿里云2026云上安全健康体检」火热进行中!
诚邀您进行年度自检,发现潜在风险,守护云上业务连续稳健运行
1160 1
|
5天前
|
消息中间件 人工智能 Kubernetes
阿里云云原生应用平台岗位急招,加入我们,打造 AI 最强基础设施
云原生应用平台作为中国最大云计算公司的基石,现全面转向 AI,打造 AI 时代最强基础设施。寻找热爱技术、具备工程极致追求的架构师、极客与算法专家,共同重构计算、定义未来。杭州、北京、深圳、上海热招中,让我们一起在云端,重构 AI 的未来。
|
4天前
|
人工智能 JavaScript 前端开发
【2026最新最全】一篇文章带你学会Cursor编程工具
本文介绍了Cursor的下载安装、账号注册、汉化设置、核心模式(Agent、Plan、Debug、Ask)及高阶功能,如@引用、@Doc文档库、@Browser自动化和Rules规则配置,助力开发者高效使用AI编程工具。
600 4
|
9天前
|
存储 JavaScript 前端开发
JavaScript基础
本节讲解JavaScript基础核心知识:涵盖值类型与引用类型区别、typeof检测类型及局限性、===与==差异及应用场景、内置函数与对象、原型链五规则、属性查找机制、instanceof原理,以及this指向和箭头函数中this的绑定时机。重点突出类型判断、原型继承与this机制,助力深入理解JS面向对象机制。(238字)
|
7天前
|
IDE 开发工具 C语言
【2026最新】VS2026下载安装使用保姆级教程(附安装包+图文步骤)
Visual Studio 2026是微软推出的最新Windows专属IDE,启动更快、内存占用更低,支持C++、Python等开发。推荐免费的Community版,安装简便,适合初学者与个人开发者使用。
894 11
|
4天前
|
存储 人工智能 测试技术
【Claude Skills】从原理到实战的完全指南
Claude Skills通过模块化设计,将AI变为领域专家,实现工作流标准化。它支持指令封装、自动触发与脚本集成,提升复用性与协作效率,适用于个人提效与团队协同,是AI定制化的新范式。
|
8天前
|
人工智能 Shell 开发工具
Claude Code 2.1.2超详细更新说明,小白也能10分钟上手
Claude Code 2.1.x重磅更新:Shift+Enter换行、Esc+Esc撤销、Ctrl+B后台运行,Skills技能系统全面升级,支持多语言、通配符权限与动态MCP检测,性能提升50%,迭代速度惊人,开发者效率暴涨!
Claude Code 2.1.2超详细更新说明,小白也能10分钟上手