Personalize OpenClaw WebUI Logo

Other

Personalize the OpenClaw WebUI favicon (the OpenClaw / xiaolongxia logo). Deploy one of the bundled logo sets (logos/<set>/) into the control-ui dist in every size, or update the logo library from the hub. Only triggers when the user explicitly mentions openclaw or xiaolongxia (小龙虾). | Trigger words (must mention openclaw or 小龙虾): change openclaw logo, change openclaw favicon, apply XX openclaw logo, restore openclaw favicon, update openclaw logo library, 修改openclaw网页logo、换openclaw logo、换小龙虾logo、换成XX的openclaw logo、更新openclaw logo库。

Install

openclaw skills install @woohahahaaa/personalize-openclaw-webui-logo

Personalize OpenClaw WebUI Logo (favicon)

Triggers (highest priority) — only when openclaw or 小龙虾 (xiaolongxia) is mentioned: change openclaw logo, change openclaw website logo, change openclaw favicon, change 小龙虾 logo, apply XX openclaw logo, restore openclaw logo, restore openclaw favicon, update openclaw logo library, update openclaw favicon library. If the user only says a generic "change the logo / change the icon" without mentioning openclaw or 小龙虾 → do NOT trigger this skill. On a qualifying trigger → run the workflow below.

Change the favicon of the OpenClaw control-ui website (the browser tab icon). Supports multiple logo sets, each stored at logos/<set>/favicon-master.png, switchable via apply-logo.sh <set>. All masters are kept inside this skill, so after an openclaw update overwrites the dist you can restore in one command.

Multi-set mechanism

skills/personalize-openclaw-webui-logo/
├── apply-logo.sh          # generic script: bash apply-logo.sh <set> (default: mac)
└── logos/
    └── <set>/favicon-master.png   # one master PNG per set
  • Existing sets: original, mac, windows, linux, mac-finder.
  • List all sets: ls skills/personalize-openclaw-webui-logo/logos/

Workflows

A. Apply an existing logo set ("switch to XX")

  1. Run bash <skill_dir>/apply-logo.sh <set> (e.g. apply-logo.sh mac).
  2. The script generates all sizes from that set's master and writes them into the dist.
  3. Tell the user to hard-refresh (Cmd+Shift+R).

If the set name does not exist, the script lists all available sets and errors out.

B. Update the logo library ("update openclaw logo/favicon library")

Pull the latest version of this skill (with the latest logo sets) from the hub. Published on clawhub (slug: personalize-openclaw-webui-logo, owner @woohahahaaa).

  1. Prefer clawhub update personalize-openclaw-webui-logo (or clawhub install personalize-openclaw-webui-logo); if not logged in, run clawhub login --no-browser --token clh_xxx first.
    • If clawhub is unavailable, try skillhub upgrade personalize-openclaw-webui-logo (the skillhub side needs review and may not be installable yet).
  2. After upgrading, run ls skills/personalize-openclaw-webui-logo/logos/ to confirm the new sets landed.
  3. To apply immediately, run apply-logo.sh <set> to redeploy.

Logo masters ship as base64 .txt (the hub rejects raw .png); apply-logo.sh decodes them automatically.

Key paths

PurposePath
Generic script<skill_dir>/apply-logo.sh
Per-set master<skill_dir>/logos/<set>/favicon-master.png
Target dist~/.npm-global/lib/node_modules/openclaw/dist/control-ui/
4 files in distfavicon.svg / favicon-32.png / favicon.ico / apple-touch-icon.png
OpenClaw media cache~/.openclaw/media/inbound/
index.html refs<link rel="icon" href="./favicon.svg"> etc. (SVG preferred)

Tooling notes

  • Only sips is available locally (no rsvg/magick/sharp). sips can rasterize SVG, resize PNG, and emit a real .ico (sips -s format ico).
  • The favicon.svg slot is preferred by browsers → the script embeds the master PNG as an image-in-SVG so the SVG link also shows the new icon.
  • All sizes are scaled from the master, keeping the 4 formats consistent.

Notes

  • The dist lives inside the openclaw package directory and is overwritten by every npm update / version upgrade → that's why the masters stay in the skill.
  • Browsers cache favicons aggressively; always hard-refresh (Cmd+Shift+R) or clear site data after changing.
  • A complex image scaled down to 16–32px turns into a colored blob — that's normal; for a crisper small icon, simplify the image and replace that set's master.