README徽章生成器
在线生成README徽章(shields.io)的Markdown/HTML代码，支持自定义文本徽章、License徽章、版本号徽章(含npm实时查询)、Build状态徽章，附实时预览。
免费在线工具
Loading…
使用说明
- 选择徽章类型标签：自定义徽章 / License 徽章 / 版本号徽章 / Build 状态徽章
- 填写对应字段（如自定义徽章需填 Label、Message、颜色；版本号徽章可选择“静态展示”手动填版本号，或“npm 包实时版本”填包名实时查询）
- 填写 Alt 文本和可选的跳转链接，下方会实时预览徽章图片效果
- 点击“复制”获取 Markdown 或 HTML 代码，粘贴到 README.md 或网页中即可使用
功能介绍
- 自定义文本徽章：基于shields.io三段式规则 https://img.shields.io/badge/{label}-{message}-{color} 拼接，自动处理“-”、“_”、空格等特殊字符转义
- License徽章：内置MIT/Apache-2.0/GPL-3.0/BSD-3-Clause/ISC/MPL-2.0/LGPL-3.0/AGPL-3.0/Unlicense等常见开源许可证选项
- 版本号徽章：支持“静态展示”（手动填版本号生成静态徽章）与“npm 包实时版本”（调用 https://img.shields.io/npm/v/{package} 实时查询npm registry最新版本）两种模式
- Build状态徽章：仅为passing/failing/unknown三种状态的静态占位展示，不会真实对接任何CI系统查询构建状态
- 实时预览：直接用生成的shields.io图片URL预览效果，这是本工具唯一允许的外部图片引用；若预览加载失败（如网络问题），会给出明确提示，但生成的Markdown/HTML代码本身不受影响，仍可正常复制使用
- 支持一键复制Markdown代码（）或HTML代码（<img src="url">），并可选包裹跳转链接
使用场景
给GitHub项目README添加License徽章
选择项目使用的开源许可证，一键生成License徽章的Markdown代码，粘贴到README.md顶部
展示npm包实时版本号
输入npm包名，生成会实时查询npm registry最新版本号的徽章，无需每次发版手动更新徽章文字
制作自定义状态标签
用自定义徽章功能制作“维护中”、“稳定版”等任意文案+颜色组合的标签，用于文档或个人主页
占位展示构建状态
项目暂未接入CI或不想暴露真实构建状态时，用Build状态徽章功能生成静态的passing/failing占位标签
常见问题
徽章预览图片是从哪里加载的？会不会违反本站不依赖外部CDN的规则？
预览图片直接引用 shields.io 官方图片服务，这是徽章功能本身的核心用途（展示徽章长什么样），不是加载外部JS库或依赖外部脚本执行逻辑。生成Markdown/HTML代码这一核心功能完全在本地完成，即使预览图片加载失败也不影响你复制和使用生成的代码。
npm版本徽章的版本号是实时的吗？
是的。选择“npm包实时版本”模式后，生成的URL是shields.io官方提供的动态端点(img.shields.io/npm/v/{package})，该图片由shields.io实时查询npm registry生成，包更新版本后徽章会自动显示最新版本号，无需重新生成代码。
Build状态徽章能自动检测我的CI构建结果吗？
不能。本工具的Build状态徽章仅提供passing/failing/unknown三种静态占位样式供手动选择展示，不会连接任何CI系统查询真实构建状态，如需真实构建状态徽章，需要使用你所用CI平台（如GitHub Actions、Travis CI等）官方提供的动态徽章。
自定义徽章的颜色可以填什么？
可以填shields.io支持的预设颜色名称（如brightgreen、blue、red、lightgrey等），也可以填十六进制颜色值（带或不带#前缀均可，工具会自动去掉#号）。