Adding beautiful badges into the markdown

Adding beautiful badges into the Github README file is important to make your open source code more professional, for example:

Image for post
Image for post
Image for post
Image for post

Shields format

The format of the badge image is as bellow:

[<img src="https://img.shields.io/badge/LABEL-MESSAGE-COLOR.svg?logo=LOGO">](<LINK>)

We could use Shields to generate whatever icon we’d like to.

Shields example

Take the bellow badge as an example, the LABEL is ‘dockerhub’, the MESSAGE is ‘images’, the COLOR is ‘important’

Shields colors

We can find popular colors as bellow in the Shields website and we can directly specify the color value:

Image for post
Image for post

SVG logos

The LOGO uses simple SVG icon name which can be found in SimpleIcons, we use Docker in the above example as we find the Docker SVG icon:

Base64 icon data

We could customize own icon by using the Base64 icon data.

[<img src="https://img.shields.io/badge/LABEL-MESSAGE-COLOR.svg?logo=data:image/png;base64,DATA">](<LINK>)
Image for post
Image for post

Icon generate ways

Badge integration with third-party

  • Travis-CI: Copy the badge icon markdown code from the platform. The icon displays the realtime build status
  • All-contributors bot: Display current contributors. Adding a contributor by commenting in a Github Issue (@all-contributors please add USERNAME for design)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store