Give the dashboard its own favicon set

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Dashboard favicon set (SVG, ICO, 32 px PNG, Apple touch icon) and `theme-color` tags; the admin app
+  answers `/favicon.ico`.
 - Dashboard rebuilt: live updates over server-sent events (polling fallback), throughput
   per second, pickup and run latency percentiles, queue depth history, workers with
   heartbeats and leases, running jobs with lease countdowns, a live job feed and a

deploy/termux/nginx-location.conf

@@ -10,6 +10,16 @@ location /pgqueue/static/ {
     add_header Cache-Control "public";
 }
 
+# Browsers ask for /favicon.ico (and iOS for the touch icon) at the host root, without reading the page.
+location = /favicon.ico {
+    alias /data/data/com.termux/files/home/pgqueue/src/pgqueue/admin/static/favicon.ico;
+    expires 1d;
+}
+location = /apple-touch-icon.png {
+    alias /data/data/com.termux/files/home/pgqueue/src/pgqueue/admin/static/apple-touch-icon.png;
+    expires 1d;
+}
+
 # The live event stream: long-lived, unbuffered, capped per visitor and in total.
 # Refused viewers get a 503 and the dashboard falls back to polling.
 location = /pgqueue/api/stream {

src/pgqueue/admin/api.py

@@ -10,7 +10,13 @@
 from typing import Annotated
 
 from fastapi import APIRouter, Depends, FastAPI, HTTPException, Query, Request, status
-from fastapi.responses import HTMLResponse, PlainTextResponse, Response, StreamingResponse
+from fastapi.responses import (
+    FileResponse,
+    HTMLResponse,
+    PlainTextResponse,
+    Response,
+    StreamingResponse,
+)
 from fastapi.security import HTTPBasic, HTTPBasicCredentials
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
@@ -235,6 +241,15 @@ async def lifespan(_: FastAPI) -> AsyncIterator[None]:
         app.include_router(actions)
     app.mount("/static", StaticFiles(directory=HERE / "static"), name="static")
 
+    @app.get("/favicon.ico", include_in_schema=False)
+    async def favicon() -> FileResponse:
+        # Browsers request this on their own, without credentials and before reading the page.
+        return FileResponse(
+            HERE / "static" / "favicon.ico",
+            media_type="image/x-icon",
+            headers={"Cache-Control": "public, max-age=86400"},
+        )
+
     @app.get("/", include_in_schema=False, dependencies=[Depends(_authenticate)])
     async def dashboard(request: Request) -> HTMLResponse:
         return templates.TemplateResponse(

src/pgqueue/admin/templates/dashboard.html

@@ -5,7 +5,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="color-scheme" content="light dark">
   <title>pgqueue · live dashboard</title>
-  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='4' fill='%233b7ddd'/%3E%3C/svg%3E">
+  <meta name="theme-color" content="#f5f6f8" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#0e1015" media="(prefers-color-scheme: dark)">
+  <link rel="icon" href="static/favicon.ico" sizes="32x32">
+  <link rel="icon" href="static/favicon.svg" type="image/svg+xml">
+  <link rel="icon" href="static/favicon-32x32.png" type="image/png" sizes="32x32">
+  <link rel="apple-touch-icon" href="static/apple-touch-icon.png" sizes="180x180">
   <link rel="stylesheet" href="static/dashboard.css?v={{ version }}">
 </head>
 <body data-read-only="{{ 'true' if read_only else 'false' }}">

tests/test_admin_api.py

@@ -157,3 +157,20 @@ async def test_dashboard_page_and_assets_are_served(client: Client) -> None:
     script = await client.get("/static/dashboard.js")
     assert script.status == 200
     assert "X-PgQueue-Action" in script.text  # the dashboard sends the CSRF header
+
+
+async def test_icons_are_served_with_image_types(client: Client) -> None:
+    page = await client.get("/")
+    for name in ("favicon.ico", "favicon.svg", "favicon-32x32.png", "apple-touch-icon.png"):
+        assert f"static/{name}" in page.text
+    for path, ctype in (
+        ("/favicon.ico", "image/x-icon"),
+        ("/static/favicon.svg", "image/svg+xml"),
+        ("/static/favicon-32x32.png", "image/png"),
+        ("/static/apple-touch-icon.png", "image/png"),
+    ):
+        icon = await client.get(path)
+        assert icon.status == 200, path
+        assert icon.headers["content-type"].split(";")[0] == ctype
+        assert icon.body
+    assert (await client.get("/favicon.ico")).headers["cache-control"] == "public, max-age=86400"