A Laravel-based GitHub profile visitor counter and github repository visitor counter that generates customizable SVG badges to display on your GitHub profile or in a repository's README.
Made only for fun and to try out new latest Laravel and testing utilities, like PEST & Dusk.
Add this to your profile page README.md to show a visitor counter badge:
It will generate a visitor counter badge that looks like this:
Add this to your repository README.md to show a visitor counter badge for a specific repository:
The visitor counter badge can be customized with the following URL parameters:
| Parameter | Description | Default | Example Values |
|---|---|---|---|
username |
GitHub username (required) | — | ?username=your-username |
label |
Text label displayed on the badge | Visits | label=Profile%20Views |
color |
Badge right-side (value) color | blue | color=green, color=ff5500, color=red |
labelColor |
Left-side label background (named or hex no #) | blue | labelColor=red, labelColor=ffd700 |
style |
Badge style | for-the-badge | style=flat, style=flat-square, style=plastic |
base |
Starting count added to stored counter | 0 | base=100 |
abbreviated |
Abbreviate large numbers (1.2K, 3.4M) | false | abbreviated=true |
repository |
Repository scope (per‑repo counter) | (none) | repository=my-repo |
logo |
Data URI image (png,jpg,gif,svg) OR simple-icons slug | (none) | logo=github, logo=laravel, logo=data:image/png;base64,iVBOR... |
logoSize |
Logo sizing: auto (SVG adapt) or fixed px (8–32) |
14 | logoSize=auto, logoSize=32 |
logoColor |
Recolor SVG/simple-icon logo (named or hex, no #) | f5f5f5 | logoColor=red, logoColor=ff8800, logoColor=brightgreen |
| Style | Example | Markdown |
|---|---|---|
for-the-badge |
 |
 |
flat |
 |
 |
flat-square |
 |
 |
plastic |
 |
 |
 |
red |
 |
 |
orange |
 |
 |
yellow |
 |
 |
| Hex Color | Example | Markdown |
|---|---|---|
ffd700 |
 |
 |
e34234 |
 |
 |
6a0dad |
 |
 |
00b7eb |
 |
 |
Note
You must specify hex colors without the # prefix (e.g., f000ff instead of #f000ff).
| Label Color | Example | Markdown |
|---|---|---|
00aaff |
 |
 |
green |
 |
 |
yellow |
 |
 |
All the named colors supported and the corresponding hex values:
| Color Name | Hex | Color Name | Hex |
|---|---|---|---|
brightgreen |
#44cc11 |
green |
#97ca00 |
yellowgreen |
#a4a61d |
yellow |
#dfb317 |
orange |
#fe7d37 |
red |
#e05d44 |
blue |
#007ec6 |
lightgray |
#9f9f9f |
lightgrey |
#9f9f9f |
gray |
#555555 |
grey |
#555555 |
blueviolet |
#8a2be2 |
success |
#97ca00 |
important |
#fe7d37 |
critical |
#e05d44 |
informational |
#007ec6 |
inactive |
#9f9f9f |
— | — |
Any hex color can be used instead 🎨
| Custom Label | Example | Markdown |
|---|---|---|
Profile%20Visitors |
 |
 |
Chocolate%20Cookies |
 |
 |
Horsepowers |
 |
 |
Display large numbers in abbreviated format (1K, 1.5M, etc.):
Supported image types: png | svg
The logo parameter supports the following input;
Any simple‑icons slug. Like logo=github, logo=laravel ...etc.
| Slug | Example | Markdown |
|---|---|---|
github |
 |
 |
laravel |
 |
 |
When using a simpleicon slug, or logo/icon with a fillable format, ie svg, you can also set the logoColor.
Note
logoColor only affects the fill color on simple icon slugs or svg logos.
If you try to use it on a png logo it will have no effect.
| Slug | Example | Markdown |
|---|---|---|
refinedgithub |
 |
 |
laravel |
 |
 |
You can use your own custom logo by embedding it as a data URI.
- Full data URI - Example:
logo=data:image/png;base64,iVBOR... - Raw base64 blob without the
data:prefix - Example:logo=iVBORw0KGgoAAAANSUhEUgAA... - Urlencoded base64 blob with
data:prefix - Example:logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc...
Both works, but the first is preferred as it needs less processing and therefore gets rendered a little bit quicker.
This is the "proper" and recommended way to add a logo or icon to your badge.
Note
The above examples will work also if the data uri part: data:image/png;base64, is omitted and only the raw encoded string is used.
But that is not recommended as it takes longer to process, and the logo can also be refused by validation or just ignored.
The recommended way is to use the full data uri and also urlencode the logo string.
Use the logoSize parameter to control how large the logo appears on your badge:
logoSize=auto – keeps the logo’s original proportions while fitting it to the badge.
logoSize=12 – sets the logo to a specific size (any number from 8 up to 32). Handy when a logo feels too large or too small.
Examples:
...&logo=github&logoSize=auto
...&logo=github&logoSize=12Try different values, refresh the badge, and pick the look you like best.
Some limtiations are applied:
- Maximum decoded logo size: 10 KB. Larger images are silently ignored.
- Maximum raster (PNG width/height: 32×32 pixels. Larger raster images are silently ignored (not resized).
- Supported formats:
pngandsvg. Anything else is ignored without error. - Rejected / ignored logos never break the badge – it simply renders without the
logo. - Basic rate limiting protects the service. If you see HTTP 429, reduce request frequency.
This is a Laravel-based application that can be self-hosted.
See the project structure and Docker configuration for details on how to set up your own instance.
Documentation for development and self-hosting is in the making and will be added at some point.
If you know basic Laravel and Docker it should be fairly straightforward to get it up and running.
Clone away and have badges of fun!
Badges for the cool Poser library. A php library that creates badges.
Awesome Badges a curated list of awesome badge things.
Simple Icons SVG icons for popular brands.