shields.io 是一個生成靜態和動態徽章的線上服務，適用於類似 GitHub, GitLab 等專案頁面。透過調整 URL 參數，可以輕鬆地創建顯示專案狀態和顏色匹配的徽章。對於簡單的動態徽章，例如 last-commit，可以直接構造 URL，而對於複雜的動態徽章，如網頁訪問量等，則可能需要額外的工具，如 substats，來獲取數據。

其實，如果是靜態的徽章，使用起來非常簡單。只需按照以下格式撰寫圖片的 URL，即可直接插入到 Markdown 中：


<!-- badge 加上連結的語法 -->
![圖片說明](https://img.shields.io/badge/{左半部分標籤文字}-{右半部分標籤文字}-{右半部分顏色})

<!-- badge 加上實際連結 -->
[![Github](https://img.shields.io/badge/Repository-Github-white?logo=github)](https://github.com)

效果如下

Github

客製 Logos

在網站上有時候希望加入一些徽章（badge）時，可能會到網站上自訂想要的樣式。然而，由於世界上有如此多的徽標，shields.io 並未將所有徽標都收錄在資料庫中，因此它提供了客製化徽標的方式。

任何自訂徽標都可以透過將其進行 base64 編碼後，作為 URL 參數傳遞。例如：

我想要使用下面 github 這張圖片作為 badge 的 logo

首先我必須將圖片下載下來，再上傳至 cloudconvert 網站轉檔之後將圖片大小更換成 14px 正方形尺寸的圖片

再上傳至 b64 可以得到如下的資訊。

/* file size: 1ko | optimized file size: 0.8ko | base64 size: 1ko */
.github-logopng {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAABqlBMVEUAAABnZ2d3d3f///8CAgIhISH09PTp6enLy8u2trbF4uiutbo5Nzbw8PCw/f8Auv/6/v8L0//u/P905v/z/f/3/v/G9f+GhoZgYGCgoKCqqqqmpqaXl5dgYGCLi4tRUVEPDw8cHBwbGxsaGhoZGRkRERFZWVlCQkI/Pz/////V1dUhISEdHh63t7ft7e3h4eHR0dInJiYpJiW8vb3i4uLq6urj4+PS0tLS0tJSUVGad2VJRkTNzc7Q0NDf39/o6Ojf3t7Hzs+Lk5J3bGajg3KWcF2ohXN6aV91d3f////b29vl5eXY8vhzf39ZYF85PTwJCQoICAg1Njfs9/yHhYVOTUsuLi0eHh4eHh42Njb8/PzK//+g9/9EanIeNDgeNTk0VFyK3/Kz8/+V7P9o4fyE6v////+s8P+E6v9p0/9bw/9aw/9lz/9+6f+d7f/////O7f+y4f+v4f/F6//y/f8EBAQAAAAdFhJfSj9dRztcRTpiTEAlHBiYdGPqrZ37v6H+waHrr56pgXDqrp37vqD9v5/tsp+uhXOWbltGqtY8lr8/msFBoM1i3Pkn9f8rAAAAdXRSTlMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACFRGxcYH1IdXvTR0dPW81N8gwEOwMoTBA0jydQqDwY3bGan/bpnbEoSFyV3mtj+5aQvCRYXHJOXsff6pgwZfMnl56kIEVvF9fXXcyNr+aIHKJHH2tzPpkUDFSQmGgfx/2dVAAAAiUlEQVQIW2NkQAGMQCTGCAFP/gG5zIzSUO7930Au2y91P6Aahv+bGe/9ZGTgUGL0AUtuYLzznVEPyIBxgcAMRHiCiC0gwh4sw+i8D0IzcDlBGIw7fvwFWcTpAeFu/gxyBjO3L1R6LeMHIJcviFEVxLvBuOYdkCsQApXd/foN0D3MQlFg3qK3fxkAiHIfzSIHcYEAAAAASUVORK5CYII=);
}

加入自定義 logo 後 badge 的效果如下

Github

https://img.shields.io/badge/Repository-Github-white.svg?logo=image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAABqlBMVEUAAABnZ2d3d3f///8CAgIhISH09PTp6enLy8u2trbF4uiutbo5Nzbw8PCw/f8Auv/6/v8L0//u/P905v/z/f/3/v/G9f+GhoZgYGCgoKCqqqqmpqaXl5dgYGCLi4tRUVEPDw8cHBwbGxsaGhoZGRkRERFZWVlCQkI/Pz/////V1dUhISEdHh63t7ft7e3h4eHR0dInJiYpJiW8vb3i4uLq6urj4+PS0tLS0tJSUVGad2VJRkTNzc7Q0NDf39/o6Ojf3t7Hzs+Lk5J3bGajg3KWcF2ohXN6aV91d3f////b29vl5eXY8vhzf39ZYF85PTwJCQoICAg1Njfs9/yHhYVOTUsuLi0eHh4eHh42Njb8/PzK//+g9/9EanIeNDgeNTk0VFyK3/Kz8/+V7P9o4fyE6v////+s8P+E6v9p0/9bw/9aw/9lz/9+6f+d7f/////O7f+y4f+v4f/F6//y/f8EBAQAAAAdFhJfSj9dRztcRTpiTEAlHBiYdGPqrZ37v6H+waHrr56pgXDqrp37vqD9v5/tsp+uhXOWbltGqtY8lr8/msFBoM1i3Pkn9f8rAAAAdXRSTlMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACFRGxcYH1IdXvTR0dPW81N8gwEOwMoTBA0jydQqDwY3bGan/bpnbEoSFyV3mtj+5aQvCRYXHJOXsff6pgwZfMnl56kIEVvF9fXXcyNr+aIHKJHH2tzPpkUDFSQmGgfx/2dVAAAAiUlEQVQIW2NkQAGMQCTGCAFP/gG5zIzSUO7930Au2y91P6Aahv+bGe/9ZGTgUGL0AUtuYLzznVEPyIBxgcAMRHiCiC0gwh4sw+i8D0IzcDlBGIw7fvwFWcTpAeFu/gxyBjO3L1R6LeMHIJcviFEVxLvBuOYdkCsQApXd/foN0D3MQlFg3qK3fxkAiHIfzSIHcYEAAAAASUVORK5CYII=

其他 badge 製作網站