After recently making my project hit-counter public, I was about to make a part to create your own custom badges to the project until I discovered shields.io.

shields.io can be found on Github which is a server built in JavaScript to host "Concise, consistent, and legible badges in SVG and raster format". A lot of repositories with README.md files contain badges these days as they provide useful and interesting information.

In this tutorial I will show you how to create your own and some dynamic ones hosted by shields.io.

Creating Your Own Static Badges

Going to shields.io/#your-badge you will be brought down the page to a tool that lets you create your own badges. This is quite helpful if you want to make a static badge that either relies on human input or just doesn't change.

Entering a value in subject will provide the text for the left, status the value for the right and color the colour of the right part of the badge.

For example if I wanted to create a badge that says "made with" and then "python" with a blue background, I would do:

<imgsrc="https://img.shields.io/badge/made%20with-python-blue.svg"alt="made with python">

Which will give you:

You can also use hex colour codes instead of names, for example:

<imgsrc="https://img.shields.io/badge/this%20is-purple-503040.svg"alt="this is purple">

This will give:

Styles

Five different styles are also available to use. These are:
- Plastic (?style=plastic)
- Flat (?style=flat)
- Flat Square (?style=flat-square)
- For The Badge (?style=for-the-badge)
- Social (?style=social)

To apply these styles to a badge, simple add ?style= to the end of the url and then add the style type as shown in the brackets above.

For example, using my badge from before:

<imgsrc="https://img.shields.io/badge/made%20with-python-blue.svg?style=flat-square"alt="made with python">

Will create:

Dynamic Badges

When visiting shields.io you will be introduces with a huge site of dynamic badges that the project supports. Here are a few badges that I like or find useful.

Remember there are many more badges on shields.io than what is displayed here. This is just a teaser and small examples of what is to offer.

Additional Options

shields.io has also provided some parameters we can pass to allow for some customisation. To add these to the badge, just put ...svg?parameter=value. If you already have a parameter, you can chain them using &.

For example, from .svg?style=flat-square to .svg?style=flat-square&label=Tag&colorA=ff69b4

Make sure to encode the uri before requesting. This can be done with the encodeURIComponent() method in JavaScript. For example encodeURIComponent(' ') is '%20'.