drew/captains-log
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions

Create a compass favicon and AppBar Icon. (#11)

Browse source 
Reviewed-on: #11
Co-authored-by: Drew Galbraith <drew@tiramisu.one>
Co-committed-by: Drew Galbraith <drew@tiramisu.one>
This commit is contained in:
Drew 2025-09-24 01:18:51 +00:00 • committed by Drew
parent 8e6ac03f70
commit 68dbaa32c9
10 changed files with 96 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/app/components/Layout.tsx
View file

@ -142,7 +142,15 @@ export default function Layout({ children, loading = false }: LayoutProps) {
gap: 1,
}}
>
⚓ Captain's Log
<img
src="/compass.svg"
alt="Captain's Log"
style={{
width: 32,
height: 32,
}}
/>
Captain's Log
</Typography>
<Button

16
frontend/app/root.tsx
View file

@ -25,6 +25,22 @@ export const links: Route.LinksFunction = () => [
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
},
// Favicon links
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: 'icon',
type: 'image/png',
sizes: '16x16',
href: '/favicon-16x16.png',
},
{
rel: 'icon',
type: 'image/png',
sizes: '32x32',
href: '/favicon-32x32.png',
},
{ rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
{ rel: 'manifest', href: '/site.webmanifest' },
]
export function Layout({ children }: { children: React.ReactNode }) {

BIN
frontend/public/android-chrome-192x192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
frontend/public/android-chrome-512x512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 484 KiB

BIN
frontend/public/apple-touch-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 74 KiB

52
frontend/public/compass.svg Normal file
View file

@ -0,0 +1,52 @@
<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--noto" preserveAspectRatio="xMidYMid meet">
<path d="M120.27 7.69C117.89 5.31 114.72 4 111.36 4s-6.53 1.31-8.91 3.69c-4.91 4.92-4.91 12.92 0 17.84c2.38 2.38 5.55 3.69 8.91 3.69c3.37 0 6.53-1.31 8.92-3.69c4.91-4.92 4.91-12.92-.01-17.84zm-13.89 3.94c1.33-1.33 3.1-2.06 4.97-2.06s3.65.73 4.98 2.06c2.75 2.75 2.75 7.22 0 9.96a6.997 6.997 0 0 1-4.98 2.06c-1.88 0-3.65-.73-4.97-2.06c-2.74-2.74-2.74-7.21 0-9.96z" fill="#d69e2e">
</path>
<path d="M105.51 30.95l-8.47-8.48l6.04-6.05a3.44 3.44 0 0 1 4.86 0l3.62 3.62a3.428 3.428 0 0 1 0 4.85l-6.05 6.06z" fill="#d69e2e">
</path>
<path d="M107.69 28.76s1.33-2.67-2.24-6.24s-6.27-2.2-6.27-2.2l-2.14 2.15l8.47 8.48l2.18-2.19z" fill="#b7791f">
</path>
<ellipse cx="62.37" cy="65.63" rx="58.33" ry="58.37" fill="#d69e2e">
</ellipse>
<ellipse cx="62.37" cy="65.63" rx="47.29" ry="47.32" fill="#ffffff">
</ellipse>
<path fill="#1e3a5f" d="M68.78 72.05l-6.41 27.71l-6.41-27.71l-27.7-6.42l27.7-6.41l6.41-27.72l6.41 27.72l27.7 6.41z">
</path>
<path fill="#2c5282" d="M71.43 65.63l15.06 24.14L62.37 74.7L38.25 89.77l15.06-24.14L38.25 41.5l24.12 15.06L86.49 41.5z">
</path>
<path d="M50.45 86.94s12.82-9.09 17.68-13.95C73 68.14 83.26 53.87 83.26 53.87c2.75-3.05 5.84-10.76 6.7-13c.09-.24-.14-.48-.38-.39c-1.96.75-8.17 3.2-12.5 5.96c-5.41 3.46-15.09 11.37-19.6 15.88s-10.37 13.2-13.7 17.93c-2.78 3.96-6.26 11.32-7.31 13.61c-.12.25.14.51.39.4c2.36-.99 10.01-4.36 13.59-7.32z" opacity=".32" fill="#2d3748">
</path>
<path d="M82.66 52.46c2.86-3.65 5.57-10.84 6.37-13.07c.1-.27-.16-.53-.44-.44c-2.23.8-9.41 3.52-13.06 6.38c-4.35 3.41-18.82 15.3-18.82 15.3l10.65 10.66c.01 0 11.89-14.48 15.3-18.83z" fill="#f56565">
</path>
<path d="M41.41 79.48c-2.86 3.65-5.57 10.84-6.37 13.07c-.1.27.16.53.44.44c2.23-.8 9.41-3.52 13.06-6.38c4.35-3.41 18.82-15.3 18.82-15.3L56.7 60.65S44.82 75.12 41.41 79.48z" fill="#4fd1c7">
</path>
<ellipse cx="62.03" cy="65.98" rx="7.56" ry="7.57" fill="#4fd1c7">
</ellipse>
<g>
<path d="M90.46 37.52a3.44 3.44 0 0 1 0-4.86l3.56-3.56l4.86 4.86l-3.55 3.56a3.434 3.434 0 0 1-4.87 0z" fill="#f56565">
</path>
<path d="M34.28 93.74a3.44 3.44 0 0 1 0 4.86l-3.56 3.56l-4.86-4.86l3.55-3.56a3.452 3.452 0 0 1 4.87 0z" fill="#718096">
</path>
<g fill="#1e3a5f">
<path d="M102.1 65.63c0-1.9 1.54-3.44 3.44-3.44h5.02v6.88h-5.02a3.44 3.44 0 0 1-3.44-3.44z">
</path>
<path d="M22.65 65.63c0 1.9-1.54 3.44-3.44 3.44h-5.02v-6.88h5.02c1.9 0 3.44 1.54 3.44 3.44z">
</path>
</g>
<g fill="#718096">
<path d="M90.46 93.74a3.44 3.44 0 0 1 4.86 0l3.55 3.56l-4.86 4.86l-3.56-3.56a3.45 3.45 0 0 1 .01-4.86z">
</path>
<path d="M34.28 37.52a3.44 3.44 0 0 1-4.86 0l-3.55-3.56l4.86-4.86l3.56 3.56a3.45 3.45 0 0 1-.01 4.86z">
</path>
</g>
<g fill="#1e3a5f">
<path d="M62.37 105.38c1.9 0 3.44 1.54 3.44 3.44v5.03h-6.87v-5.03a3.425 3.425 0 0 1 3.43-3.44z">
</path>
<path d="M62.37 25.88a3.44 3.44 0 0 1-3.44-3.44v-5.03h6.87v5.03c.01 1.9-1.53 3.44-3.43 3.44z">
</path>
</g>
<ellipse cx="62.37" cy="65.63" rx="47.29" ry="47.32" fill="none" stroke="#d69e2e" stroke-width="3" stroke-miterlimit="10">
</ellipse>
</g>
<path d="M8.72 64.92S6.6 54.18 12.25 40.88C20.59 21.26 38.6 10.46 57.97 9.62c14.53-.63 22.91 4.16 22.91 4.16s-11.82-.97-19.97-.61c-19.66.87-33.32 9.84-42.68 25.18c-7.7 12.64-9.51 26.57-9.51 26.57z" fill="#f7fafc">
</path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
frontend/public/favicon-16x16.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
frontend/public/favicon-32x32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
frontend/public/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Before After
Before After

19
frontend/public/site.webmanifest Normal file
View file

@ -0,0 +1,19 @@
{
"name": "Captain's Log",
"short_name": "Captain's Log",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#d69e2e",
"background_color": "#ffffff",
"display": "standalone"
}