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:
<img src="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:
<img src="https://img.shields.io/badge/this%20is-purple-503040.svg" alt="this is purple">
This will give:
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:
<img src="https://img.shields.io/badge/made%20with-python-blue.svg?style=flat-square" alt="made with python">
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.
Current GitHub tag:
GitHub code size in bytes:
GitHub top language:
GitHub language count:
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
Make sure to encode the uri before requesting. This can be done with the
?label=healthinesses : Override the default left-hand-side text
?logo=appveyor : Insert one of the named logos
?logo=data:image/png;base64,… : Insert custom logo image (≥ 14px high)
No example as the data for the png will be large.
?logoWidth=40 : Set the horizontal space to give to the logo
?link=http://left&link=http://right : Specify what clicking on the left/right of a badge should do
No example as I use img to embed these images (You can use an <object> tag if you want to embed these).
?colorA=abcdef : Set background of the left part (hex color only)
?colorB=fedcba : Set background of the right part (hex color only)
?maxAge=360 : Set the HTTP cache lifetime in secs