ops/homelab

Fork 0

Add a favicon to kromgo using an FxEmoji SVG converted to 128x128 PNG #98

New issue

Open

opened 2026-07-19 23:53:24 +00:00 by mcp-bot · 0 comments

mcp-bot commented

2026-07-19 23:53:24 +00:00

Member

Goal

Add a custom favicon to our kromgo instance so /favicon.ico doesn't 404 and the kromgo gallery/landing page has a branded icon.

Background

kromgo PR #302 adds built-in favicon support: set a top-level favicon config value to a base64-encoded PNG, GIF, or ICO image and kromgo serves it at /favicon.ico and links it from the gallery and landing page.

Approach

Pick an FxEmoji SVG from mozilla/fxemoji that fits the observability/monitoring theme
Convert the SVG to a 128x128 PNG
Base64-encode the PNG
Add it to the kromgo config (Helm values or kromgo.yaml)

FxEmoji candidates (from `svgs/symbols/`)

Emoji	SVG filename	Notes
🔖 `u1F536`	`largeorangediamond.svg`	Pulsing beacon / signal — strong monitoring vibe
💎 `u1F4A0`	`diamondshapewithdotinside.svg`	Target / crosshair — fits "metrics" theme
📡 `u1F4F6`	`antennawithbars.svg`	Signal / antenna — literally broadcasting metrics
🔘 `u1F518`	`radiobutton.svg`	Clean, minimal — fits the badge aesthetic
⚡ `u1F4A0`	(sparkle variants)	`sparkle.svg` / `eightpointedblackstar.svg`

Recommended: largeorangediamond.svg (u1F536) or antennawithbars.svg (u1F4F6) — both communicate "broadcasting / monitoring" at a glance.

Conversion steps (in the issue or PR)

# 1. Download the SVG
curl -O https://raw.githubusercontent.com/mozilla/fxemoji/gh-pages/svgs/symbols/u1F536.layer1.svg

# 2. Convert to 128x128 PNG (using rsvg-convert, inkscape, or svgo + imagemagick)
rsvg-convert -w 128 -h 128 u1F536.layer1.svg -o favicon.png

# 3. Base64-encode for the kromgo config
base64 -w 0 favicon.png

kromgo config

Add the base64-encoded PNG to the kromgo config:

favicon: <base64-encoded-png>

Or in Helm values:

config:
  favicon: <base64-encoded-png>

Acceptance Criteria

An FxEmoji SVG is selected and converted to 128x128 PNG
The PNG is base64-encoded
The encoded value is added to the kromgo config (Helm values or config file)
GET /favicon.ico returns the favicon with correct Content-Type
The favicon <link> appears in the gallery and landing page HTML

## Goal Add a custom favicon to our kromgo instance so `/favicon.ico` doesn't 404 and the kromgo gallery/landing page has a branded icon. ## Background [kromgo PR #302](https://github.com/home-operations/kromgo/pull/302) adds built-in favicon support: set a top-level `favicon` config value to a base64-encoded PNG, GIF, or ICO image and kromgo serves it at `/favicon.ico` and links it from the gallery and landing page. ## Approach 1. Pick an FxEmoji SVG from [mozilla/fxemoji](https://github.com/mozilla/fxemoji) that fits the observability/monitoring theme 2. Convert the SVG to a 128x128 PNG 3. Base64-encode the PNG 4. Add it to the kromgo config (Helm values or kromgo.yaml) ### FxEmoji candidates (from `svgs/symbols/`) | Emoji | SVG filename | Notes | |-------|-------------|-------| | 🔖 `u1F536` | `largeorangediamond.svg` | Pulsing beacon / signal — strong monitoring vibe | | 💎 `u1F4A0` | `diamondshapewithdotinside.svg` | Target / crosshair — fits "metrics" theme | | 📡 `u1F4F6` | `antennawithbars.svg` | Signal / antenna — literally broadcasting metrics | | 🔘 `u1F518` | `radiobutton.svg` | Clean, minimal — fits the badge aesthetic | | ⚡ `u1F4A0` | (sparkle variants) | `sparkle.svg` / `eightpointedblackstar.svg` | **Recommended:** `largeorangediamond.svg` (`u1F536`) or `antennawithbars.svg` (`u1F4F6`) — both communicate "broadcasting / monitoring" at a glance. ### Conversion steps (in the issue or PR) ```bash # 1. Download the SVG curl -O https://raw.githubusercontent.com/mozilla/fxemoji/gh-pages/svgs/symbols/u1F536.layer1.svg # 2. Convert to 128x128 PNG (using rsvg-convert, inkscape, or svgo + imagemagick) rsvg-convert -w 128 -h 128 u1F536.layer1.svg -o favicon.png # 3. Base64-encode for the kromgo config base64 -w 0 favicon.png ``` ### kromgo config Add the base64-encoded PNG to the kromgo config: ```yaml favicon: <base64-encoded-png> ``` Or in Helm values: ```yaml config: favicon: <base64-encoded-png> ``` ## Acceptance Criteria - [ ] An FxEmoji SVG is selected and converted to 128x128 PNG - [ ] The PNG is base64-encoded - [ ] The encoded value is added to the kromgo config (Helm values or config file) - [ ] `GET /favicon.ico` returns the favicon with correct `Content-Type` - [ ] The favicon `<link>` appears in the gallery and landing page HTML

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

ops/homelab#98

No description provided.

Rows
Columns