Add app icon: favicon, apple-touch icon, and top-bar logo

Generated a transparent PNG set from the source icon (a JPEG with a baked-in
checkerboard) by keying out the background on saturation — the arrow is
strongly saturated (0.47-0.68) while the grey/white background is 0.00, so
the cutout is clean. Produced static/logo.png (top-bar, natural aspect),
static/favicon.png (32px), and static/apple-touch-icon.png (180px).

Wired favicon + apple-touch links into all three page heads (feed, settings,
login) and placed the logo next to the "AgentFeed" title in the top bar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
peter 2026-09-03 13:13:17 +01:00
parent 38f3d0f902
commit cf776d3f0b
8 changed files with 15 additions and 1 deletions

BIN
static/apple-touch-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View file

@ -176,10 +176,18 @@ body {
} }
.brand-link { .brand-link {
align-items: center;
color: inherit; color: inherit;
display: flex;
gap: 0.45rem;
text-decoration: none; text-decoration: none;
} }
.brand-logo {
height: 1.6rem;
width: auto;
}
.brand-link:hover { .brand-link:hover {
opacity: 0.75; opacity: 0.75;
} }

BIN
static/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

View file

@ -1,6 +1,6 @@
<header class="topbar"> <header class="topbar">
<div class="brandline"> <div class="brandline">
<a class="brand-link" href="{% url 'feed' %}"><h1>AgentFeed</h1></a> <a class="brand-link" href="{% url 'feed' %}"><img class="brand-logo" src="/static/logo.png" alt=""><h1>AgentFeed</h1></a>
</div> </div>
<div class="toolbar"> <div class="toolbar">
{% if topbar_toolbar %}{% include topbar_toolbar %}{% endif %} {% if topbar_toolbar %}{% include topbar_toolbar %}{% endif %}

View file

@ -4,6 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>AgentFeed</title> <title>AgentFeed</title>
<link rel="icon" type="image/png" href="/static/favicon.png">
<link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
<link rel="stylesheet" href="/static/daybook.css"> <link rel="stylesheet" href="/static/daybook.css">
<script> <script>
// Set the theme before first paint so dark-mode users never see a light flash. // Set the theme before first paint so dark-mode users never see a light flash.

View file

@ -4,6 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Log in — AgentFeed</title> <title>Log in — AgentFeed</title>
<link rel="icon" type="image/png" href="/static/favicon.png">
<link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
<link rel="stylesheet" href="/static/daybook.css"> <link rel="stylesheet" href="/static/daybook.css">
<script> <script>
// Set the theme before first paint so dark-mode users never see a light flash. // Set the theme before first paint so dark-mode users never see a light flash.

View file

@ -4,6 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Settings — AgentFeed</title> <title>Settings — AgentFeed</title>
<link rel="icon" type="image/png" href="/static/favicon.png">
<link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
<link rel="stylesheet" href="/static/daybook.css"> <link rel="stylesheet" href="/static/daybook.css">
<script> <script>
// Set the theme before first paint so dark-mode users never see a light flash. // Set the theme before first paint so dark-mode users never see a light flash.