Github Badges

A small demonstration of using GitHub badges from and how to manipulate them. Basic badges are demonstrated that would be most used by people.

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 is a server built using JavaScript to host "Concise, consistent, and legible badges in SVG and raster format" which can be found on Github. A lot of repositories with 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

Creating Your Own Static Badges

Going to 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.

Create Your Own Badge

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="" alt="made with python">

Which will give you: made with python

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

<img src="" alt="this is purple">

This will give: this is purple


Five different styles are also available to use. These are:

  • Plastic (?style=plastic) Plastic
  • Flat (?style=flat) Flat
  • Flat Square (?style=flat-square) Flat Square
  • For The Badge (?style=for-the-badge) For The Badge
  • Social (?style=social) 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="" alt="made with python">

Will create: made with python

Dynamic Badges

When visiting you will be introduced 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 than what is displayed here. This is just a teaser and small examples of what is to offer.


Current GitHub tag: Current GitHub tag

GitHub issues: GitHub issues

GitHub contributors: GitHub contributors

License: License

GitHub code size in bytes: GitHub code size in bytes

GitHub top language: GitHub top language

GitHub language count: GitHub language count


GitHub forks: Forks

GitHub stars: Stars

GitHub watchers: Watchers

GitHub followers: Followers

Twitter URL: Twitter

Twitter Follow: Twitter Follow

Additional Options 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'.

?label=healthinesses : Override the default left-hand-side text

Current GitHub tag will become Current GitHub tag

?logo=appveyor : Insert one of the named logos

Current GitHub tag will become Current GitHub tag

?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

Current GitHub tag will become Current GitHub tag

?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)

Current GitHub tag will become Current GitHub tag

?colorB=fedcba : Set background of the right part (hex color only)

Current GitHub tag will become Current GitHub tag

?maxAge=360 : Set the HTTP cache lifetime in secs

Current GitHub tag will become Current GitHub tag