Github上经常看到各类项目添加的各类小图标表述项目相关信息，让人眼前一亮，无形中增加了项目的关注度和热度，那么如何给自己的GitHub开源项目添加类似图标呢，让我们娓娓道来。

徽标简介

GitHub项目的README.md中可以添加徽章（Badge）对项目进行标记和说明，这些好看的小图标不仅简洁美观，而且还包含了清晰易读的信息。
徽标主要由图片和对应的链接组成，徽标图片的话一般由左半部分的名称和右半部分的值组成。

GitHub徽标的官网地址,可以在官网预览绝大部分的徽标样式，然后选择自己喜欢的徽标，添加到自己的项目文档中去。
徽标分类如下：

Build
Downloads
Version
Social
Funding
Miscellaneous
Longer Miscellaneous
自定义(Static\Dynamic)
Styles

找了几个案例供大家参考：

也有徽标使用超多的案例，建议大家理性使用徽标。

全凭个人喜好添加，你开心就好。

常见徽标添加

常用的徽标主要有持续集成状态、项目版本信息、代码测试覆盖率、项目支持平台、项目语言、代码分析等，下面我们依次熟悉下这些徽标。

持续集成状态

持续集成的话推荐Travis CI，针对开源项目免费。其他还有CircleCI、Jenkins和Codeship等，大家可以在shields.io/的Build分类查找。
登录Travis CI,直接使用GitHub账户登录即可。
参考官方文档，添加.travis.yml 配置文件，告诉Travis CI怎样对你的项目进行编译或测试。

根据需要将GitHub用户及项目名称替换掉即可

如果你的编译没跑过或者发生错误之类的，会出现其他的状态，比如：

项目下载量

项目被下载的次数各个平台的统计都是独立的，比如发布在npm的项目下载量徽标图片地址如下，以cesarferreira/drone为例：
总下载量：https://img.shields.io/npm/dt/{项目名称}.svg
月下载量：https://img.shields.io/npm/dm/{项目名称}.svg
周下载量：https://img.shields.io/npm/dw/{项目名称}.svg
效果如下：

项目版本信息

语法：
https://img.shields.io/npm/v/{项目名称}.svg
同样以cesarferreira/drone为例：
HTML语法

1	<a href="https://www.npmjs.com/package/drone"><img src="https://img.shields.io/npm/v/drone.svg" alt="npm"></a>

Markdown语法

1	![](https://img.shields.io/npm/v/drone.svg)

代码测试覆盖率

代码测试覆盖率的话推荐Codecov.同样的，Codecov可以直接使用GitHub账号登陆.
更多信息参考官网文档

项目支持平台

略，有需要的同学自行研究

项目语言

该徽标是通过自定义徽标实现的，具体可参考下文自定义徽标一节，这里给出徽标代码：
https://img.shields.io/badge/language-{项目语言}-{背景色}.svg
将 {项目语言} 和 {背景色} 替换为你的项目目前的语言和你想要的背景色即可，这里以 Swift 为例，我们用上 Swift 官方橘色：

代码质量分析

略，有需要的同学自行研究

开源协议类型

https://img.shields.io/npm/l/express.svg
https://img.shields.io/apm/l/vim-mode.svg

自定义徽标

标题／内容／颜色／链接

以上这些徽标没有满足你的需求，还可以定制自己的个性化徽标，shields.io提供了添加自定义徽标的功能，通过修改如下URL即可获取自定义徽标图片：
https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg
{徽标标题}：徽标左半部分的文本（短线：–，下划线：__，空格：或_）；
{徽标内容}：徽标右半部分的文本，同上；
{徽标颜色}：徽标右半部分背景颜色，可以是 red、green、blue 等颜色英文单词，也可以直接写十六进制的颜色值，如 ff69b4

附加参数

在徽标图片URL后面带上一些参数来控制徽标的样式。使用方法就是在徽标图片 URL 后面跟上 ?{参数名}={参数值}，多个参数联用的话就是 ?{参数名1}={参数值1}&{参数名2}={参数值2}…
有需要可以自行研究，附加参数类型如下：

style
label
logo
logoWidth
link
colorA
colorB
maxAge

其他小知识点

默认的徽标是居左排列的，如果需要居中排列需要使用 HTML 的方式来插入徽标，可参考 Kingfisher，代码和效果如下：

<p align="center">
<a href="https://travis-ci.org/onevcat/Kingfisher">![](https://img.shields.io/travis/onevcat/Kingfisher/master.svg)</a>
<a href="https://github.com/Carthage/Carthage/">![](https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat)</a>
<a href="https://swift.org/package-manager/">![](https://img.shields.io/badge/SPM-ready-orange.svg)</a>
<a href="http://onevcat.github.io/Kingfisher/">![](https://img.shields.io/cocoapods/v/Kingfisher.svg?style=flat)</a>
<a href="https://raw.githubusercontent.com/onevcat/Kingfisher/master/LICENSE">![](https://img.shields.io/cocoapods/l/Kingfisher.svg?style=flat)</a>
<a href="http://onevcat.github.io/Kingfisher/">![](https://img.shields.io/cocoapods/p/Kingfisher.svg?style=flat)</a>
<a href="https://codebeat.co/projects/github-com-onevcat-kingfisher">![codebeat badge](https://codebeat.co/assets/svg/badges/A-398b39-669406e9e1b136187b91af587d4092b0160370f271f66a651f444b990c2730e9.svg)</a>
</p>

优秀徽标

Gitter

这是对issue功能的一个补充。正常情况下，当你给某个项目提出问题时，需要新建一个issue提出，并且需要等待开发者的回复（短则一两天，长则大半年），效率不是很高。而Gitter就提供了一个实时的聊天室，项目的开发者可以用github账号登陆之，为某个项目创建一个聊天室，然后再项目的Readme中加入如下代码：
[![Gitter](https://badges.gitter.im/Join Chat.svg)](聊天室 URL)
就可以显示聊天室的徽章啦：
[Gitter](https://badges.gitter.im/Join Chat.svg)
单击即可进入聊天室，与开发者进行实时沟通。