Proposal: Improve the default Hermes WebUI logo — concept gallery

[EiomSirius]

🎨 Proposal: Improve the default Hermes WebUI logo

The current favicon/logo (a hand-drawn caduceus in SVG) feels a bit abstract and rough. This issue collects a few concept directions for a redesigned logo. Feel free to pick any of these and run with it — the goal is to inspire someone to develop a polished final version.

---

Concept A: W-U-I Monogram (Caduceus letterform)

Since the project is called Hermes WebUI, the letters W, U, I can form a stylized caduceus:

Letter	Role
W	Wings of Hermes (top)
U	Body of the staff
I	The staff itself, centered inside the U

Quick SVG mockup (dark theme, gold accents matching current palette):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <linearGradient id="gold" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#F5C542"/>
      <stop offset="100%" style="stop-color:#D4961C"/>
    </linearGradient>
  </defs>
  <rect width="200" height="200" rx="30" fill="#1a1a1a"/>
  <path d="M100 18 L55 52 L68 30 L38 52 L50 34 L20 56 
           L100 22 L180 56 L150 34 L162 52 L132 30 L145 52 L100 18" 
        fill="url(#gold)" opacity="0.95"/>
  <path d="M100 26 L70 45 L78 34 L52 48 L100 28 L148 48 L122 34 L130 45 L100 26" 
        fill="#FFF8E1" opacity="0.35"/>
  <path d="M50 58 L50 118 Q50 148 75 148 L125 148 Q150 148 150 118 L150 58" 
        fill="none" stroke="url(#gold)" stroke-width="7" stroke-linecap="round"/>
  <line x1="100" y1="50" x2="100" y2="150" stroke="url(#gold)" stroke-width="5" stroke-linecap="round"/>
  <circle cx="100" cy="42" r="7" fill="url(#gold)"/>
  <circle cx="100" cy="42" r="3" fill="#FFF8E1" opacity="0.6"/>
</svg>

Why this works: It is literally the project acronym, it reads as a caduceus (winged staff of Hermes), the shapes are clean vector so they scale to favicon size, and it keeps the Hermes mythology tie-in.

---

Concept B: Hermes Desktop style icon

The Hermes Desktop app by @fathah has a much more polished icon (resources/icon.png) — a detailed circular illustration. Adopting a similar level of detail and professionalism for the WebUI would be an improvement while keeping visual consistency across the Hermes ecosystem.

---

Concept C: AI-generated explorations

Several AI-generated icon concepts were also created exploring different directions (more to be attached if anyone wants to iterate on them).

---

Open questions / next steps

• Should the logo be square (favicon-like) or a horizontal lockup?
• Gold gradient like current, or a different palette?
• Pure SVG vector or include raster fallbacks?
• Who wants to take a shot at a production-ready version?

If you are interested in developing any of these concepts into a proper PR (replacing static/favicon.svg, static/favicon-32.png, static/favicon-512.png, favicon.ico, and the inline empty-state SVG in static/index.html), go for it! Contributions welcome. 🚀

[EiomSirius]

📸 Concept images gallery

Here are some visual explorations to go along with the concepts above:

Concept A — W-U-I Monogram (SVG mockup inline above)

Concept B — Hermes Desktop icon (fathah/hermes-desktop)

Concept C — AI-generated explorations

1. Full logo design

2. Full logo design (wide)

3. Badge/card style

4. Letterform W-U-I style

5. Alternative exploration

---

Note: images hosted on catbox.moe — if they go down, the concepts are still described in the issue body.

[Michaelyklam]

Thanks for putting this together — the concepts are useful. Before someone changes the default app mark/favicon, could you clarify the preferred first slice?

My recommendation would be a small, reviewable pass that replaces only the WebUI favicon/app logo with one selected direction, while leaving broader branding/theme changes for later. Which concept should be treated as the target for that first pass, and should it replace both the favicon and the in-app logo mark?

[EiomSirius]

Great questions, @Michaelyklam! And thanks for the interest 🙌

After thinking it through, here is my preferred direction:

Concept preference

I love the Hermes Desktop icon (Concept B) — the caduceus has strong symbolism and visual impact. But I wouldn't want to use it as-is. Instead, I would love a modern, minimalist take on the caduceus:

• Clean, geometric lines (think Brave Browser visual style — flat, modern, sharp)
• Simplified wing shapes and staff
• With subtle programming/coding hints — perhaps the staff could suggest a pipe | character, or the wings could incorporate angle brackets <> or curly braces {}
• The result should be a minimal, recognizable caduceus that also whispers "tech / web / code"

Scope for the first pass

I think replacing both the favicon and the in-app logo (the empty-state SVG in index.html) would be ideal, so the branding is consistent everywhere. If that is too much in one PR, starting with just the favicon makes sense.

Summary

A simplified, modern caduceus with a coding twist. Something you could see as a browser tab icon and immediately think "developer tool". 🚀

What do you think? Happy to iterate on sketches.

[EiomSirius]

Quick correction — I didn't explain myself well in the previous comment. When I say "programming hints" or "coding twist", I don't mean literal code symbols like brackets or pipes. What I mean is:

The visual style itself should feel modern and tech-forward — clean geometric lines, flat design, minimal ornamentation. Think of how Brave Browser's logo feels: modern, sharp, confident, but simple.

The caduceus (staff + wings) can be reduced to its purest geometric form — elegant lines that suggest both the mythical origin and a modern web tool. No literal code symbols needed; the shapes themselves should whisper "technology" through their simplicity and precision.

Sorry for the confusion! I hope that clarifies the direction better.

[nesquena-hermes]

Great direction, @EiomSirius — modern minimalist caduceus across favicon + in-app logo is exactly the right scope for the first pass.

PR #2475 is in flight implementing this: replaces the default SVG favicon with a modern geometric wing-and-staff caduceus, regenerates all the PNG/ICO/PWA touch assets from the same SVG source, and updates the titlebar and empty-state inline logos to match. Source/asset regression coverage included.

Once it lands you should see a consistent mark across:

• Browser tab favicon
• PWA install icon (mobile + desktop)
• The in-app titlebar
• The empty-chat initial state

Will close this issue when #2475 merges. If the result doesn't quite hit the "Brave Browser feel" you described in the visual review, we can iterate on the SVG without re-running the whole asset pipeline — the regeneration step is scripted now.

Thanks for both the original gallery and the follow-up clarification — the "no literal code symbols, just geometric purity" framing made the design direction much sharper than it would have been from the original concepts alone.