Add favicons and web manifest

Copies the design-system favicon set into app/ and wires up SVG, PNG
(16/32/48), apple-touch-icon, web manifest, and theme-color meta tag.

https://claude.ai/code/session_01MkM7p8Us3L8YAfLKGA13NS
This commit is contained in:
Claude 2026-06-08 04:19:40 +00:00
parent 46b17cd154
commit 195e61794d
No known key found for this signature in database
8 changed files with 50 additions and 0 deletions

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
app/favicon-16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 455 B

BIN
app/favicon-32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 786 B

BIN
app/favicon-48.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

8
app/favicon.svg Normal file
View file

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" role="img" aria-label="invoice">
<rect width="48" height="48" rx="12" fill="#2f6fed"></rect>
<path d="M14 9 H29 L34 14 V39 H14 Z" fill="none" stroke="#fff" stroke-width="3" stroke-linejoin="round"></path>
<path d="M29 9 V14 H34" fill="none" stroke="#fff" stroke-width="3" stroke-linejoin="round"></path>
<path d="M18.5 20 H27" stroke="#fff" stroke-width="2.6" stroke-linecap="round"></path>
<path d="M18.5 25 H29.5" stroke="#fff" stroke-width="2.6" stroke-linecap="round" opacity=".55"></path>
<path d="M18.5 33 H29.5" stroke="#fff" stroke-width="3.2" stroke-linecap="round"></path>
</svg>

After

Width:  |  Height:  |  Size: 684 B

BIN
app/icon-512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View file

@ -5,6 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no">
<title>Invoice</title> <title>Invoice</title>
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="icon" href="favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="favicon-16.png" sizes="16x16" type="image/png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">
<meta name="theme-color" content="#2f6fed">
<script> <script>
/* Restore persisted theme before first paint */ /* Restore persisted theme before first paint */
(function(){var t=localStorage.getItem("kb-theme");if(t)document.documentElement.setAttribute("data-theme",t);})(); (function(){var t=localStorage.getItem("kb-theme");if(t)document.documentElement.setAttribute("data-theme",t);})();

35
app/site.webmanifest Normal file
View file

@ -0,0 +1,35 @@
{
"name": "Invoice",
"short_name": "invoice",
"theme_color": "#2f6fed",
"background_color": "#2f6fed",
"display": "standalone",
"icons": [
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "apple-touch-icon.png",
"sizes": "180x180",
"type": "image/png"
},
{
"src": "favicon-48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "favicon-32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "favicon-16.png",
"sizes": "16x16",
"type": "image/png"
}
]
}