跳到主要内容

GitHub README 徽章生成器 —— shields.io 风格, 50+ 预设, Markdown / HTML / AsciiDoc / RST 一键出

GitHub README 徽章生成器, shields.io 风格, 50+ 预设 (build/version/license/coverage 等), 自定义 label, 一键复制 Markdown / HTML / AsciiDoc / RST 格式。

  • 本地处理
  • 分类 生成器
  • 适合 从空白开始,先拿到一版可修改的结果。
build: passing
预设
输出
markdown
![build: passing](https://img.shields.io/badge/build-passing-brightgreen.svg?labelColor=555555)
html
<img src="https://img.shields.io/badge/build-passing-brightgreen.svg?labelColor=555555" alt="build: passing">
asciidoc
image:https://img.shields.io/badge/build-passing-brightgreen.svg?labelColor=555555[build: passing]
rst
.. image:: https://img.shields.io/badge/build-passing-brightgreen.svg?labelColor=555555
   :alt: build: passing
批量模式
每行一个徽章, 格式 `label|message|color`。`#` 开头是注释。
批量输出
build: passing![build: passing](https://img.shields.io/badge/build-passing-brightgreen.svg?labelColor=555555)
license: MIT![license: MIT](https://img.shields.io/badge/license-MIT-blue.svg?labelColor=555555)
coverage: 95%![coverage: 95%](https://img.shields.io/badge/coverage-95%-brightgreen.svg?labelColor=555555)

这个工具能做什么

在浏览器里生成 shields.io 风格的 GitHub README 徽章, 不调 shields.io 接口、不用注册、没有速率限制。5 种视觉风格 (for-the-badge / flat / flat-square / plastic / social) 跟 shields.io 本家渲染的一致, 生成的徽章贴到 README 里, 旁边再放 一个 shields.io 的实时徽章, 风格不打架。50+ 预设覆盖开源 README 里真实会见到的徽章 —— build/passing、version/v1.0.0、 license/MIT、coverage/95%、npm/downloads、GitHub/stars, 外加 20 个内嵌的 Simple Icons 品牌图标 (GitHub、npm、Docker、AWS、 Discord、Slack、Twitter 等)。可以改 label、message、左右色块、 跳转链接, SVG 实时重渲。导出 4 种格式: Markdown `![]()` (README 用)、HTML `<img>` (博客 / MDX 用)、AsciiDoc (Antora / Asciidoctor 文档用)、reStructuredText (Python PyPI / Sphinx 用)。批量模式 支持一行一个徽章规格, 一次复制全部代码片段。整个工具核心只有 200 行 JavaScript, 包括 SVG 文字宽度估算 (monospace 字符宽度 × 6.6px) 都是本地算的, 页面秒开、断网可用、label 和 message 永远不出浏览器。

工具细节

输入
文件 + 文本
页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
输出
即时结果 + 复制 + 预览
结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
隐私
浏览器本地处理
主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
保存 / 分享
可分享链接状态
关键设置会进入 URL，复制链接后别人能复现同一组参数。
性能预算
首屏 JS ≤ 50 KB
没有声明 WASM 依赖，适合快速打开和移动端使用。
适用场景
生成器 · 程序员
分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。

怎么用

  1. 1. 输入

    把内容粘贴或拖入工具面板。

  2. 2. 处理

    点击按钮,在浏览器内本地处理,文件不上传。

  3. 3. 复制 / 下载

    一键复制结果或下载到本地。

GitHub README 徽章生成器 适合怎么用

适合快速生成初稿、起步素材或结构化结果,再人工整理后发布。

适合生成任务

  • 从空白开始,先拿到一版可修改的结果。
  • 生成可重复使用的草稿、名称、模板或占位素材。
  • 先探索多个选项,再挑最适合当前任务的。

生成检查项

  • 生成内容发给客户、上页面或进文档前,必须人工看过。
  • 有品牌语气、格式或受众要求时,不要沿用默认值。
  • 只保留真正符合任务的部分。

下一步可以接着做

这些入口会把当前任务接到更完整的工具链里。

  1. 1 Favicon 生成器 一键生成 favicon 套件 —— 文字或上传图,输出 16/32/180/512 px PNG。 打开
  2. 2 二维码生成器 文本 / URL / WiFi / 名片一键生成二维码,自定义颜色和尺寸,导出 PNG 或 SVG。 打开
  3. 3 Markdown 表格生成 可视化构建 Markdown 表格 —— 加减行列 / 列对齐 / 粘贴 Excel 或 CSV —— 浏览器本地 打开

真实使用场景

  • "License MIT" 这种死徽章不再走 shields.io

    README 顶部排了 8 个徽章, 其中 3 个永远不会变 (license MIT、made-with-typescript、code style prettier)。每访客 每次访问 README, 你都为这 3 个 shields.io URL 各付一次 DNS + HTTPS 往返; shields.io 一旦 503, 这几个徽章在 README 里就是破图。挑"license MIT"预设, 复制 SVG, 存到 `assets/badge-license.svg`, README 里把 shields.io URL 换成相对路径。徽章跟 README 同源加载, 没外部依赖、没速率 限制, shields.io 挂了不关你事。

  • 自定义徽章和 shields.io 实时徽章混排不打架

    README 里已经有 6 个 shields.io 实时徽章 (build / npm 版本 / 下载量等), 你想加一个"Made by Acme"自定义徽章。在别处 生成往往高度差 2-3 像素、颜色稍偏, 紧挨着 shields.io 那 一排看起来就"廉价"。本工具的 flat 风格出来的高度 20px、 Verdana 系字体宽度、配色, 全部按 shields.io 复刻, 加进 那一排像素级齐平。已有的一排是 for-the-badge 风格也一样, 切对应风格就行。

  • monorepo 一次批量出 30 个徽章

    monorepo 里 30 个 package, 每个要"npm @scope/foo v1.x.x" 徽章加一个 license 徽章。切批量模式, 每行 `label|message|color` 的格式, 一次粘 30 行, 工具一口气出 30 个 SVG + 30 段 Markdown。一次 commit 全部更新, 不用一个 package 一个 package 去复制粘贴。

  • Java 项目用 AsciiDoc / Antora 写文档

    Java 开源项目文档多数用 AsciiDoc (Antora、Asciidoctor)。 shields.io URL 在 AsciiDoc 里也能跑, 但语法是 `image:url[alt,link=...]`, 不是 markdown 的 `![]()`。 本工具的 AsciiDoc 输出格式开箱即用: `image:badge.svg[License MIT,link=https://...]`。直接贴进 `index.adoc` 或任意章节文件, Antora 会自动识别, 你不用 记语法。

  • 个人主页"技术栈"一排 12 个徽章, 不走 12 次 HTTP

    作品集首页"Stack:"列了 12 个品牌徽章 (React / Node / Postgres / Docker / AWS 等)。走 shields.io 就是 12 个 SVG URL, 慢 网下能看见徽章一个个浮出来, Lighthouse 的 LCP 也会被这堆 网络请求拖。用本工具的品牌预设, 12 个 SVG 存到本地 `/public/badges/`, 改成本地引用。LCP 立刻降 200-400ms, Lighthouse Performance 上 5-10 分, 徽章看起来跟 shields.io 一样。

  • Python 包发 PyPI, 用 reStructuredText 写徽章

    PyPI 的 README 渲染只认 reStructuredText, 老牌 Python 项目 (Django / Flask / numpy) 也都用 RST。RST 里写一个可点击 徽章是三行: `.. image::`, `:target:`, `:alt:`。本工具的 RST 输出三行连缩进都对, 粘到 `README.rst`, 跑 `python -m build`, PyPI 包页面就能正常显示徽章 —— markdown 格式的徽章在 PyPI 里会静默不渲染。

常见踩坑

  • 忘了把 message 里的空格编码成 `_` (下划线), 下划线编码成 `__` (双下划线)。本工具点 Copy 时自动编码, 但如果你后手改 URL 加了真实空格, 在 shields.io 风格的消费端 (期望编码后的形式) 徽章会坏。

  • 右边 (message) 块用了过于鲜艳的霓虹色。shields.io 的设计语言是哑光的绿 (`#4c1` passing) 和红 (`#e05d44` failing), 鲜亮色会显得"明显是临时塞进来的自定义徽章", 跟旁边一排徽章很不协调。除非有意为之, 否则用哑光色板。

  • 把 GitHub camo 代理过的 URL (`camo.githubusercontent.com/...`) 写死到 README 里, 而不是原始徽章 URL。GitHub 渲染时会把 SVG src 改写成 camo, 但 camo URL 只在 GitHub 上有效, 贴到其他 README 平台就是破图。永远引用原始 SVG 路径。

  • 一排里混用风格 (for-the-badge 旁边贴 flat-square)。每种风格高度不同 (28px vs 20px), 一排看起来很乱。一排里只用一种风格。

  • 徽章塞太多。8 个是软上限, 超过这个数, 徽章那一排会把项目描述挤到首屏外, 访客没看清项目是干嘛的就走了。

隐私说明

所有运算都是浏览器里跑的纯 JavaScript: SVG 渲染、字符宽度 估算、颜色解析、Markdown / HTML / AsciiDoc / RST 片段格式化、 20 个内嵌的 Simple Icons 品牌 SVG。你的 label、message、颜色、 跳转链接, 一个字节都不会发到任何地方 —— 不发 shields.io、不发 Toolora 服务器、不发任何第三方。URL 可分享状态只存 label / message / 颜色 / 风格, 方便你"分享配好的徽章"链接, 但收件人 打开后, 渲染仍然是他浏览器本地做的。首次加载后可断网使用, 也能搬到完全不联网的机器上为内部 repo 生徽章。

常见问题

类似工具组合

做你这行的人, 还会一起用这些。

看这个职业的全部工具
Made by Toolora · 100% client-side · Updated 2026-05-29