Creating custom badges for your README

TIL
Author

Thomas Sandmann

Published

November 17, 2022

Today I learned how to create custom badges with shields.io, and how to add them to the README.md file on github.

Predefined badges

Many open source software packages display key pieces of information as badges (aka shields) in their github README, indicating e.g. code coverage, unit test results, version numbers, license, etc.

The shields.io website provides many different ready-to-use badges, covering topics such as test results, code coverage, social media logos, activity, and many more.

Badges can show up to date information. For example, this badge shows the last commit to the github repository for this blog: . They can be returned either in svg (recommended) or png formats, from the img.shields.io and raster.shields.io servers, respectively.

Custom badges

In addition to predefined outputs, you can also generate your own, entirely custom badges. They can be static like this one or dynamically retrieve information from a JSON endpoint of your choice.

Adding badges to a README.md file

To embed badges into your README.md, simply wrap its URL in markdown and surround it with the badges: start and badges: end tags:

<!-- badges: start -->
![](https://img.shields.io/github/last-commit/tomsing1/blog)
<!-- badges: end -->

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.