什麼是徽章按鈕製作器？
徽章/按鈕製作器可以生成自訂徽章和標牌，自由設定文字、顏色和形狀。填寫標籤和數值，選擇樣式，下載為PNG或SVG。
產生 shields.io 風格的徽章(彩色膠囊形,左灰右彩),以行內 SVG 呈現。可挑選 flat、flat-square、rounded、pill、for-the-badge 五種形狀;為兩半各設十六進位顏色,標籤與數值的文字色也可分別設定;一鍵加入技術圖示(GitHub、npm、Docker、Python、Node.js 等),自動套用對應品牌色;為徽章加上可點擊的連結 URL;複製為 README 用的 Markdown、信件或網頁用的 HTML,或下載清晰的 SVG 及 3 倍解析度的 PNG。還能把多個徽章加入清單,一次複製全部 Markdown 或儲存為 .md 檔案。寬度會隨文字自動伸縮,'Build / Passing' 與 'License / Apache 2.0' 都能保持平衡,不必手動調整。
使用方法
- 輸入徽章文字——選擇標籤（左側）和數值（右側），例如「Version」和「2.0」。
- 為標籤與值的背景挑選顏色,選擇形狀,並可在左側加上技術圖示。
- 即時看到徽章變化,接著下載為 PNG 或 SVG,或複製為 Markdown / HTML,貼入 README 或網頁。
何時使用
- 在 GitHub README 上加建置、版本或覆蓋率徽章,不必接 CI。
- 在著陸頁功能列或方案表上掛 'Beta'、'New'、'Pro' 之類標籤。
- 在個人作品集或履歷 PDF 中以晶片標籤展示技術棧。
結果
建立專案狀態徽章：標籤「Build」灰色背景，數值「Passing」綠色背景，扁平樣式。效果就像GitHub儲存庫裡的狀態徽章。
常見問題
- 下載 PNG 自行託管,徽章還會正常顯示嗎?
- 會。下載的 SVG 和 PNG 都是自包含檔案,不會請求任何伺服器。缺點是沒有即時資料:版本 1.2 的徽章會一直停在 1.2,要更新只能重新產生。
- flat、rounded、pill 三種樣式差在哪?
- Flat 是帶些微漸層的直角矩形,flat-square 形狀相同但沒有漸層,rounded 使用 4 像素圓角,pill 兩端為完整圓弧,for-the-badge 是 README 徽章常用的加粗、加高、全大寫樣式。請選擇與周圍 UI 最相襯的樣式。
- 可以改成品牌色,而不是預設的綠+灰嗎?
- 可以,標籤色、數值色,以及左右兩半各自獨立的文字色都是十六進位取色器。例如深色標籤配淺色文字、再加亮色數值,做出高對比的效果。預覽會即時更新。
- 我該用 SVG 還是 PNG?
- SVG 適合 GitHub README、網站,以及任何會被縮放的位置(永遠清晰)。PNG 適合不會渲染 SVG 的地方:Word、Slack、某些截圖工具裡。
- 為什麼 PNG 比 SVG 檔案大?
- PNG 是用螢幕顯示尺寸 3 倍解析度渲染,才能在高 DPI 螢幕保持清晰。一般徽章 SVG 不到 1 KB,PNG 通常是 5-15 KB。要小檔案用 SVG,要相容性用 PNG。