diff --git a/server/handlers.go b/server/handlers.go index 397a65419acfcd3018434ac86916f46f59d23b12..c54dfc724fb3796ebce54f941b05c80328365dfd 100644 --- a/server/handlers.go +++ b/server/handlers.go @@ -305,54 +305,38 @@ func hashString(s string) uint32 { return hash } -// generateFaviconSVG creates a seashell favicon with color based on hostname hash +// generateFaviconSVG creates a Cool S favicon with color based on hostname hash +// Big colored circle background with the Cool S inscribed in white func generateFaviconSVG(hostname string) string { hash := hashString(hostname) h := hash % 360 - s := 55 - l := 65 - lightL := l + 15 - if lightL > 90 { - lightL = 90 - } - darkL := l - 15 - if darkL < 40 { - darkL = 40 - } - strokeL := darkL - 15 - if strokeL < 25 { - strokeL = 25 - } - - return fmt.Sprintf(` - - - - - - - - - - - - - - - + bgColor := fmt.Sprintf("hsl(%d, 70%%, 55%%)", h) + // White S on colored background - good contrast on any saturated hue + strokeColor := "#ffffff" + + // Original Cool S viewBox: 0 0 171 393 (tall rectangle) + // Square viewBox 0 0 400 400 with circle, S scaled and centered inside + // S dimensions: 171x393, scale 0.97 gives 166x381, centered in 400x400 + return fmt.Sprintf(` + + + + + + + + + + + + + + + + + `, - h, s, lightL, - h, s, l, - h, s, darkL, - h, s-10, strokeL, - h, s-20, darkL, - h, s-20, darkL, - h, s-20, darkL, - h, s-20, darkL, - h, s-20, darkL, - h, s-20, darkL, - h, s-20, darkL, + bgColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, strokeColor, ) } diff --git a/ui/src/services/favicon.ts b/ui/src/services/favicon.ts index a1ce030c787556db7823885aba97884a80e63444..595aca6eff30fab16f2e2a70f676d8257438d019 100644 --- a/ui/src/services/favicon.ts +++ b/ui/src/services/favicon.ts @@ -34,10 +34,11 @@ function addStatusDot(svg: string, status: FaviconStatus): string { const svgWithoutClose = svg.substring(0, closingTagIndex); // Add the status dot in the bottom-right corner + // New viewBox is 400x400, so position dot near bottom-right at ~350,350 const dotColor = status === "working" ? "#f59e0b" : "#22c55e"; const statusDot = ` - - + + `; return svgWithoutClose + statusDot + "";