fabi/Hankan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(icons): 한칸 on a jade ground

Browse Source 
The PWA manifest declared icon-192.png, icon-512.png and favicon.svg. None
of the three existed, so install-to-home-screen and the browser tab both
resolved to nothing. That was a defect in what the last pass claimed as
done.

Drawn procedurally with Pillow rather than authored as SVG: there is no
dependable SVG rasteriser here to convert from, and ImageMagick falls back
to its MSVG renderer, which cannot be trusted with text. Pillow's
FreeType + RAQM stack shapes Hangul correctly, which is the only hard
requirement. The mark uses the app's own register — the serif face already
used for 한칸 on the boot screen, in --jade on --bg.

Two glyphs read well at 180px and up; at favicon sizes 한칸 turns to mush,
so the small sizes carry 한 alone.

  icon-192 · icon-512 · apple-touch-icon (180)   한칸
  icon-512-maskable                              한칸 at 56%, inside
                                                 Android's circular crop
  favicon.ico (16/32/48) · favicon-32            한

Sizing is a binary search on the drawn ink extent, and centring uses the ink
bounds rather than the font's line box — CJK metrics leave asymmetric space
above and below, which would otherwise sit the mark visibly high.

Re-running the generator writes byte-identical files.

Android launcher icons are untouched; Android work is out of scope.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-09-08 19:16:55 +02:00
parent 8f7f2fe568
commit 68403d6102
9 changed files with 108 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/index.html
View File

@@ -5,7 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#0F6B5C" />
<title>Hankan — 한국어 읽기</title>
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>
<body>
<div id="root"></div>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
app/public/favicon-32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
app/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
app/public/icon-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
app/public/icon-512-maskable.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
app/public/icon-512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

10
app/vite.config.ts
View File

@@ -35,7 +35,7 @@ export default defineConfig({
react(),
VitePWA({
registerType: "autoUpdate",
includeAssets: ["favicon.svg"],
includeAssets: ["favicon.ico", "favicon-32.png", "apple-touch-icon.png"],
manifest: {
name: "Hankan — 한국어 읽기",
short_name: "Hankan",
@@ -46,10 +46,12 @@ export default defineConfig({
background_color: "#F1F4F1",
theme_color: "#0F6B5C",
icons: [
{ src: "icon-192.png", sizes: "192x192", type: "image/png" },
{ src: "icon-512.png", sizes: "512x512", type: "image/png" },
{ src: "icon-192.png", sizes: "192x192", type: "image/png", purpose: "any" },
{ src: "icon-512.png", sizes: "512x512", type: "image/png", purpose: "any" },
// Android masks icons to a circle; this one keeps 한칸 inside the
// safe zone so the crop cannot clip it.
{
src: "icon-512.png",
src: "icon-512-maskable.png",
sizes: "512x512",
type: "image/png",
purpose: "maskable",