feat(favicon): serve project favicon reusing the header envelope logo

Serve an inline SVG icon at /favicon.svg and /favicon.ico and link it
from the shared Layout and the standalone entry view, so the admin UI,
status page, and entry pages stop emitting /favicon.ico 404s. Doubles
as the fallback for the upcoming per-feed favicon feature.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Julien Herr
2026-05-23 13:13:44 +02:00
parent a67baa71f4
commit d299c8891d
7 changed files with 89 additions and 7 deletions
+29 -6
View File
@@ -3,8 +3,14 @@ import layoutCss from "../../styles/layout.css";
import componentsCss from "../../styles/components.css";
import utilitiesCss from "../../styles/utilities.css";
import { interactiveScripts } from "../../scripts/index";
import { FAVICON_PATH } from "../favicon";
const designSystem = [variablesCss, layoutCss, componentsCss, utilitiesCss].join("\n");
const designSystem = [
variablesCss,
layoutCss,
componentsCss,
utilitiesCss,
].join("\n");
type LayoutProps = {
title: string;
@@ -17,6 +23,7 @@ export const Layout = ({ title, label = "admin", children }: LayoutProps) => {
<html>
<head>
<title>{title} kill-the-news</title>
<link rel="icon" type="image/svg+xml" href={FAVICON_PATH} />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark light" />
@@ -32,20 +39,36 @@ export const Layout = ({ title, label = "admin", children }: LayoutProps) => {
/>
{/* designSystem and interactiveScripts are static trusted strings, not user input */}
<style dangerouslySetInnerHTML={{ __html: designSystem }} />
<script dangerouslySetInnerHTML={{ __html: interactiveScripts + ";" }} />
<script
dangerouslySetInnerHTML={{ __html: interactiveScripts + ";" }}
/>
</head>
<body class="page">
<header class="site-header">
<a href="https://kill-the.news/" class="site-header-logo" target="_blank" rel="noopener">
<a
href="https://kill-the.news/"
class="site-header-logo"
target="_blank"
rel="noopener"
>
kill-the-news
</a>
<span class="site-header-label">{label}</span>
</header>
{children}
<footer class="site-footer">
<a href="https://kill-the.news/" target="_blank" rel="noopener">kill-the.news</a>
<span class="site-footer-sep" aria-hidden="true">·</span>
<a href="https://github.com/sponsors/juherr" target="_blank" rel="noopener" class="site-footer-sponsor">
<a href="https://kill-the.news/" target="_blank" rel="noopener">
kill-the.news
</a>
<span class="site-footer-sep" aria-hidden="true">
·
</span>
<a
href="https://github.com/sponsors/juherr"
target="_blank"
rel="noopener"
class="site-footer-sponsor"
>
Sponsor
</a>
</footer>