What Are Repositories Badges?

Some repositories, on GitLab and GitHub, have a list of small images at the top of their README.md file. Are you familiar with them? ๐Ÿคจ

2 min read
What Are Repositories Badges?
Photo by Dmitry Demidov from Pexels

When you are looking at repositories, either on GitHub or on GitLab, you may encounter some tiny images that are similar to Badge example. These images, known as badges, provide some information about a project. Subsequently, readers can quickly gain a clear view of the repositories that have them.

These badges can cover several topics, starting from the license of the project to the number of downloads from NPM. Maintainers can choose which badges they want to display.

But, if you are a maintainer, which badges should you display on your repositories? You could add the badges you would have liked to see if you did not know your repositories. You can also look at some services specialized in badges to find new ideas, like Shields.io.

Shields.io is a free web hosting utility that allows you to generate badges from multiple external services. You will find below the list of categories along with some services you may know.

  • Build: CircleCI, Docker, GitHub, GitLab, Travis
  • Code Coverage: Codecov, GitLab, Jenkins, Sonar
  • Analysis: Code Climate, Dependabot, Snyk, Sonar
  • Chat: Discord
  • Dependencies: David
  • Size: BundlePhobia, Docker
  • Downloads: GitHub, NPM, Packagist
  • Funding: Beerpay, Open Collective
  • Issue Tracking: JIRA, GitHub
  • License: GitHub, NPM, Packagist
  • Rating: Docker, Steam
  • Social: GitHub, Twitter, YouTube
  • Version: Docker, GitHub, Nexus, NPM
  • Platform & Version Support: Node.js, NPM, Packagist
  • Monitoring: HSTS, HTTP Observatory, Security Headers
  • Activity: GitHub, NPM, Steam
  • Other: Ecologi

If you could not find the badge you wanted, you can also create your own with GET parameters:

Screenshot of Shields.io, on October 7, 2020

Once you know the badges you want, you can add them to the top of your README.md file with some code, either in HTML or in Markdown like below:

<a href="https://bundlephobia.com/result?p=@sherby/sherby-metadata@3.0.1">
    <img 
         alt="BundlePhobia"
         src="https://img.shields.io/bundlephobia/min/@sherby/sherby-metadata"
    />
</a>
Definition of a badge in HTML
[![BundlePhobia](https://img.shields.io/bundlephobia/minzip/@sherby/sherby-metadata)](https://bundlephobia.com/result?p=@sherby/sherby-metadata)
Definition of a badge in Markdown

Pretty simple, no? I encourage you to link a page that provides further details, as I did above by pointing to BundlePhobia.

Which badges do you prefer the most in a repository? ๐Ÿ˜‰