Add a favicon cut from the header mark

Reuse SiteHeader's path and gradient, cropped square to the stroke's bounds -- the header's 800x400 viewBox is mostly empty space. The mouseenter <animate> is dropped; a tab bar never fires it. Small sizes get a thicker stroke: the header's is about 6% of the mark's width, which antialiases to a pale smear at 16px. The SVG uses 26 instead of 22 (indistinguishable at header size) and the 16/32 ICO frames are rasterised at 40. The icons stay transparent instead of following the light-dark() theming in app.css -- an icon can't respond to prefers-color-scheme, and both gradient stops hold up on a dark tab bar. apple-touch-icon.png is the exception: iOS composites transparency and masks the corners, so it gets an opaque background and a 10% inset. favicon.ico sits at the root so bare /favicon.ico requests resolve; the link tags go through @Assets for fingerprinting, and <base href="/"> anchors them on nested routes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

author
Marijn Besseling <njirambem@gmail.com> · 2026-09-13 12:06 UTC
commit
62368ffe4983a4806c74c2822f1850e12c155d6b
parent
e907671854
tree
browse at this commit

4 files changed +18 -0

Blog/Components/App.razor +3 -0

@@ -5,6 +5,9 @@
5 5 <meta charset="utf-8"/>
6 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
7 7 <base href="/"/>
8 + <link rel="icon" href="@Assets["Icons/favicon.svg"]" type="image/svg+xml"/>
9 + <link rel="icon" href="@Assets["favicon.ico"]" sizes="48x48"/>
10 + <link rel="apple-touch-icon" href="@Assets["Icons/apple-touch-icon.png"]"/>
8 11 <link rel="stylesheet" href="@Assets["app.css"]"/>
9 12 <ImportMap/>
10 13 <HeadOutlet/>

Blog/wwwroot/Icons/apple-touch-icon.png +0 -0

Binary file. Download it as it was here.

Blog/wwwroot/Icons/favicon.svg +15 -0

@@ -0,0 +1,15 @@
1 +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
2 + <!-- The .bes.is mark: the path SiteHeader.razor draws, cropped square. -->
3 + <defs>
4 + <linearGradient id="mark">
5 + <stop stop-color="hsl(37, 99%, 67%)" offset="0"/>
6 + <stop stop-color="hsl(316, 73%, 52%)" offset="1"/>
7 + </linearGradient>
8 + </defs>
9 + <g transform="translate(-181.87 52.42)">
10 + <path d="M54.26008987426758,304.0358581542969C52.801195856730146,265.55753484090167,32.49626341501872,141.97009913126627,47.085201263427734,114.79820251464844C61.67413911183675,87.62630589803061,91.907320950826,171.49774983723958,126.00896453857422,170.40357971191406C160.11060812632243,169.30940958658854,195.1031356048584,84.06875615437826,214.79820251464844,109.41703796386719C234.49326942443847,134.7653197733561,195.51569310506184,269.53661931355794,222.8699493408203,295.0672607421875C250.22420557657878,320.59790217081706,342.2152226257324,258.137511138916,349.32733154296875,234.97756958007812C356.4394404602051,211.81762802124024,257.30044911702475,206.87891296386718,257.8475341796875,181.16590881347656C258.39461924235025,155.45290466308595,360.5889183044434,123.65619580586751,352.0179138183594,108.52017211914062C343.44690933227537,93.38414843241374,243.41403477986654,107.09117195129394,215.69505310058594,106.72644805908203"
11 + fill="none" stroke="url(#mark)" stroke-width="26" stroke-linecap="round"
12 + stroke-dasharray="125 106"
13 + transform="matrix(1.477455443789063,0,0,1.477455443789063,146.53673293574354,-95.92382431145532)"/>
14 + </g>
15 +</svg>

Blog/wwwroot/favicon.ico +0 -0

Binary file. Download it as it was here.