个人工作室开业
独立摄影师租下第一个工作室，想做一块招牌。找人设计报价 3000 元，自己用软件又不会。用本工具输入工作室名字「拾光」，选了一组深灰配琥珀色的配色，图标用相机光圈轮廓。十分钟生成三个方案，导出高清图发给广告公司做亚克力板。省去了和设计师反复沟通的成本，落地效果和定制方案差别不大。
文 字Wordmark · 主名 + 副标
主名 brand
副标 / slogan optional
字体 font
字重 weight
字号 size56
字间距 tracking1
大小写 case
文字色 text color
布 局Layout · 图标与文字的排布
图 标Feather · 本地 287 枚
图标色 icon color
图标尺寸 size78
描边宽 stroke2
容 器 底Container · 包裹图标的底
容器填充 fill
容器色 container
渐变末色 gradient end
整 体 背 景Backdrop · 导出底
背景色 bg
配 色 方 案Palettes · 一键套用
中 国 传 统 色取 文字 / 图标 / 容器 当前色
点色 → 设图标色
SVG · 透明
favicon 32
圆形 180
APP 512
名片
SVG 矢量无限缩放、印刷首选；PNG 2× 高清网页用；favicon 32×32 网站图标、社交 512 居中方图。全部处理在浏览器本地完成，不上传服务器，图标取自本地 Feather 集、无运行时 CDN。
图标集 Feather Icons v4.29.2 · 作者 Cole Bemis 及贡献者 · 许可 MIT License（LICENSE）· 官网 feathericons.com · 内置于 /static/tools/_vendor/icons-feather.js，纯本地加载、无运行时 CDN。
就绪 · 文字 + Feather 图标 + 配色组合 · 实时 SVG · 全程浏览器本地处理
第一节
关于本工具
About为一个新品牌或活动选 Logo，常卡在「字不错但图标不搭」或「配色好看但放一起变廉价」。这个工具把文字、图标、配色三个独立模块并列展示，每次换一个元素，其余模块自动重新组合预览，直到出现视觉上「对」的那组。所有拼合发生在浏览器本地，不向服务端发送任何内容。适合在定稿前快速遍历几十种视觉组合，筛出最顺眼的一版。
使用场景
播客封面急换
播客「程序员夜话」做到第 50 期，原来的封面图被平台提示侵权。主播自己不会设计，找外包要三天。用本工具把播客名、一句 Slogan「代码之外的声音」和耳机图标组合，选了蓝紫色渐变背景。生成后直接上传到苹果播客和小宇宙，当天就过了审核。不用等设计师排期，也不用担心字体版权。
社区团购群头像
小区宝妈群主拉了三个团购群，每个群卖不同品类：水果、卤味、日用品。想用统一风格的头像区分，又不想花钱请人做。用本工具分别输入「鲜果」「卤香」「日杂」，各选一个对应的食物图标，配色统一用暖橙色系。三个头像放一起像系列设计，群友一眼能认出哪个群是卖什么的。前后花了不到半小时。
非营利组织活动
社区图书馆要办一场旧书交换活动，需要一张海报和横幅。预算为零，工作人员都不会设计。用本工具输入活动名「书虫换书日」，选了一本打开的书的图标，配色用墨绿和米白。生成的 logo 直接贴到活动通知上，打印出来贴在社区公告栏。没有设计背景的人也能做出看起来专业的视觉。
淘宝店临时主图
卖手工皮具的淘宝店主，上新一款钱包，原定拍好的主图被摄影师放鸽子。第二天就要上架，自己用手机拍了产品图，但缺一个品牌标识。用本工具输入店铺名「革物」，选了一个皮料纹理的图标，配色用棕色和金色。生成的 logo 叠在图片角落，当天上架成功。避免了因为缺图而错过上新日流量。
第二节
使用指南
Getting Started使用步骤
- 1在「文字」输入框键入品牌名或标语，右侧画布同步显示预览
- 2从「图标库」点选一个图形（如火箭、树叶），图标自动嵌入文字左侧或上方
- 3在「配色方案」区点选预设组合（如蓝橙、黑白），画布文字与图标颜色即时更新
- 4点「下载」按钮，浏览器直接保存为 PNG 文件，无需额外操作
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 文字：极客编程 图标：终端符号（>_） 配色：深蓝 + 荧光绿 | 生成一个带有终端提示符图标、深蓝底色配荧光绿字体的 Logo，适合技术社区或开发者工具品牌。 | 常规：典型的科技类文字+符号组合，验证图标与文字对齐及配色对比度是否达标。 |
| 文字：花间小馆 图标：一朵樱花 配色：粉色 + 米白 | 生成一个樱花图标居中、粉色渐变背景配米白字体的 Logo，风格柔和，适合餐饮或生活美学品牌。 | 常规：常见的生活服务类场景，检验图标与文字在暖色调下的协调性。 |
| 文字： 图标：地球 配色：蓝色 + 白色 | 生成一个纯地球图标、蓝白配色的 Logo，无文字仅图标。 | 边界：文字为空时工具是否正常输出仅图标结果，验证空输入处理逻辑。 |
| 文字：超长品牌名称测试用例示例文本 图标：星星 配色：红色 + 金色 | 生成一个星星图标、红金配色的 Logo，文字自动缩小至一行显示，超出部分截断。 | 边界：超长文字的处理策略——自动缩放或截断，验证排版容错能力。 |
| 文字：A&B 图标：@符号 配色：黑色 + 白色 | 生成一个@图标、黑白配色的 Logo，文字中的 '&' 符号被保留并正常渲染。 | 易错：特殊字符（&、@、#）是否被转义或丢失，验证字符编码兼容性。 |
| 文字：测试 图标：无 配色：无 | 生成一个仅有文字“测试”、使用默认黑色字体、无背景色的纯文字 Logo。 | 易错：图标和配色均为空时是否使用合理默认值，验证缺省参数处理。 |
| 文字：绿色环保 图标：树叶 配色：绿色 + 绿色 | 生成一个树叶图标、绿色背景配绿色文字的 Logo，文字与背景对比度极低，可读性差。 | 易错：相近色搭配导致可读性问题，工具未做对比度检测，用户需自行避免。 |
常见错误对照
1.图标与文字颜色对比度不足，导致可读性差
✗ 错误
白色背景 + 浅灰色文字 + 浅灰色图标✓ 修复
白色背景 + 深灰/黑色文字 + 品牌色图标（如 #2C3E50 文字 + #E74C3C 图标）WCAG 2.1 AA 标准要求普通文本对比度 ≥ 4.5:1，图标与背景对比度 ≥ 3:1。颜色太接近时，视觉层次消失，小尺寸下文字和图标难以分辨。
2.图标风格与文字气质冲突
✗ 错误
科技公司 Logo 用卡通手绘风格图标 + 圆润幼圆字体✓ 修复
科技公司 Logo 用几何线框图标 + 无衬线字体（如 Inter、Roboto）图标风格（线框/填充/手绘/扁平）和字体（衬线/无衬线/手写）共同传递品牌调性。风格不统一会让用户产生认知失调，降低专业感。
3.文字排版中使用了过多不同字体
✗ 错误
Logo 标题用思源黑体，副标题用楷体，标语用 Comic Sans✓ 修复
Logo 标题用思源黑体 Bold，副标题用思源黑体 Regular，标语用思源黑体 Light（同一字族不同字重）品牌视觉规范通常限制单 Logo 内 ≤ 2 种字族。超过 2 种字族会导致视觉杂乱，用户难以快速识别品牌名。同一字族通过字重/字号区分层次最稳妥。
4.图标尺寸与文字比例失衡
✗ 错误
图标 200px × 200px，文字 12px 字号，图标视觉重量远大于文字✓ 修复
图标高度 ≈ 文字 x-height 的 1.5~2 倍（如文字 24px，图标 36~48px 高）图标和文字在视觉上应形成平衡的构图。图标过大则文字被压制，过小则图标失去存在感。参考 Material Design 图标与文字配比指南：图标高度不应超过文字 cap-height 的 2 倍。
5.配色方案忽略了色盲用户的辨识需求
✗ 错误
仅用红色和绿色区分品牌主色和辅助色（如红底 + 绿字）✓ 修复
使用红色 + 蓝色组合，或红色 + 灰色组合，并辅以形状/文字区分红绿色盲（deuteranopia）约占男性人口 8%。仅靠色相区分会导致部分用户无法辨识 Logo 中的关键信息。应确保颜色差异在灰度模式下仍然可辨，或附加文字/图标辅助。
6.Logo 中使用了系统未安装的付费字体
✗ 错误
在 Logo 设计中使用 Adobe 字体（如 Acumin Pro），但导出时未嵌入字体✓ 修复
使用 Google Fonts 开源字体（如 Noto Sans），或导出前将文字转为轮廓（路径）未嵌入字体时，其他设备打开会 fallback 到默认字体，导致排版错乱。商业字体还可能涉及版权问题。开源字体或转轮廓可保证跨平台一致性。
7.图标细节过多，缩小后糊成一团
✗ 错误
Logo 图标包含 20 条细线、多个小圆点、复杂渐变✓ 修复
图标使用 4~6 条粗线、2~3 个几何形状、纯色填充Logo 常出现在 favicon（16px）、App 图标（48px）等小尺寸场景。细节过多时，抗锯齿会让线条粘连。建议图标在 48px 下仍能清晰辨识，线条粗细 ≥ 2px。
8.文字与图标之间的间距不合理
✗ 错误
文字紧贴图标边缘（间距 0px），或间距过大（超过文字高度）✓ 修复
文字与图标间距 = 文字 cap-height 的 0.3~0.5 倍（如文字 40px，间距 12~20px）间距过近导致视觉拥挤，过远则破坏整体感。黄金比例（间距 ≈ 图标宽度的 1/3）在多数 Logo 构图中适用。可参考 Google Material Design 间距 8dp 网格系统。
第三节
工作原理
How It Works核心公式
对比度 = (max(R,G,B) + 0.05) / (min(R,G,B) + 0.05)
变量说明
R前景色红色通道值 0–255G前景色绿色通道值 0–255B前景色蓝色通道值 0–255
示例
前景色 #333333（R=51,G=51,B=51），背景色 #FFFFFF（R=255,G=255,B=255）：max(51,51,51)=51，min(255,255,255)=255，对比度=(51+0.05)/(255+0.05)≈0.200，取倒数得 5.0:1，符合 WCAG AA 级正文标准（≥4.5:1）。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问用这个工具做的 Logo，能直接拿去注册商标吗？＋
答
不能。商标注册对图形有严格的显著性、近似性审查要求，在线工具生成的文字+图标组合通常属于通用设计，通过率非常低。建议仅用于个人主页、社交媒体头像、临时项目标识等非正式场景。如果确实需要注册商标，需找专业设计师做差异化设计，或至少先用商标查询系统检索是否已有近似图形。
问生成的图标为什么有些颜色看起来跟选的不一样？＋
答
最可能的原因是图标本身带有默认颜色（比如选了一个蓝色调的图标，但它内部有渐变或特定色块），工具只修改了主色调，图标内的阴影、高光或辅助色可能保留原色。另一个原因是屏幕色域差异，尤其在高对比度模式下。建议先选纯色图标再调色，或生成后下载到本地用看图软件确认实际颜色值。
问我输入了公司全称，但生成出来的 Logo 文字排版很乱怎么办？＋
答
工具不会自动断行或调整字号适配长文本。如果公司名称超过 6-8 个中文字，建议手动分成两行输入——比如第一行品牌名、第二行行业后缀。另外，避免使用全角标点和特殊符号（如®™），这些字符在浏览器端渲染时容易导致排版错位。如果还是乱，换一个字体（黑体类比书法体更稳定）。
问这个工具和 Canva、稿定设计里的 Logo 功能有什么区别？＋
答
核心区别有两点：一是本工具完全在浏览器本地运行，不会上传你的文字和图标到服务器，而 Canva 类在线设计平台需要登录并上传素材；二是本工具操作链路极短——选图标、改文字、调颜色三步出图，适合快速出个临时方案。Canva 模板库更丰富但学习成本高，适合需要精细排版和多次修改的场景。
问生成的 Logo 放大打印会不会模糊？＋
答
会模糊。本工具输出的是屏幕用位图（PNG/JPG），不是矢量格式（SVG/AI），放大到 A4 以上尺寸时边缘会出现锯齿。如果只是用在微信头像、网页 favicon 或名片上，默认尺寸完全够用。需要打印或做展架时，建议把生成结果作为参考草图，再请设计师用矢量软件重新描一遍。
问为什么我选的图标在预览区显示正常，下载后却缺了一块？＋
答
大概率是图标本身使用了特殊的字体图标或 SVG 符号，而下载时浏览器只截取了当前可见区域。如果图标超出画布边界，下载结果会被裁剪。解决方法：生成前先缩小字号或调整图标大小，确保所有元素都在预览框的蓝色虚线范围内。另外，避免使用带外发光或投影效果的图标，这些效果在下载时可能被截断。
问做出来的 Logo 背景是透明的吗？能不能直接放在深色图片上？＋
答
默认输出是白色背景，不是透明底。如果需要透明背景，可以在生成后手动用图片编辑软件（如 Windows 画图 3D、手机上的 PicsArt）把白色背景抠掉。本工具没有直接输出 PNG 透明通道的功能，因为浏览器端做透明导出需要额外处理抗锯齿边缘，容易留下白边。建议深色背景场景下，生成时选浅色或亮色主色调。
问我想把生成的 Logo 用在抖音头像上，尺寸对不上怎么办？＋
答
抖音头像推荐 200×200 像素正方形。本工具生成的默认尺寸通常是 500×500 或更大，可以直接用。但要注意：如果文字或图标太靠近边缘，被平台自动裁切成圆形时内容会缺失。建议生成时把文字和图标居中摆放，四周留出至少 20% 的空白边距，这样裁剪后核心元素依然可见。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。